Initial working commit

2026-06-27 19:19:38 -07:00 · 2026-06-27 19:19:38 -07:00 · b7ce314f01
commit b7ce314f01
parent 666ceb7325
105 changed files with 35510 additions and 11 deletions
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -0,0 +1,141 @@
+@import "tailwindcss";
+
+@theme inline {
+  /* ── Sage / Teal palette from reference image ── */
+  --color-bg-base: #f0f4f2;
+  --color-bg-surface: #ffffff;
+  --color-bg-surface-alt: #f4f7f5;
+  --color-bg-callout: #e8f4f0;
+  --color-primary: #2a7d7d;
+  --color-primary-hover: #1f6363;
+  --color-primary-light: #3a9e9e;
+  --color-text-heading: #1a2f2f;
+  --color-text-body: #2d4a4a;
+  --color-text-secondary: #4a6a6a;
+  --color-text-muted: #7a9a9a;
+  --color-border: #c8d8d0;
+  --color-border-light: #dce8e2;
+  --color-success: #2d8a4e;
+  --color-success-bg: #e8f5ed;
+  --color-error: #c44c4c;
+  --color-error-bg: #fce8e8;
+  --color-badge-bg: #e0eeea;
+  --color-badge-text: #2a6a5a;
+  --color-danger: #dc3545;
+  --color-danger-hover: #c82333;
+
+  /* Typography */
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+
+  /* Shadows */
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);
+
+  /* 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);
+}
+
+/* ── 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; }