147 lines
3.8 KiB
CSS
147 lines
3.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* -----------------------------------------------------------
|
|
Basis-Typografie & Grundfarben
|
|
----------------------------------------------------------- */
|
|
@layer base {
|
|
:root {
|
|
--color-bg: #f5f1e8;
|
|
--color-bg-soft: #fbf9f4;
|
|
--color-ink: #1c2620;
|
|
--color-moss: #5a6b4f;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-ink);
|
|
font-family: var(--font-figtree), ui-sans-serif, system-ui, sans-serif;
|
|
font-feature-settings: "ss01", "ss02";
|
|
font-size: 1.0625rem; /* 17px base */
|
|
}
|
|
|
|
/* Subtle paper texture — desktop only (fixed bg repaints on mobile scroll) */
|
|
@media (min-width: 768px) {
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
opacity: 0.35;
|
|
background-image: radial-gradient(
|
|
rgba(28, 38, 32, 0.025) 1px,
|
|
transparent 1px
|
|
);
|
|
background-size: 3px 3px;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
font-family: var(--font-fraunces), Georgia, serif;
|
|
font-weight: 400;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
::selection {
|
|
background: #5a6b4f;
|
|
color: #f5f1e8;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid #5a6b4f;
|
|
outline-offset: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
|
|
/* -----------------------------------------------------------
|
|
Utility-Klassen
|
|
----------------------------------------------------------- */
|
|
@layer components {
|
|
.eyebrow {
|
|
@apply text-xs uppercase tracking-[0.22em] text-moss-600 font-medium;
|
|
}
|
|
|
|
.link-underline {
|
|
@apply relative inline-block;
|
|
background-image: linear-gradient(currentColor, currentColor);
|
|
background-position: 0% 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 1px;
|
|
transition: background-size 0.3s ease;
|
|
}
|
|
.link-underline:hover {
|
|
background-size: 0% 1px;
|
|
}
|
|
|
|
.hairline {
|
|
@apply block h-px w-full bg-ink/10;
|
|
}
|
|
|
|
/* Platform external link button */
|
|
.platform-link {
|
|
@apply flex items-center justify-between w-full border border-ink/12 bg-parchment/60 px-4 py-3 rounded-sm text-sm transition-all duration-200;
|
|
}
|
|
.platform-link:hover {
|
|
@apply border-ink/25 bg-parchment;
|
|
}
|
|
}
|
|
|
|
/* -----------------------------------------------------------
|
|
react-day-picker v9 — palette overrides
|
|
----------------------------------------------------------- */
|
|
.rdp-root {
|
|
--rdp-accent-color: #5a6b4f;
|
|
--rdp-accent-background-color: rgba(90, 107, 79, 0.1);
|
|
--rdp-today-color: #5a6b4f;
|
|
--rdp-range_start-date-background-color: #5a6b4f;
|
|
--rdp-range_end-date-background-color: #5a6b4f;
|
|
--rdp-range_middle-background-color: rgba(90, 107, 79, 0.1);
|
|
--rdp-range_start-color: #fbf9f4;
|
|
--rdp-range_end-color: #fbf9f4;
|
|
--rdp-disabled-opacity: 0.45;
|
|
--rdp-day-height: 44px;
|
|
--rdp-day-width: 44px;
|
|
--rdp-day_button-height: 40px;
|
|
--rdp-day_button-width: 40px;
|
|
margin: 0;
|
|
font-family: var(--font-figtree), ui-sans-serif, sans-serif;
|
|
font-size: 0.9rem;
|
|
}
|
|
.rdp-selected .rdp-day_button {
|
|
background-color: #5a6b4f;
|
|
color: #fbf9f4;
|
|
border-color: #5a6b4f;
|
|
}
|
|
.rdp-disabled:not(.rdp-selected) .rdp-day_button {
|
|
text-decoration: line-through;
|
|
color: #a9a391;
|
|
}
|
|
.rdp-caption_label {
|
|
font-family: var(--font-fraunces), Georgia, serif;
|
|
font-weight: 400;
|
|
font-size: 1.1rem;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.rdp-button_previous,
|
|
.rdp-button_next {
|
|
transition: background-color 0.2s ease, opacity 0.2s ease;
|
|
border-radius: 6px;
|
|
}
|
|
.rdp-button_previous:hover,
|
|
.rdp-button_next:hover {
|
|
background-color: rgba(90, 107, 79, 0.1);
|
|
}
|
|
.rdp-day_button:hover:not(:disabled) {
|
|
background-color: rgba(90, 107, 79, 0.08);
|
|
}
|