Elijah
8ac95df772
All checks were successful
Automated Container Build / build-and-push (push) Successful in 53s
203 lines
6.5 KiB
CSS
203 lines
6.5 KiB
CSS
@import "tailwindcss";
|
|
|
|
@layer base {
|
|
:root {
|
|
--theme-bg-base: #f0f4f2;
|
|
--theme-bg-surface: #ffffff;
|
|
--theme-bg-surface-alt: #f4f7f5;
|
|
--theme-bg-callout: #e8f4f0;
|
|
--theme-primary: #2a7d7d;
|
|
--theme-primary-hover: #1f6363;
|
|
--theme-primary-light: #3a9e9e;
|
|
--theme-text-heading: #1a2f2f;
|
|
--theme-text-body: #2d4a4a;
|
|
--theme-text-secondary: #4a6a6a;
|
|
--theme-text-muted: #7a9a9a;
|
|
--theme-border: #c8d8d0;
|
|
--theme-border-light: #dce8e2;
|
|
--theme-success: #2d8a4e;
|
|
--theme-success-bg: #e8f5ed;
|
|
--theme-error: #c44c4c;
|
|
--theme-error-bg: #fce8e8;
|
|
--theme-badge-bg: #e0eeea;
|
|
--theme-badge-text: #2a6a5a;
|
|
--theme-danger: #dc3545;
|
|
--theme-danger-hover: #c82333;
|
|
|
|
--theme-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
--theme-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
|
|
--theme-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
:root.dark {
|
|
--theme-bg-base: #0f1614;
|
|
--theme-bg-surface: #17221f;
|
|
--theme-bg-surface-alt: #1e2d28;
|
|
--theme-bg-callout: #1a332a;
|
|
--theme-primary: #4ab2b2;
|
|
--theme-primary-hover: #5ec7c7;
|
|
--theme-primary-light: #6cd1d1;
|
|
--theme-text-heading: #e4f0ec;
|
|
--theme-text-body: #c3d9d3;
|
|
--theme-text-secondary: #9cb8b0;
|
|
--theme-text-muted: #6b8a81;
|
|
--theme-border: #38524a;
|
|
--theme-border-light: #253832;
|
|
--theme-success: #4ade80;
|
|
--theme-success-bg: #143621;
|
|
--theme-error: #f87171;
|
|
--theme-error-bg: #3b1c1c;
|
|
--theme-badge-bg: #214035;
|
|
--theme-badge-text: #6fd6b8;
|
|
--theme-danger: #ef4444;
|
|
--theme-danger-hover: #f87171;
|
|
|
|
--theme-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
--theme-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
|
|
--theme-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
}
|
|
|
|
@theme inline {
|
|
/* ── Sage / Teal palette mapped from CSS variables ── */
|
|
--color-bg-base: var(--theme-bg-base);
|
|
--color-bg-surface: var(--theme-bg-surface);
|
|
--color-bg-surface-alt: var(--theme-bg-surface-alt);
|
|
--color-bg-callout: var(--theme-bg-callout);
|
|
--color-primary: var(--theme-primary);
|
|
--color-primary-hover: var(--theme-primary-hover);
|
|
--color-primary-light: var(--theme-primary-light);
|
|
--color-text-heading: var(--theme-text-heading);
|
|
--color-text-body: var(--theme-text-body);
|
|
--color-text-secondary: var(--theme-text-secondary);
|
|
--color-text-muted: var(--theme-text-muted);
|
|
--color-border: var(--theme-border);
|
|
--color-border-light: var(--theme-border-light);
|
|
--color-success: var(--theme-success);
|
|
--color-success-bg: var(--theme-success-bg);
|
|
--color-error: var(--theme-error);
|
|
--color-error-bg: var(--theme-error-bg);
|
|
--color-badge-bg: var(--theme-badge-bg);
|
|
--color-badge-text: var(--theme-badge-text);
|
|
--color-danger: var(--theme-danger);
|
|
--color-danger-hover: var(--theme-danger-hover);
|
|
|
|
/* Typography */
|
|
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
|
|
/* Shadows */
|
|
--shadow-card: var(--theme-shadow-card);
|
|
--shadow-card-hover: var(--theme-shadow-card-hover);
|
|
--shadow-modal: var(--theme-shadow-modal);
|
|
|
|
/* Animations */
|
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
/* ── Base Styles ── */
|
|
body {
|
|
background: var(--color-bg-base);
|
|
color: var(--color-text-body);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* ── Scrollbar Styling ── */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-border);
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-text-muted);
|
|
}
|
|
|
|
/* ── Card flip animation ── */
|
|
.perspective-1000 {
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.preserve-3d {
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.backface-hidden {
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.rotate-y-180 {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.rotate-x-180 {
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
/* ── Swipe animations ── */
|
|
@keyframes swipeLeft {
|
|
0% { transform: translateX(0) rotate(0deg); opacity: 1; }
|
|
100% { transform: translateX(-40px) rotate(-8deg); opacity: 0; }
|
|
}
|
|
|
|
@keyframes swipeRight {
|
|
0% { transform: translateX(0) rotate(0deg); opacity: 1; }
|
|
100% { transform: translateX(40px) rotate(8deg); opacity: 0; }
|
|
}
|
|
|
|
.animate-swipe-left {
|
|
animation: swipeLeft 0.4s var(--ease-spring) forwards;
|
|
}
|
|
|
|
.animate-swipe-right {
|
|
animation: swipeRight 0.4s var(--ease-spring) forwards;
|
|
}
|
|
|
|
/* ── Modal animation ── */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { opacity: 0; transform: translateY(20px) scale(0.98); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.2s ease-out;
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slideUp 0.3s var(--ease-spring);
|
|
}
|
|
|
|
/* ── Subtle pulse for loading states ── */
|
|
@keyframes subtlePulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
|
|
.animate-subtle-pulse {
|
|
animation: subtlePulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* ── Markdown content styles ── */
|
|
.markdown-content h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--color-text-heading); }
|
|
.markdown-content h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text-heading); }
|
|
.markdown-content h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text-heading); }
|
|
.markdown-content p { margin-bottom: 0.75rem; line-height: 1.7; }
|
|
.markdown-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 0.75rem; }
|
|
.markdown-content ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 0.75rem; }
|
|
.markdown-content li { margin-bottom: 0.25rem; line-height: 1.6; }
|
|
.markdown-content strong { font-weight: 600; color: var(--color-text-heading); }
|
|
.markdown-content code { background: var(--color-bg-surface-alt); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; }
|
|
.markdown-content table { border-collapse: collapse; width: 100%; margin-bottom: 0.75rem; }
|
|
.markdown-content th { background: var(--color-bg-surface-alt); font-weight: 600; text-align: left; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border-light); }
|
|
.markdown-content td { padding: 0.5rem 0.75rem; border: 1px solid var(--color-border-light); }
|
|
.markdown-content *:last-child { margin-bottom: 0; }
|