500 lines
14 KiB
CSS
500 lines
14 KiB
CSS
@import 'tailwindcss';
|
||
@import 'tw-animate-css';
|
||
@import "shadcn/tailwind.css";
|
||
@import "@fontsource-variable/nunito-sans";
|
||
@import "@fontsource-variable/public-sans";
|
||
|
||
@font-face {
|
||
font-family: Vend Sans;
|
||
src: url('/fonts/VendSans-VariableFont_wght.woff2') format('woff2');
|
||
font-weight: 100 900;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@plugin '@tailwindcss/typography';
|
||
|
||
@custom-variant dark (&:is(.dark *));
|
||
|
||
:root {
|
||
--sea-ink: #173a40;
|
||
--sea-ink-soft: #416166;
|
||
--lagoon: #4fb8b2;
|
||
--lagoon-deep: #328f97;
|
||
--palm: #2f6a4a;
|
||
--sand: #e7f0e8;
|
||
--foam: #f3faf5;
|
||
--surface: rgba(255, 255, 255, 0.74);
|
||
--surface-strong: rgba(255, 255, 255, 0.9);
|
||
--line: rgba(23, 58, 64, 0.14);
|
||
--inset-glint: rgba(255, 255, 255, 0.82);
|
||
--kicker: rgba(47, 106, 74, 0.9);
|
||
--bg-base: #e7f3ec;
|
||
--header-bg: rgba(251, 255, 248, 0.84);
|
||
--chip-bg: rgba(255, 255, 255, 0.8);
|
||
--chip-line: rgba(47, 106, 74, 0.18);
|
||
--link-bg-hover: rgba(255, 255, 255, 0.9);
|
||
--hero-a: rgba(79, 184, 178, 0.36);
|
||
--hero-b: rgba(47, 106, 74, 0.2);
|
||
|
||
--background: oklch(1 0 0);
|
||
--foreground: oklch(0.141 0.005 285.823);
|
||
--card: oklch(1 0 0);
|
||
--card-foreground: oklch(0.141 0.005 285.823);
|
||
--popover: oklch(1 0 0);
|
||
--popover-foreground: oklch(0.141 0.005 285.823);
|
||
--primary: oklch(0.508 0.118 165.612);
|
||
--primary-foreground: oklch(0.979 0.021 166.113);
|
||
--secondary: oklch(0.967 0.001 286.375);
|
||
--secondary-foreground: oklch(0.21 0.006 285.885);
|
||
--muted: oklch(0.967 0.001 286.375);
|
||
--muted-foreground: oklch(0.552 0.016 285.938);
|
||
--accent: oklch(0.967 0.001 286.375);
|
||
--accent-foreground: oklch(0.21 0.006 285.885);
|
||
--destructive: oklch(0.577 0.245 27.325);
|
||
--destructive-foreground: oklch(0.577 0.245 27.325);
|
||
--border: oklch(0.92 0.004 286.32);
|
||
--input: oklch(0.92 0.004 286.32);
|
||
--ring: oklch(0.705 0.015 286.067);
|
||
--chart-1: oklch(0.845 0.143 164.978);
|
||
--chart-2: oklch(0.696 0.17 162.48);
|
||
--chart-3: oklch(0.596 0.145 163.225);
|
||
--chart-4: oklch(0.508 0.118 165.612);
|
||
--chart-5: oklch(0.432 0.095 166.913);
|
||
--radius: 0.625rem;
|
||
--sidebar: oklch(0.985 0 0);
|
||
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
||
--sidebar-primary: oklch(0.596 0.145 163.225);
|
||
--sidebar-primary-foreground: oklch(0.979 0.021 166.113);
|
||
--sidebar-accent: oklch(0.967 0.001 286.375);
|
||
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||
--sidebar-ring: oklch(0.705 0.015 286.067);
|
||
}
|
||
|
||
.dark {
|
||
--sea-ink: #d7ece8;
|
||
--sea-ink-soft: #afcdc8;
|
||
--lagoon: #60d7cf;
|
||
--lagoon-deep: #8de5db;
|
||
--palm: #6ec89a;
|
||
--sand: #0f1a1e;
|
||
--foam: #101d22;
|
||
--surface: rgba(16, 30, 34, 0.8);
|
||
--surface-strong: rgba(15, 27, 31, 0.92);
|
||
--line: rgba(141, 229, 219, 0.18);
|
||
--inset-glint: rgba(194, 247, 238, 0.14);
|
||
--kicker: #b8efe5;
|
||
--bg-base: #0a1418;
|
||
--header-bg: rgba(10, 20, 24, 0.8);
|
||
--chip-bg: rgba(13, 28, 32, 0.9);
|
||
--chip-line: rgba(141, 229, 219, 0.24);
|
||
--link-bg-hover: rgba(24, 44, 49, 0.8);
|
||
--hero-a: rgba(96, 215, 207, 0.18);
|
||
--hero-b: rgba(110, 200, 154, 0.12);
|
||
|
||
--background: oklch(0.141 0.005 285.823);
|
||
--foreground: oklch(0.985 0 0);
|
||
--card: oklch(0.21 0.006 285.885);
|
||
--card-foreground: oklch(0.985 0 0);
|
||
--popover: oklch(0.21 0.006 285.885);
|
||
--popover-foreground: oklch(0.985 0 0);
|
||
--primary: oklch(0.432 0.095 166.913);
|
||
--primary-foreground: oklch(0.979 0.021 166.113);
|
||
--secondary: oklch(0.274 0.006 286.033);
|
||
--secondary-foreground: oklch(0.985 0 0);
|
||
--muted: oklch(0.274 0.006 286.033);
|
||
--muted-foreground: oklch(0.705 0.015 286.067);
|
||
--accent: oklch(0.274 0.006 286.033);
|
||
--accent-foreground: oklch(0.985 0 0);
|
||
--destructive: oklch(0.704 0.191 22.216);
|
||
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||
--border: oklch(1 0 0 / 10%);
|
||
--input: oklch(1 0 0 / 15%);
|
||
--ring: oklch(0.552 0.016 285.938);
|
||
--chart-1: oklch(0.845 0.143 164.978);
|
||
--chart-2: oklch(0.696 0.17 162.48);
|
||
--chart-3: oklch(0.596 0.145 163.225);
|
||
--chart-4: oklch(0.508 0.118 165.612);
|
||
--chart-5: oklch(0.432 0.095 166.913);
|
||
--sidebar: oklch(0.21 0.006 285.885);
|
||
--sidebar-foreground: oklch(0.985 0 0);
|
||
--sidebar-primary: oklch(0.696 0.17 162.48);
|
||
--sidebar-primary-foreground: oklch(0.262 0.051 172.552);
|
||
--sidebar-accent: oklch(0.274 0.006 286.033);
|
||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||
--sidebar-border: oklch(1 0 0 / 10%);
|
||
--sidebar-ring: oklch(0.552 0.016 285.938);
|
||
}
|
||
|
||
@theme inline {
|
||
--font-sans: 'Vend Sans', sans-serif;
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
--color-card: var(--card);
|
||
--color-card-foreground: var(--card-foreground);
|
||
--color-popover: var(--popover);
|
||
--color-popover-foreground: var(--popover-foreground);
|
||
--color-primary: var(--primary);
|
||
--color-primary-foreground: var(--primary-foreground);
|
||
--color-secondary: var(--secondary);
|
||
--color-secondary-foreground: var(--secondary-foreground);
|
||
--color-muted: var(--muted);
|
||
--color-muted-foreground: var(--muted-foreground);
|
||
--color-accent: var(--accent);
|
||
--color-accent-foreground: var(--accent-foreground);
|
||
--color-destructive: var(--destructive);
|
||
--color-destructive-foreground: var(--destructive-foreground);
|
||
--color-border: var(--border);
|
||
--color-input: var(--input);
|
||
--color-ring: var(--ring);
|
||
--color-chart-1: var(--chart-1);
|
||
--color-chart-2: var(--chart-2);
|
||
--color-chart-3: var(--chart-3);
|
||
--color-chart-4: var(--chart-4);
|
||
--color-chart-5: var(--chart-5);
|
||
--radius-sm: calc(var(--radius) - 4px);
|
||
--radius-md: calc(var(--radius) - 2px);
|
||
--radius-lg: var(--radius);
|
||
--radius-xl: calc(var(--radius) + 4px);
|
||
--color-sidebar: var(--sidebar);
|
||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||
--color-sidebar-primary: var(--sidebar-primary);
|
||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||
--color-sidebar-accent: var(--sidebar-accent);
|
||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||
--color-sidebar-border: var(--sidebar-border);
|
||
--color-sidebar-ring: var(--sidebar-ring);
|
||
--font-heading: 'Public Sans Variable', sans-serif;
|
||
--radius-2xl: calc(var(--radius) * 1.8);
|
||
--radius-3xl: calc(var(--radius) * 2.2);
|
||
--radius-4xl: calc(var(--radius) * 2.6);
|
||
}
|
||
|
||
html,
|
||
body,
|
||
#app {
|
||
min-height: 100%;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
color: var(--sea-ink);
|
||
font-family: var(--font-sans);
|
||
background-color: var(--bg-base);
|
||
background:
|
||
radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%),
|
||
radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%),
|
||
radial-gradient(720px 380px at 50% 115%, rgba(79, 184, 178, 0.1), transparent 68%),
|
||
linear-gradient(180deg, color-mix(in oklab, var(--sand) 68%, white) 0%, var(--foam) 44%, var(--bg-base) 100%);
|
||
overflow-x: hidden;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
body::before {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
opacity: 0.28;
|
||
background:
|
||
radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.8), transparent 34%),
|
||
radial-gradient(circle at 78% 26%, rgba(79, 184, 178, 0.2), transparent 42%),
|
||
radial-gradient(circle at 42% 82%, rgba(47, 106, 74, 0.14), transparent 36%);
|
||
}
|
||
|
||
body::after {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
opacity: 0.14;
|
||
background-image:
|
||
linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
|
||
background-size: 28px 28px;
|
||
mask-image: radial-gradient(circle at 50% 30%, black, transparent 78%);
|
||
}
|
||
|
||
@layer base {
|
||
a {
|
||
color: var(--lagoon-deep);
|
||
text-decoration-color: rgba(50, 143, 151, 0.4);
|
||
text-decoration-thickness: 1px;
|
||
text-underline-offset: 2px;
|
||
}
|
||
|
||
a:hover {
|
||
color: #246f76;
|
||
}
|
||
}
|
||
|
||
code {
|
||
font-size: 0.9em;
|
||
border: 1px solid var(--line);
|
||
background: color-mix(in oklab, var(--surface-strong) 82%, white 18%);
|
||
border-radius: 7px;
|
||
padding: 2px 7px;
|
||
}
|
||
|
||
pre code {
|
||
border: 0;
|
||
background: transparent;
|
||
padding: 0;
|
||
border-radius: 0;
|
||
font-size: inherit;
|
||
color: inherit;
|
||
}
|
||
|
||
.prose pre {
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
background: #1d2e45;
|
||
color: #e8efff;
|
||
}
|
||
|
||
.page-wrap {
|
||
width: min(1080px, calc(100% - 2rem));
|
||
margin-inline: auto;
|
||
}
|
||
|
||
.display-title {
|
||
font-family: 'Fraunces', Georgia, serif;
|
||
}
|
||
|
||
.island-shell {
|
||
border: 1px solid var(--line);
|
||
background: linear-gradient(165deg, var(--surface-strong), var(--surface));
|
||
box-shadow:
|
||
0 1px 0 var(--inset-glint) inset,
|
||
0 22px 44px rgba(30, 90, 72, 0.1),
|
||
0 6px 18px rgba(23, 58, 64, 0.08);
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.feature-card {
|
||
background: linear-gradient(165deg, color-mix(in oklab, var(--surface-strong) 93%, white 7%), var(--surface));
|
||
box-shadow:
|
||
0 1px 0 var(--inset-glint) inset,
|
||
0 18px 34px rgba(30, 90, 72, 0.1),
|
||
0 4px 14px rgba(23, 58, 64, 0.06);
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-2px);
|
||
border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line));
|
||
}
|
||
|
||
button,
|
||
.island-shell,
|
||
a {
|
||
transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,
|
||
transform 180ms ease;
|
||
}
|
||
|
||
.island-kicker {
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
font-weight: 700;
|
||
font-size: 0.69rem;
|
||
color: var(--kicker);
|
||
}
|
||
|
||
.nav-link {
|
||
position: relative;
|
||
text-decoration: none;
|
||
color: var(--sea-ink-soft);
|
||
}
|
||
|
||
.nav-link::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: -8px;
|
||
width: 100%;
|
||
height: 2px;
|
||
transform: scaleX(0);
|
||
transform-origin: left;
|
||
background: linear-gradient(90deg, var(--lagoon), #7ed3bf);
|
||
transition: transform 170ms ease;
|
||
}
|
||
|
||
.nav-link:hover,
|
||
.nav-link.is-active {
|
||
color: var(--sea-ink);
|
||
}
|
||
|
||
.nav-link:hover::after,
|
||
.nav-link.is-active::after {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.nav-link:focus-visible {
|
||
outline: 2px solid var(--lagoon-deep);
|
||
outline-offset: 4px;
|
||
border-radius: 6px;
|
||
color: var(--sea-ink);
|
||
}
|
||
|
||
.rise-in {
|
||
animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
||
}
|
||
|
||
@keyframes rise-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(12px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.hero-image-in {
|
||
animation: hero-image-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
||
animation-delay: 200ms;
|
||
}
|
||
|
||
@keyframes hero-image-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(24px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.rise-in,
|
||
.hero-image-in {
|
||
animation-duration: 0.01ms;
|
||
animation-delay: 0ms;
|
||
}
|
||
}
|
||
|
||
.site-footer {
|
||
border-top: 1px solid var(--line);
|
||
background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%);
|
||
}
|
||
|
||
/* Accent-Variante: farbstarker Call-to-Action-Button. */
|
||
button[data-type='accent'],
|
||
a[data-type='accent'] {
|
||
background: linear-gradient(135deg, var(--lagoon), var(--palm));
|
||
color: white;
|
||
border-color: transparent;
|
||
box-shadow:
|
||
0 1px 0 var(--inset-glint) inset,
|
||
0 12px 24px rgba(30, 90, 72, 0.22);
|
||
}
|
||
|
||
button[data-type='accent']:hover,
|
||
a[data-type='accent']:hover {
|
||
background: linear-gradient(135deg, var(--lagoon-deep), var(--palm));
|
||
color: white;
|
||
}
|
||
|
||
/* Bilder sollen ihr Alignment behalten, ohne die Layoutbreite zu sprengen. */
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
@layer base {
|
||
* {
|
||
@apply border-border outline-ring/50;
|
||
}
|
||
body {
|
||
background-color: var(--background);
|
||
color: var(--foreground);
|
||
@apply bg-background text-foreground;
|
||
}
|
||
html {
|
||
@apply font-sans;
|
||
}
|
||
}
|
||
|
||
/* Theme Toggle */
|
||
.theme-toggle {
|
||
display: none;
|
||
}
|
||
.theme-toggle__label {
|
||
/* Groesse ueber diese zwei Variablen steuern -- alles andere wird berechnet.
|
||
Overriden per Style-Attribut, Elternklasse, oder Utility (--tta-size: ...). */
|
||
--tta-size: 2em; /* Hoehe des Switches — ggf. an euren size(10)-Wert anpassen */
|
||
--tta-ratio: 2; /* Breite = Hoehe × Ratio (2 = Pill 2:1) */
|
||
|
||
/* Abgeleitete Werte -- nicht ueberschreiben. */
|
||
--tta-width: calc(var(--tta-size) * var(--tta-ratio));
|
||
--tta-pad: calc(var(--tta-size) * 0.1);
|
||
--tta-knob: calc(var(--tta-size) - var(--tta-pad) * 2);
|
||
--tta-icon: calc(var(--tta-size) * 0.6);
|
||
--tta-travel: calc(var(--tta-width) - var(--tta-knob) - var(--tta-pad) * 2);
|
||
|
||
width: var(--tta-width);
|
||
height: var(--tta-size);
|
||
position: relative;
|
||
display: block;
|
||
background: white;
|
||
border-radius: var(--tta-size);
|
||
box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.4),
|
||
inset 0 -5px 15px rgba(0, 0, 0, 0.4);
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.theme-toggle__label::after {
|
||
content: '';
|
||
width: var(--tta-knob);
|
||
height: var(--tta-knob);
|
||
position: absolute;
|
||
top: var(--tta-pad);
|
||
left: var(--tta-pad);
|
||
background: linear-gradient(180deg, #ffcc89, #d8860b);
|
||
border-radius: var(--tta-knob);
|
||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.theme-toggle__label svg {
|
||
position: absolute;
|
||
width: var(--tta-icon);
|
||
top: calc((var(--tta-size) - var(--tta-icon)) / 2);
|
||
z-index: 1;
|
||
}
|
||
|
||
/* Icon-Positionierung symmetrisch: mittig im jeweiligen "Knubbel-Slot". */
|
||
.theme-toggle__sun {
|
||
left: calc(var(--tta-pad) + (var(--tta-knob) - var(--tta-icon)) / 2);
|
||
fill: gold;
|
||
transition: fill 0.3s ease;
|
||
}
|
||
|
||
.theme-toggle__moon {
|
||
right: calc(var(--tta-pad) + (var(--tta-knob) - var(--tta-icon)) / 2);
|
||
fill: dimgray;
|
||
transition: fill 0.3s ease;
|
||
}
|
||
|
||
.theme-toggle:checked + .theme-toggle__label {
|
||
background: #242424;
|
||
}
|
||
|
||
.theme-toggle:checked + .theme-toggle__label::after {
|
||
transform: translateX(var(--tta-travel));
|
||
background: linear-gradient(180deg, #777, #3a3a3a);
|
||
}
|
||
|
||
.theme-toggle:checked + .theme-toggle__label .theme-toggle__sun {
|
||
fill: dimgray;
|
||
}
|
||
|
||
.theme-toggle:checked + .theme-toggle__label .theme-toggle__moon {
|
||
fill: deepskyblue;
|
||
} |