12-05-2026 Frontend dev
This commit is contained in:
parent
405df0a122
commit
5b8bdf4182
779 changed files with 480564 additions and 6241 deletions
|
|
@ -17,7 +17,7 @@
|
|||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
border-color: var(--color-zinc-200, currentColor);
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -77,9 +77,83 @@
|
|||
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white shadow-md transition-all duration-300 hover:shadow-lg;
|
||||
background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)));
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
hsl(var(--primary) / 0.9),
|
||||
hsl(var(--secondary) / 0.9)
|
||||
);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 transition-all duration-200 hover:bg-zinc-50 dark:hover:bg-zinc-700;
|
||||
}
|
||||
|
||||
/* Card Styles - Base */
|
||||
.card {
|
||||
@apply bg-white rounded-lg shadow-md overflow-hidden;
|
||||
@apply rounded-xl border transition-all duration-300 bg-white dark:bg-zinc-900;
|
||||
border-color: hsl(var(--border));
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.dark .card {
|
||||
border-color: hsl(var(--border) / 0.1);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply hover:scale-[1.02];
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
border-color: hsl(var(--primary) / 0.3);
|
||||
}
|
||||
|
||||
/* Shadow utilities */
|
||||
.shadow-card {
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.shadow-card-hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
/* Badge Styles - Base */
|
||||
.badge {
|
||||
@apply inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium transition-all duration-200;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@apply border;
|
||||
background-color: hsl(var(--primary) / 0.1);
|
||||
color: hsl(var(--primary));
|
||||
border-color: hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
@apply border text-zinc-700 dark:text-zinc-300;
|
||||
background-color: hsl(var(--secondary) / 0.1);
|
||||
border-color: hsl(var(--secondary) / 0.2);
|
||||
}
|
||||
|
||||
/* Input Styles */
|
||||
.input-primary {
|
||||
@apply w-full rounded-lg border px-4 py-2 text-sm transition-all duration-200 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100;
|
||||
border-color: hsl(var(--input));
|
||||
}
|
||||
|
||||
.input-primary:focus {
|
||||
@apply outline-none;
|
||||
--tw-ring-color: hsl(var(--primary));
|
||||
box-shadow: 0 0 0 2px var(--tw-ring-color);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Container */
|
||||
|
|
@ -91,12 +165,645 @@
|
|||
.section {
|
||||
@apply py-12 md:py-16 lg:py-20;
|
||||
}
|
||||
|
||||
/* Section Header Styles */
|
||||
.section-header {
|
||||
@apply mb-8;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@apply text-2xl md:text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-2;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
@apply text-zinc-600 dark:text-zinc-400;
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
/* Utility Classes & Animations */
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-down {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-in-right {
|
||||
animation: slide-in-right 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scale-in 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.animation-delay-100 {
|
||||
animation-delay: 0.1s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-300 {
|
||||
animation-delay: 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-400 {
|
||||
animation-delay: 0.4s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
HIGHLIGHTS SLIDER - Gemeinsame Styles
|
||||
============================================ */
|
||||
|
||||
/* Gradient Indicator */
|
||||
.gradient-indicator {
|
||||
width: 0.5rem;
|
||||
height: 2.5rem;
|
||||
background: linear-gradient(to bottom,
|
||||
hsl(var(--primary)),
|
||||
hsl(var(--secondary)));
|
||||
border-radius: 9999px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Slider Wrapper */
|
||||
.slider-wrapper {
|
||||
position: relative;
|
||||
margin-left: -1.5rem;
|
||||
margin-right: -1.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
margin-top: -3rem;
|
||||
}
|
||||
|
||||
/* Slider Container */
|
||||
.highlights-slider {
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem 1.25rem 2rem;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.highlights-slider::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Slider Navigation Buttons */
|
||||
.slider-nav-btn {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid;
|
||||
border-color: rgb(228 228 231 / 1);
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dark .slider-nav-btn {
|
||||
border-color: rgb(63 63 70 / 1);
|
||||
}
|
||||
|
||||
.slider-nav-btn:hover:not(:disabled) {
|
||||
border-color: hsl(var(--primary));
|
||||
background: hsl(var(--primary) / 0.1);
|
||||
}
|
||||
|
||||
.slider-nav-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Slider Dots */
|
||||
.slider-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.slider-dot {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 9999px;
|
||||
background: rgb(212 212 216 / 1);
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dark .slider-dot {
|
||||
background: rgb(82 82 91 / 1);
|
||||
}
|
||||
|
||||
.slider-dot.active {
|
||||
width: 2rem;
|
||||
background: hsl(var(--primary));
|
||||
}
|
||||
|
||||
/* Highlight Card Link */
|
||||
.highlight-card-link {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
scroll-snap-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.highlight-card-link:focus {
|
||||
outline: 2px solid hsl(var(--primary));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.card-premium {
|
||||
background: var(--color-white);
|
||||
box-shadow: var(--shadow-card);
|
||||
border: 1px solid;
|
||||
border-color: hsl(var(--primary) / 0.2);
|
||||
}
|
||||
.card-premium-hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
border-color: hsl(var(--primary) / 0.4);
|
||||
transform: translateY(-0.125rem);
|
||||
}
|
||||
/* Highlight Card */
|
||||
.highlight-card {
|
||||
background: linear-gradient(to bottom right,
|
||||
rgb(244 244 245 / 0.5),
|
||||
rgb(244 244 245 / 0.25));
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid;
|
||||
border-color: hsl(var(--primary) / 0.2);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dark .highlight-card {
|
||||
background: linear-gradient(to bottom right,
|
||||
rgb(39 39 42 / 1),
|
||||
rgb(39 39 42 / 0.5));
|
||||
border-color: rgb(63 63 70 / 1);
|
||||
}
|
||||
|
||||
.highlight-card-link:hover .highlight-card {
|
||||
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
|
||||
0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
border-color: hsl(var(--primary) / 0.3);
|
||||
transform: translateY(-0.125rem);
|
||||
}
|
||||
|
||||
/* Highlight Card Image */
|
||||
.highlight-card-image {
|
||||
position: relative;
|
||||
height: 16rem;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(to bottom right,
|
||||
rgb(244 244 245 / 1),
|
||||
rgb(250 250 250 / 1));
|
||||
}
|
||||
|
||||
.dark .highlight-card-image {
|
||||
background: linear-gradient(to bottom right,
|
||||
rgb(39 39 42 / 1),
|
||||
rgb(24 24 27 / 1));
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.highlight-card-image {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Highlight Badge */
|
||||
.highlight-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
padding: 0.375rem 0.75rem;
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
backdrop-filter: blur(12px);
|
||||
border-radius: 0.25rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Highlight Card Content */
|
||||
.highlight-card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 1.5rem 2rem;
|
||||
}
|
||||
|
||||
/* Highlight Meta */
|
||||
.highlight-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(113 113 122 / 1);
|
||||
}
|
||||
|
||||
.dark .highlight-meta {
|
||||
color: rgb(161 161 170 / 1);
|
||||
}
|
||||
|
||||
/* Highlight Title */
|
||||
.highlight-title {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
font-weight: 700;
|
||||
color: rgb(24 24 27 / 1);
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.25;
|
||||
transition: color 0.2s;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.highlight-title {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dark .highlight-title {
|
||||
color: rgb(250 250 250 / 1);
|
||||
}
|
||||
|
||||
.highlight-card-link:hover .highlight-title {
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
/* Highlight Text */
|
||||
.highlight-text {
|
||||
font-size: 1rem;
|
||||
line-height: 1.625;
|
||||
color: rgb(82 82 91 / 1);
|
||||
margin-bottom: 1.5rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dark .highlight-text {
|
||||
color: rgb(161 161 170 / 1);
|
||||
}
|
||||
|
||||
/* Highlight Footer */
|
||||
.highlight-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 1.25rem;
|
||||
border-top: 1px solid;
|
||||
border-color: hsl(var(--primary) / 0.1);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SECTION CONTAINERS - Gemeinsame Styles
|
||||
============================================ */
|
||||
|
||||
.section-light-bg {
|
||||
background: linear-gradient(135deg,
|
||||
rgb(250 250 250 / 0.5) 0%,
|
||||
rgb(244 244 245 / 0.5) 100%);
|
||||
}
|
||||
|
||||
.dark .section-light-bg {
|
||||
background: linear-gradient(135deg,
|
||||
rgb(24 24 27 / 0.5) 0%,
|
||||
rgb(39 39 42 / 0.5) 100%);
|
||||
}
|
||||
|
||||
.section-gradient-bg {
|
||||
background: linear-gradient(to bottom right,
|
||||
hsl(var(--primary) / 0.05),
|
||||
hsl(var(--secondary) / 0.05));
|
||||
border-top: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
border-color: hsl(var(--primary) / 0.1);
|
||||
}
|
||||
|
||||
.dark .section-gradient-bg {
|
||||
background: linear-gradient(to bottom right,
|
||||
hsl(var(--primary) / 0.1),
|
||||
hsl(var(--secondary) / 0.1));
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
HERO BANNER - Gemeinsame Styles
|
||||
============================================ */
|
||||
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg,
|
||||
hsl(var(--primary)) 0%,
|
||||
hsl(var(--secondary)) 100%);
|
||||
box-shadow: inset 0 -6px 16px rgba(0, 0, 0, 0.16);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dark .hero-gradient {
|
||||
box-shadow: inset 0 -6px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
INDUSTRY ICONS - Gemeinsame Styles
|
||||
============================================ */
|
||||
|
||||
.industry-icon-badge img {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.dark .industry-icon-badge img {
|
||||
opacity: 0.6;
|
||||
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PAGE HEADER - Unterseiten
|
||||
============================================ */
|
||||
|
||||
.page-header {
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg,
|
||||
rgb(250 250 250 / 0.5) 0%,
|
||||
rgb(244 244 245 / 0.5) 100%);
|
||||
border-bottom: 1px solid rgb(228 228 231 / 1);
|
||||
}
|
||||
|
||||
.dark .page-header {
|
||||
background: linear-gradient(135deg,
|
||||
rgb(24 24 27 / 0.5) 0%,
|
||||
rgb(39 39 42 / 0.5) 100%);
|
||||
border-bottom: 1px solid rgb(63 63 70 / 1);
|
||||
}
|
||||
|
||||
.page-header-compact {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.page-header-title {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: rgb(24 24 27 / 1);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.page-header-title {
|
||||
font-size: 3rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.dark .page-header-title {
|
||||
color: rgb(250 250 250 / 1);
|
||||
}
|
||||
|
||||
.page-header-subtitle {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
color: rgb(82 82 91 / 1);
|
||||
}
|
||||
|
||||
.dark .page-header-subtitle {
|
||||
color: rgb(161 161 170 / 1);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SIDEBAR WIDGETS
|
||||
============================================ */
|
||||
|
||||
.sidebar-widget {
|
||||
background: rgb(255 255 255 / 1);
|
||||
border: 1px solid rgb(228 228 231 / 1);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.dark .sidebar-widget {
|
||||
background: rgb(39 39 42 / 1);
|
||||
border-color: rgb(63 63 70 / 1);
|
||||
}
|
||||
|
||||
.sidebar-widget:hover {
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
|
||||
0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.sidebar-widget-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgb(228 228 231 / 1);
|
||||
}
|
||||
|
||||
.dark .sidebar-widget-header {
|
||||
border-bottom-color: rgb(63 63 70 / 1);
|
||||
}
|
||||
|
||||
.sidebar-widget-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: rgb(24 24 27 / 1);
|
||||
}
|
||||
|
||||
.dark .sidebar-widget-title {
|
||||
color: rgb(250 250 250 / 1);
|
||||
}
|
||||
|
||||
.sidebar-widget-content {
|
||||
color: rgb(82 82 91 / 1);
|
||||
}
|
||||
|
||||
.dark .sidebar-widget-content {
|
||||
color: rgb(161 161 170 / 1);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
NAVIGATION - Aktive States
|
||||
============================================ */
|
||||
|
||||
.main-nav-link.active {
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
.main-nav-link.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PAGINATION - Gradient für aktive Seite
|
||||
============================================ */
|
||||
.pagination-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
color: var(--zinc-900);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dark .pagination-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: var(--zinc-100);
|
||||
}
|
||||
|
||||
.pagination-btn:hover:not(.pagination-active):not(:disabled) {
|
||||
background: var(--zinc-100);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.dark .pagination-btn:hover:not(.pagination-active):not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.pagination-active, .dark .pagination-active {
|
||||
background: linear-gradient(90deg,
|
||||
hsl(var(--primary)) 0%,
|
||||
hsl(var(--secondary)) 100%);
|
||||
box-shadow: var(--shadow-md);
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pagination-active:hover {
|
||||
background: linear-gradient(90deg,
|
||||
hsl(var(--primary) / 0.9) 0%,
|
||||
hsl(var(--secondary) / 0.9) 100%);
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.pagination-nav {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.dark .pagination-nav {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.pagination-nav:hover:not(:disabled) {
|
||||
color: #111827;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.dark .pagination-nav:hover:not(:disabled) {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,291 +1,244 @@
|
|||
/**
|
||||
* Theme für Businessportal24 (businessportal24.test)
|
||||
* Primary: #cf3628 (Rot)
|
||||
* Secondary: #f0834a (Orange)
|
||||
* Font: Montserrat
|
||||
* Theme für businessportal24 (businessportal24.test)
|
||||
* Editorialer Wirtschaftsteil – Mockup "Pass B"
|
||||
*
|
||||
* Tailwind v4: alle Farben + Schriften liegen als @theme-Tokens vor,
|
||||
* sodass Klassen wie `bg-bg`, `text-ink-3`, `border-bg-rule` arbeiten
|
||||
* (1:1 wie im Tailwind-v3-Mockup unter dev/frontend/tailwind_v3/).
|
||||
*/
|
||||
@import "./shared-styles.css";
|
||||
|
||||
/* Theme-spezifische CSS-Variablen */
|
||||
@theme {
|
||||
/* Surfaces */
|
||||
--color-bg: #f6f4ef;
|
||||
--color-bg-elev: #fbfaf6;
|
||||
--color-bg-rule: #e5e0d5;
|
||||
--color-bg-rule-strong: #1c1a17;
|
||||
--color-bg-dark: #14202e;
|
||||
--color-bg-card-warm: #f1ece2;
|
||||
--color-bg-card-warm-border: #d9cdb6;
|
||||
--color-topbar: #1a1f26;
|
||||
--color-topbar2: #232a33;
|
||||
|
||||
/* Ink */
|
||||
--color-ink: #1c1a17;
|
||||
--color-ink-2: #3d3935;
|
||||
--color-ink-3: #6e6862;
|
||||
--color-ink-4: #9a958d;
|
||||
--color-ink-on-dark: #f6f4ef;
|
||||
--color-ink-on-dark-2: #b8b3aa;
|
||||
|
||||
/* Brand */
|
||||
--color-brand: #c84a1e;
|
||||
--color-brand-deep: #a23814;
|
||||
--color-brand-soft: #f4e5dd;
|
||||
--color-live: #e03a1a;
|
||||
--color-gain: #2e8540;
|
||||
--color-loss: #c8341e;
|
||||
--color-ok: #2e8540;
|
||||
|
||||
/* Editorial-Akzente (auf dunklem Grund / in Card-Warm) */
|
||||
--color-accent-warm: #ff8b6f;
|
||||
--color-ink-on-dark-muted: #8a847b;
|
||||
--color-ink-on-dark-rule: #2a2723;
|
||||
--color-bg-card-warm-hover: #ece5d5;
|
||||
--color-bg-card-warm-rule: #c8bda8;
|
||||
--color-card-warm-cat: #6e6862;
|
||||
--color-card-warm-title: #3a332b;
|
||||
--color-feature-line: #a8c8a8;
|
||||
--color-feature-dot: #c4dcc4;
|
||||
|
||||
/* Fonts */
|
||||
--font-sans: "Inter Tight", "Söhne", Inter, system-ui, -apple-system,
|
||||
BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-serif: "Source Serif 4", "Source Serif Pro", Charter,
|
||||
"Iowan Old Style", Georgia, serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
|
||||
Menlo, Consolas, monospace;
|
||||
|
||||
/* Layout */
|
||||
--container-layout: 1280px;
|
||||
}
|
||||
|
||||
/* HSL-Variablen für vorhandene Shared-Components (Pagination, Cards, etc.) */
|
||||
:root {
|
||||
/* Font-Familie */
|
||||
--font-primary: "Montserrat", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-secondary: "Montserrat", ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
/* HSL-Variablen basierend auf Primary Color #cf3628 */
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 4 61% 20%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 4 61% 20%;
|
||||
--font-primary: var(--font-sans);
|
||||
--font-secondary: var(--font-sans);
|
||||
|
||||
--background: 39 27% 95%;
|
||||
--foreground: 24 8% 10%;
|
||||
--card: 39 27% 95%;
|
||||
--card-foreground: 24 8% 10%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 4 61% 20%;
|
||||
--popover-foreground: 24 8% 10%;
|
||||
|
||||
/* Primary: #cf3628 -> hsl(4, 61%, 48%) */
|
||||
--primary: 4 61% 48%;
|
||||
--primary: 13 74% 45%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--primary-50: 4 60% 96%;
|
||||
--primary-100: 4 61% 92%;
|
||||
--primary-200: 4 61% 85%;
|
||||
--primary-300: 4 61% 75%;
|
||||
--primary-400: 4 61% 65%;
|
||||
--primary-500: 4 61% 55%;
|
||||
--primary-600: 4 61% 48%;
|
||||
--primary-700: 4 61% 40%;
|
||||
--primary-800: 4 61% 32%;
|
||||
--primary-900: 4 61% 25%;
|
||||
--primary-950: 4 61% 20%;
|
||||
--primary-50: 13 70% 96%;
|
||||
--primary-100: 13 70% 92%;
|
||||
--primary-200: 13 70% 85%;
|
||||
--primary-300: 13 70% 75%;
|
||||
--primary-400: 13 70% 65%;
|
||||
--primary-500: 13 74% 55%;
|
||||
--primary-600: 13 74% 45%;
|
||||
--primary-700: 13 74% 38%;
|
||||
--primary-800: 13 74% 30%;
|
||||
--primary-900: 13 74% 25%;
|
||||
--primary-950: 13 74% 18%;
|
||||
|
||||
/* Secondary: #f0834a -> hsl(21, 84%, 62%) */
|
||||
--secondary: 21 84% 62%;
|
||||
--secondary-foreground: 4 61% 20%;
|
||||
--secondary-foreground: 24 8% 10%;
|
||||
|
||||
--muted: 4 10% 95%;
|
||||
--muted-foreground: 4 10% 45%;
|
||||
|
||||
--accent: 4 61% 48%;
|
||||
--muted: 36 25% 90%;
|
||||
--muted-foreground: 30 6% 40%;
|
||||
--accent: 13 74% 45%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 39 24% 86%;
|
||||
--input: 39 24% 86%;
|
||||
--ring: 13 74% 45%;
|
||||
--radius: 2px;
|
||||
|
||||
--border: 4 10% 90%;
|
||||
--input: 4 10% 90%;
|
||||
--ring: 4 61% 48%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Gradient für Hero */
|
||||
--gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
|
||||
|
||||
/* Shadow-Token */
|
||||
--shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
|
||||
/* Warning Colors für Anzeige-Badge */
|
||||
--warning: 45 93% 47%;
|
||||
--warning-foreground: 26 83% 14%;
|
||||
--shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.04);
|
||||
--shadow-card-hover: 0 4px 12px -2px rgb(0 0 0 / 0.08);
|
||||
}
|
||||
|
||||
/* Dark Mode Variablen (falls gewünscht) */
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@layer theme {
|
||||
.dark {
|
||||
--background: 4 20% 10%;
|
||||
--foreground: 0 0% 95%;
|
||||
|
||||
--card: 4 20% 12%;
|
||||
--card-foreground: 0 0% 95%;
|
||||
|
||||
--popover: 4 20% 12%;
|
||||
--popover-foreground: 0 0% 95%;
|
||||
|
||||
--primary: 21 84% 62%;
|
||||
--secondary: 4 61% 48%;
|
||||
|
||||
--muted: 4 20% 20%;
|
||||
--muted-foreground: 4 10% 70%;
|
||||
|
||||
--accent: 21 84% 62%;
|
||||
--accent-foreground: 0 0% 10%;
|
||||
|
||||
--border: 4 20% 20%;
|
||||
--input: 4 20% 20%;
|
||||
--ring: 21 84% 62%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme-spezifische Overrides */
|
||||
@layer base {
|
||||
html,
|
||||
body {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: hsl(var(--primary));
|
||||
body {
|
||||
background-color: #e8e4da;
|
||||
color: var(--color-ink);
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-feature-settings: "ss01", "cv11";
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: hsl(var(--secondary));
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-family: var(--font-serif);
|
||||
color: inherit;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: var(--font-mono);
|
||||
font-feature-settings: "tnum";
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Button Styles */
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white shadow-md transition-all duration-300 hover:shadow-lg;
|
||||
background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)));
|
||||
.eyebrow {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-brand);
|
||||
}
|
||||
.eyebrow.muted {
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
.eyebrow.on-dark {
|
||||
color: var(--color-accent-warm);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
.bp-cat {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
.bp-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 3px 8px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
background: var(--color-brand);
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.rule-strong {
|
||||
height: 1px;
|
||||
background: var(--color-bg-rule-strong);
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.rule {
|
||||
height: 1px;
|
||||
background: var(--color-bg-rule);
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bg-topbar-grad {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
hsl(var(--primary) / 0.9),
|
||||
hsl(var(--secondary) / 0.9)
|
||||
135deg,
|
||||
var(--color-topbar) 0%,
|
||||
var(--color-topbar2) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-all duration-200 hover:bg-gray-50;
|
||||
.bg-feature-grad {
|
||||
background-image: linear-gradient(135deg, #2a3a2a, #1a2a1a);
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.card {
|
||||
@apply rounded-xl border transition-all duration-300;
|
||||
background-color: hsl(var(--card));
|
||||
border-color: hsl(var(--border));
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply hover:scale-[1.02];
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
border-color: hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
/* Shadow utilities */
|
||||
.shadow-card {
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.shadow-card-hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
/* Input Styles */
|
||||
.input-primary {
|
||||
@apply w-full rounded-lg border px-4 py-2 text-sm transition-all duration-200;
|
||||
border-color: hsl(var(--input));
|
||||
}
|
||||
|
||||
.input-primary:focus {
|
||||
@apply outline-none;
|
||||
--tw-ring-color: hsl(var(--primary));
|
||||
box-shadow: 0 0 0 2px var(--tw-ring-color);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Badge Styles */
|
||||
.badge {
|
||||
@apply inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium transition-all duration-200;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@apply border;
|
||||
background-color: hsl(var(--primary) / 0.1);
|
||||
color: hsl(var(--primary));
|
||||
border-color: hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
@apply border text-gray-700;
|
||||
background-color: hsl(var(--secondary) / 0.1);
|
||||
border-color: hsl(var(--secondary) / 0.2);
|
||||
.bg-hero-grad {
|
||||
background-image: linear-gradient(135deg, #2a3a4a, #1a1f26);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@layer utilities {
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
@keyframes bp-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.pulse-dot {
|
||||
animation: bp-pulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes fade-in-down {
|
||||
@keyframes bp-ticker-marquee {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.ticker-marquee-track {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
gap: 1.5rem;
|
||||
animation: bp-ticker-marquee var(--bp-ticker-duration, 42s) linear infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ticker-marquee-track {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-in-right {
|
||||
animation: slide-in-right 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scale-in 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.animation-delay-100 {
|
||||
animation-delay: 0.1s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-300 {
|
||||
animation-delay: 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-400 {
|
||||
animation-delay: 0.4s;
|
||||
opacity: 0;
|
||||
.tabular-nums {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
|
||||
/* Alpine.js: vor Init versteckte Elemente */
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,291 +1,248 @@
|
|||
/**
|
||||
* Theme für Presseecho (presseecho.test)
|
||||
* Primary: #345636 (Grün)
|
||||
* Secondary: #6b8f71 (Hellgrün)
|
||||
* Font: Montserrat
|
||||
* Theme für presseecho (presseecho.test)
|
||||
* Editorialer Wirtschaftsteil – analoge Architektur zu businessportal24,
|
||||
* aber mit grüner Markenpalette (Primary: #345636).
|
||||
*
|
||||
* Tailwind v4: alle Farben + Schriften liegen als @theme-Tokens vor,
|
||||
* sodass Klassen wie `bg-bg`, `text-ink-3`, `border-bg-rule` arbeiten
|
||||
* (gleiche Token-Namen wie bei businessportal24 → Komponenten-Reuse).
|
||||
*
|
||||
* Die alten HSL-Variablen aus shadcn-Style bleiben am Ende erhalten,
|
||||
* damit Legacy-Komponenten (`hero-banner`, `article-card`, etc.) nicht brechen.
|
||||
*/
|
||||
@import "./shared-styles.css";
|
||||
|
||||
/* Theme-spezifische CSS-Variablen */
|
||||
@theme {
|
||||
/* Surfaces */
|
||||
--color-bg: #f2f4ed;
|
||||
--color-bg-elev: #fafbf7;
|
||||
--color-bg-rule: #dde2d3;
|
||||
--color-bg-rule-strong: #1b2417;
|
||||
--color-bg-dark: #15201a;
|
||||
--color-bg-card-warm: #ecefe3;
|
||||
--color-bg-card-warm-border: #c7cfb6;
|
||||
--color-topbar: #1b2a1f;
|
||||
--color-topbar2: #25342a;
|
||||
|
||||
/* Ink */
|
||||
--color-ink: #1b2417;
|
||||
--color-ink-2: #324132;
|
||||
--color-ink-3: #6a7766;
|
||||
--color-ink-4: #98a294;
|
||||
--color-ink-on-dark: #f0f4eb;
|
||||
--color-ink-on-dark-2: #b1b9ab;
|
||||
|
||||
/* Brand (Presseecho-grün) */
|
||||
--color-brand: #345636;
|
||||
--color-brand-deep: #243c25;
|
||||
--color-brand-soft: #dbe7d3;
|
||||
--color-live: #e03a1a;
|
||||
--color-gain: #2e8540;
|
||||
--color-loss: #c8341e;
|
||||
--color-ok: #2e8540;
|
||||
|
||||
/* Editorial-Akzente (auf dunklem Grund / in Card-Warm) */
|
||||
--color-accent-warm: #e8a95f;
|
||||
--color-ink-on-dark-muted: #859485;
|
||||
--color-ink-on-dark-rule: #28332b;
|
||||
--color-bg-card-warm-hover: #dde3cc;
|
||||
--color-bg-card-warm-rule: #b7c0a2;
|
||||
--color-card-warm-cat: #5f6a52;
|
||||
--color-card-warm-title: #2e3826;
|
||||
--color-feature-line: #a8c8a8;
|
||||
--color-feature-dot: #c4dcc4;
|
||||
|
||||
/* Fonts */
|
||||
--font-sans: "Inter Tight", "Söhne", Inter, system-ui, -apple-system,
|
||||
BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-serif: "Source Serif 4", "Source Serif Pro", Charter,
|
||||
"Iowan Old Style", Georgia, serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
|
||||
Menlo, Consolas, monospace;
|
||||
|
||||
/* Layout */
|
||||
--container-layout: 1280px;
|
||||
}
|
||||
|
||||
/* HSL-Variablen für Legacy-Komponenten (shared-styles, alte presseecho-Karten) */
|
||||
:root {
|
||||
/* Font-Familie */
|
||||
--font-primary: "Montserrat", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-secondary: "Montserrat", ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
/* HSL-Variablen basierend auf Primary Color #345636 */
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 126 24% 20%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 126 24% 20%;
|
||||
--font-primary: var(--font-sans);
|
||||
--font-secondary: var(--font-sans);
|
||||
|
||||
--background: 87 22% 94%;
|
||||
--foreground: 90 28% 12%;
|
||||
--card: 87 22% 94%;
|
||||
--card-foreground: 90 28% 12%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 126 24% 20%;
|
||||
--popover-foreground: 90 28% 12%;
|
||||
|
||||
/* Primary: #345636 -> hsl(126, 24%, 27%) */
|
||||
--primary: 126 24% 27%;
|
||||
/* Primary: #345636 -> hsl(124, 24%, 27%) */
|
||||
--primary: 124 24% 27%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--primary-50: 126 24% 96%;
|
||||
--primary-100: 126 24% 92%;
|
||||
--primary-200: 126 24% 85%;
|
||||
--primary-300: 126 24% 75%;
|
||||
--primary-400: 126 24% 65%;
|
||||
--primary-500: 126 24% 55%;
|
||||
--primary-600: 126 24% 48%;
|
||||
--primary-700: 126 24% 40%;
|
||||
--primary-800: 126 24% 32%;
|
||||
--primary-900: 126 24% 25%;
|
||||
--primary-950: 126 24% 20%;
|
||||
--primary-50: 124 24% 96%;
|
||||
--primary-100: 124 24% 92%;
|
||||
--primary-200: 124 24% 85%;
|
||||
--primary-300: 124 24% 75%;
|
||||
--primary-400: 124 24% 65%;
|
||||
--primary-500: 124 24% 55%;
|
||||
--primary-600: 124 24% 48%;
|
||||
--primary-700: 124 24% 40%;
|
||||
--primary-800: 124 24% 32%;
|
||||
--primary-900: 124 24% 25%;
|
||||
--primary-950: 124 24% 18%;
|
||||
|
||||
/* Secondary: #6b8f71 -> hsl(130, 15%, 49%) */
|
||||
--secondary: 130 15% 49%;
|
||||
--secondary-foreground: 126 24% 20%;
|
||||
--secondary-foreground: 90 28% 12%;
|
||||
|
||||
--muted: 126 10% 95%;
|
||||
--muted-foreground: 126 10% 45%;
|
||||
|
||||
--accent: 126 24% 27%;
|
||||
--muted: 90 10% 90%;
|
||||
--muted-foreground: 90 8% 38%;
|
||||
--accent: 124 24% 27%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 90 16% 84%;
|
||||
--input: 90 16% 84%;
|
||||
--ring: 124 24% 27%;
|
||||
--radius: 2px;
|
||||
|
||||
--border: 126 10% 90%;
|
||||
--input: 126 10% 90%;
|
||||
--ring: 126 24% 27%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Gradient für Hero */
|
||||
--gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
|
||||
|
||||
/* Shadow-Token */
|
||||
--shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
|
||||
/* Warning Colors für Anzeige-Badge */
|
||||
--warning: 45 93% 47%;
|
||||
--warning-foreground: 26 83% 14%;
|
||||
--shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.04);
|
||||
--shadow-card-hover: 0 4px 12px -2px rgb(0 0 0 / 0.08);
|
||||
}
|
||||
|
||||
/* Dark Mode Variablen (falls gewünscht) */
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@layer theme {
|
||||
.dark {
|
||||
--background: 126 20% 10%;
|
||||
--foreground: 0 0% 95%;
|
||||
|
||||
--card: 126 20% 12%;
|
||||
--card-foreground: 0 0% 95%;
|
||||
|
||||
--popover: 126 20% 12%;
|
||||
--popover-foreground: 0 0% 95%;
|
||||
|
||||
--primary: 130 15% 49%;
|
||||
--secondary: 126 24% 27%;
|
||||
|
||||
--muted: 126 20% 20%;
|
||||
--muted-foreground: 126 10% 70%;
|
||||
|
||||
--accent: 130 15% 49%;
|
||||
--accent-foreground: 0 0% 10%;
|
||||
|
||||
--border: 126 20% 20%;
|
||||
--input: 126 20% 20%;
|
||||
--ring: 130 15% 49%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme-spezifische Overrides */
|
||||
@layer base {
|
||||
html,
|
||||
body {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: hsl(var(--primary));
|
||||
body {
|
||||
background-color: #e6e8de;
|
||||
color: var(--color-ink);
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-feature-settings: "ss01", "cv11";
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: hsl(var(--secondary));
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-family: var(--font-serif);
|
||||
color: inherit;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: var(--font-mono);
|
||||
font-feature-settings: "tnum";
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Button Styles */
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white shadow-md transition-all duration-300 hover:shadow-lg;
|
||||
background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)));
|
||||
.eyebrow {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-brand);
|
||||
}
|
||||
.eyebrow.muted {
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
.eyebrow.on-dark {
|
||||
color: var(--color-accent-warm);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
.bp-cat {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
.bp-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 3px 8px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
background: var(--color-brand);
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.rule-strong {
|
||||
height: 1px;
|
||||
background: var(--color-bg-rule-strong);
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.rule {
|
||||
height: 1px;
|
||||
background: var(--color-bg-rule);
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bg-topbar-grad {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
hsl(var(--primary) / 0.9),
|
||||
hsl(var(--secondary) / 0.9)
|
||||
135deg,
|
||||
var(--color-topbar) 0%,
|
||||
var(--color-topbar2) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-all duration-200 hover:bg-gray-50;
|
||||
.bg-feature-grad {
|
||||
background-image: linear-gradient(135deg, #2c4733, #15281c);
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.card {
|
||||
@apply rounded-xl border transition-all duration-300;
|
||||
background-color: hsl(var(--card));
|
||||
border-color: hsl(var(--border));
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply hover:scale-[1.02];
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
border-color: hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
/* Shadow utilities */
|
||||
.shadow-card {
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.shadow-card-hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
/* Input Styles */
|
||||
.input-primary {
|
||||
@apply w-full rounded-lg border px-4 py-2 text-sm transition-all duration-200;
|
||||
border-color: hsl(var(--input));
|
||||
}
|
||||
|
||||
.input-primary:focus {
|
||||
@apply outline-none;
|
||||
--tw-ring-color: hsl(var(--primary));
|
||||
box-shadow: 0 0 0 2px var(--tw-ring-color);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Badge Styles */
|
||||
.badge {
|
||||
@apply inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium transition-all duration-200;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@apply border;
|
||||
background-color: hsl(var(--primary) / 0.1);
|
||||
color: hsl(var(--primary));
|
||||
border-color: hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
@apply border text-gray-700;
|
||||
background-color: hsl(var(--secondary) / 0.1);
|
||||
border-color: hsl(var(--secondary) / 0.2);
|
||||
.bg-hero-grad {
|
||||
background-image: linear-gradient(135deg, #2c4733, #1a2a1f);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@layer utilities {
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
@keyframes bp-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.pulse-dot {
|
||||
animation: bp-pulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes fade-in-down {
|
||||
@keyframes bp-ticker-marquee {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.ticker-marquee-track {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
gap: 1.5rem;
|
||||
animation: bp-ticker-marquee var(--bp-ticker-duration, 42s) linear infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ticker-marquee-track {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-in-right {
|
||||
animation: slide-in-right 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scale-in 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.animation-delay-100 {
|
||||
animation-delay: 0.1s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-300 {
|
||||
animation-delay: 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-400 {
|
||||
animation-delay: 0.4s;
|
||||
opacity: 0;
|
||||
.tabular-nums {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue