Sebastian Krüger
de0c566c04
All checks were successful
Deploy Theme / deploy (push) Successful in 14s
136 lines
3.5 KiB
CSS
136 lines
3.5 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
@theme {
|
|
/* Brand Palette: Palina Gold (#DDC288) */
|
|
--color-brand-50: #faf8f0;
|
|
--color-brand-100: #f4edd1;
|
|
--color-brand-200: #e9dba4;
|
|
--color-brand-300: #ddc277;
|
|
--color-brand-400: #ddc288;
|
|
--color-brand-500: #c9a765;
|
|
--color-brand-600: #b58d46;
|
|
--color-brand-700: #9c763a;
|
|
--color-brand-800: #7d5e31;
|
|
--color-brand-900: #624a29;
|
|
--color-brand-950: #4c3a23;
|
|
|
|
/* Semantic Theme Variables - Default (Dark) */
|
|
--bg-primary: #121212;
|
|
--bg-secondary: #1e1e1e;
|
|
--bg-tertiary: #2a2a2a;
|
|
--text-primary: #f2f2f2;
|
|
--text-secondary: #a3a3a3;
|
|
--text-tertiary: #737373;
|
|
--brand-primary: var(--color-brand-400);
|
|
--brand-secondary: var(--color-brand-500);
|
|
|
|
/* Gray Palette for standard UI */
|
|
--color-gray-900: #1a1a1a;
|
|
--color-gray-800: #2b2b2b;
|
|
--color-gray-700: #3c3c3c;
|
|
--color-gray-500: #808080;
|
|
--color-gray-400: #a0a0a0;
|
|
--color-gray-200: #e0e0e0;
|
|
--color-gray-100: #f5f5f5;
|
|
|
|
/* Font Families */
|
|
--font-serif: "Playfair Display", serif;
|
|
--font-heading: "Playfair Display", serif;
|
|
--font-sans: "Urbanist", sans-serif;
|
|
|
|
/* Typography (Prose) - Mapping to semantic variables */
|
|
--tw-prose-body: var(--text-primary);
|
|
--tw-prose-headings: var(--brand-primary);
|
|
--tw-prose-links: var(--brand-primary);
|
|
--tw-prose-bold: var(--text-primary);
|
|
--tw-prose-counters: var(--text-secondary);
|
|
--tw-prose-bullets: var(--brand-primary);
|
|
--tw-prose-quotes: var(--text-primary);
|
|
--tw-prose-quote-borders: var(--brand-primary);
|
|
--tw-prose-captions: var(--text-secondary);
|
|
--tw-prose-code: var(--text-primary);
|
|
--tw-prose-pre-code: var(--text-primary);
|
|
--tw-prose-pre-bg: var(--bg-secondary);
|
|
--tw-prose-th-borders: var(--bg-tertiary);
|
|
--tw-prose-td-borders: var(--bg-secondary);
|
|
}
|
|
|
|
/* Light Theme Overrides */
|
|
html[data-theme='light'] {
|
|
--bg-primary: #fdfcf9;
|
|
--bg-secondary: #f4f1e8;
|
|
--bg-tertiary: #e9e4d5;
|
|
--text-primary: #2d2114;
|
|
--text-secondary: #624a29;
|
|
--text-tertiary: #7d5e31;
|
|
}
|
|
|
|
@layer base {
|
|
[x-cloak] { display: none !important; }
|
|
|
|
body {
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-sans);
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-heading);
|
|
color: var(--brand-primary);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* Main navigation styling */
|
|
header nav ul {
|
|
@apply flex items-center space-x-4;
|
|
}
|
|
header nav ul li a {
|
|
@apply text-[var(--text-primary)] hover:text-[var(--brand-primary)] transition-colors duration-200;
|
|
}
|
|
|
|
/* Mobile navigation styling */
|
|
#mobile-menu nav ul {
|
|
@apply flex flex-col items-center space-y-8;
|
|
}
|
|
#mobile-menu nav ul li a {
|
|
@apply text-[var(--text-primary)] text-3xl font-bold hover:text-[var(--brand-primary)] transition-colors duration-200;
|
|
}
|
|
|
|
.prose {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
|
|
font-family: var(--font-heading);
|
|
@apply font-bold tracking-tight;
|
|
}
|
|
|
|
.prose a {
|
|
@apply font-medium no-underline border-b border-[var(--brand-primary)]/30 hover:border-[var(--brand-primary)] transition-all duration-200;
|
|
}
|
|
}
|
|
|
|
.site-logo {
|
|
@apply transition-all duration-300;
|
|
color: var(--brand-primary);
|
|
fill: currentColor;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fadeInUp {
|
|
animation: fadeInUp 0.5s ease-out forwards;
|
|
}
|