248 lines
6.3 KiB
CSS
248 lines
6.3 KiB
CSS
/**
|
||
* 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 {
|
||
/* 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: #1a3d2e; /* moderat heller als #1b2a1f, aber dunkler als #1f4d3a */
|
||
--color-topbar2: #122d22; /* analog moderat heller als #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-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: 90 28% 12%;
|
||
|
||
/* Primary: #345636 -> hsl(124, 24%, 27%) */
|
||
--primary: 124 24% 27%;
|
||
--primary-foreground: 0 0% 100%;
|
||
--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: 130 15% 49%;
|
||
--secondary-foreground: 90 28% 12%;
|
||
|
||
--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;
|
||
|
||
--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);
|
||
}
|
||
|
||
@layer base {
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
background-color: #e6e8de;
|
||
color: var(--color-ink);
|
||
font-family: var(--font-sans);
|
||
-webkit-font-smoothing: antialiased;
|
||
font-feature-settings: "ss01", "cv11";
|
||
}
|
||
|
||
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 {
|
||
.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);
|
||
}
|
||
|
||
.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(
|
||
135deg,
|
||
var(--color-topbar) 0%,
|
||
var(--color-topbar2) 100%
|
||
);
|
||
}
|
||
.bg-feature-grad {
|
||
background-image: linear-gradient(135deg, #2c4733, #15281c);
|
||
}
|
||
.bg-hero-grad {
|
||
background-image: linear-gradient(135deg, #2c4733, #1a2a1f);
|
||
}
|
||
}
|
||
|
||
@layer utilities {
|
||
@keyframes bp-pulse {
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.3;
|
||
}
|
||
}
|
||
.pulse-dot {
|
||
animation: bp-pulse 1.6s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes bp-ticker-marquee {
|
||
from {
|
||
transform: translateX(0);
|
||
}
|
||
to {
|
||
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;
|
||
}
|
||
}
|
||
|
||
.tabular-nums {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
}
|
||
|
||
[x-cloak] {
|
||
display: none !important;
|
||
}
|