Add global CSS with TigerGraph\u00d7Claude fused design system

web/src/app/globals.css

@@ -0,0 +1,388 @@
+@import "tailwindcss";
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+/* ═══════════════════════════════════════════════════════════
+   TigerGraph × Claude — Fused Design System
+   Canvas: warm cream · Primary: tiger orange · Accent: coral
+   Text: navy · Dark surfaces: claude dark · Serif display
+   ═══════════════════════════════════════════════════════════ */
+
+@theme {
+  --color-canvas: #faf9f5;
+  --color-surface-soft: #f5f0e8;
+  --color-surface-card: #efe9de;
+  --color-surface-cream-strong: #e8e0d2;
+  --color-surface-dark: #181715;
+  --color-surface-dark-elev: #252320;
+  --color-surface-dark-soft: #1f1e1b;
+
+  --color-tiger-orange: #FF6B00;
+  --color-tiger-orange-hover: #E55F00;
+  --color-tiger-orange-light: #FFF4EB;
+  --color-tiger-navy: #002B49;
+  --color-tiger-navy-light: #003D6B;
+  --color-electric-blue: #0072CE;
+  --color-electric-blue-light: #E6F4FF;
+
+  --color-coral: #cc785c;
+  --color-coral-active: #a9583e;
+  --color-accent-teal: #5db8a6;
+  --color-accent-amber: #e8a55a;
+
+  --color-ink: #141413;
+  --color-body-strong: #252523;
+  --color-body: #3d3d3a;
+  --color-muted: #6c6a64;
+  --color-muted-soft: #8e8b82;
+  --color-on-primary: #ffffff;
+  --color-on-dark: #faf9f5;
+  --color-on-dark-soft: #a09d96;
+
+  --color-hairline: #e6dfd8;
+  --color-hairline-soft: #ebe6df;
+
+  --color-success: #5db872;
+  --color-warning: #d4a017;
+  --color-error: #c64545;
+
+  --font-serif: 'Cormorant Garamond', 'EB Garamond', 'Times New Roman', serif;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+}
+
+/* ── Base Reset ──────────────────────────────────────── */
+* { box-sizing: border-box; }
+
+html {
+  font-family: var(--font-sans);
+  color: var(--color-body);
+  background: var(--color-canvas);
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--color-canvas);
+}
+
+/* ── Typography — Serif Display + Sans Body ──────────── */
+.display-xl {
+  font-family: var(--font-serif);
+  font-size: clamp(2.5rem, 5vw, 4rem);
+  font-weight: 400;
+  line-height: 1.05;
+  letter-spacing: -1.5px;
+  color: var(--color-ink);
+}
+
+.display-lg {
+  font-family: var(--font-serif);
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 400;
+  line-height: 1.1;
+  letter-spacing: -1px;
+  color: var(--color-ink);
+}
+
+.display-md {
+  font-family: var(--font-serif);
+  font-size: clamp(1.5rem, 3vw, 2.25rem);
+  font-weight: 400;
+  line-height: 1.15;
+  letter-spacing: -0.5px;
+  color: var(--color-ink);
+}
+
+.display-sm {
+  font-family: var(--font-serif);
+  font-size: clamp(1.25rem, 2vw, 1.75rem);
+  font-weight: 400;
+  line-height: 1.2;
+  letter-spacing: -0.3px;
+  color: var(--color-ink);
+}
+
+.title-lg { font-size: 1.375rem; font-weight: 500; line-height: 1.3; color: var(--color-ink); }
+.title-md { font-size: 1.125rem; font-weight: 500; line-height: 1.4; color: var(--color-ink); }
+.title-sm { font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--color-ink); }
+.body-md { font-size: 1rem; font-weight: 400; line-height: 1.55; color: var(--color-body); }
+.body-sm { font-size: 0.875rem; font-weight: 400; line-height: 1.55; color: var(--color-body); }
+.caption { font-size: 0.8125rem; font-weight: 500; line-height: 1.4; color: var(--color-muted); }
+.caption-uppercase {
+  font-size: 0.75rem; font-weight: 500; line-height: 1.4;
+  letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-muted);
+}
+.code-text { font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.6; }
+
+/* ── Buttons ─────────────────────────────────────────── */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500;
+  padding: 10px 20px; height: 40px; border-radius: 8px;
+  border: none; cursor: pointer; transition: all 0.15s ease;
+  text-decoration: none; white-space: nowrap;
+}
+
+.btn-primary {
+  background: var(--color-tiger-orange); color: var(--color-on-primary);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
+}
+.btn-primary:hover { background: var(--color-tiger-orange-hover); }
+.btn-primary:active { background: #CC5500; transform: translateY(1px); }
+.btn-primary:disabled { background: var(--color-surface-cream-strong); color: var(--color-muted); cursor: default; }
+
+.btn-secondary {
+  background: var(--color-canvas); color: var(--color-ink);
+  border: 1px solid var(--color-hairline);
+}
+.btn-secondary:hover { background: var(--color-surface-soft); border-color: var(--color-muted-soft); }
+
+.btn-coral {
+  background: var(--color-coral); color: var(--color-on-primary);
+}
+.btn-coral:hover { background: var(--color-coral-active); }
+
+.btn-ghost {
+  background: transparent; color: var(--color-muted); padding: 8px 12px; height: auto;
+}
+.btn-ghost:hover { color: var(--color-ink); background: var(--color-surface-soft); }
+
+.btn-on-dark {
+  background: var(--color-surface-dark-elev); color: var(--color-on-dark);
+  border: 1px solid rgba(255,255,255,0.1);
+}
+.btn-on-dark:hover { background: var(--color-surface-dark-soft); }
+
+.btn-lg { height: 48px; padding: 12px 28px; font-size: 1rem; border-radius: 10px; }
+.btn-sm { height: 32px; padding: 6px 14px; font-size: 0.8125rem; border-radius: 6px; }
+.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
+
+/* ── Cards ───────────────────────────────────────────── */
+.card {
+  background: var(--color-canvas);
+  border: 1px solid var(--color-hairline);
+  border-radius: 12px;
+  padding: 32px;
+}
+
+.card-cream {
+  background: var(--color-surface-card);
+  border: none;
+  border-radius: 12px;
+  padding: 32px;
+}
+
+.card-dark {
+  background: var(--color-surface-dark);
+  border: none;
+  border-radius: 12px;
+  padding: 32px;
+  color: var(--color-on-dark);
+}
+
+.card-dark-elevated {
+  background: var(--color-surface-dark-elev);
+  border-radius: 12px;
+  padding: 24px;
+  color: var(--color-on-dark);
+}
+
+.card-coral {
+  background: var(--color-tiger-orange);
+  border: none;
+  border-radius: 12px;
+  padding: 48px;
+  color: var(--color-on-primary);
+}
+
+.card-coral .display-sm,
+.card-coral .display-md { color: var(--color-on-primary); }
+
+.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
+.card-hover:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 32px rgba(0, 43, 73, 0.08);
+}
+
+/* ── Pipeline Comparison Cards ───────────────────────── */
+.pipeline-baseline {
+  border-left: 4px solid var(--color-electric-blue);
+}
+.pipeline-graphrag {
+  border-left: 4px solid var(--color-tiger-orange);
+}
+
+/* ── Badges ──────────────────────────────────────────── */
+.badge {
+  display: inline-flex; align-items: center;
+  padding: 4px 12px; border-radius: 9999px;
+  font-size: 0.8125rem; font-weight: 500;
+}
+.badge-cream { background: var(--color-surface-card); color: var(--color-ink); }
+.badge-orange { background: var(--color-tiger-orange); color: white; }
+.badge-coral { background: var(--color-coral); color: white; }
+.badge-blue { background: var(--color-electric-blue); color: white; }
+.badge-success { background: var(--color-success); color: white; }
+.badge-outline {
+  background: transparent; border: 1px solid var(--color-hairline); color: var(--color-muted);
+}
+
+/* ── Inputs ──────────────────────────────────────────── */
+.input {
+  width: 100%; height: 40px; padding: 10px 14px;
+  background: var(--color-canvas); color: var(--color-ink);
+  border: 1px solid var(--color-hairline); border-radius: 8px;
+  font-family: var(--font-sans); font-size: 1rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.input:focus {
+  outline: none; border-color: var(--color-tiger-orange);
+  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
+}
+.input::placeholder { color: var(--color-muted-soft); }
+
+.textarea { min-height: 100px; resize: vertical; }
+
+/* ── Tabs ────────────────────────────────────────────── */
+.tab-bar {
+  display: flex; gap: 4px; padding: 4px;
+  background: var(--color-surface-soft);
+  border-radius: 10px; overflow-x: auto;
+}
+.tab-item {
+  padding: 8px 16px; border-radius: 8px;
+  font-size: 0.875rem; font-weight: 500;
+  color: var(--color-muted); cursor: pointer;
+  transition: all 0.15s ease; white-space: nowrap;
+  border: none; background: transparent;
+}
+.tab-item:hover { color: var(--color-ink); background: var(--color-canvas); }
+.tab-item-active {
+  color: var(--color-ink); background: var(--color-canvas);
+  box-shadow: 0 1px 3px rgba(0, 43, 73, 0.08);
+}
+
+/* ── Metric Display ──────────────────────────────────── */
+.metric-value {
+  font-family: var(--font-mono);
+  font-size: 2rem; font-weight: 500;
+  color: var(--color-ink);
+  line-height: 1.1;
+}
+.metric-value-sm { font-size: 1.5rem; }
+.metric-label { font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); margin-top: 4px; }
+.metric-delta-positive { color: var(--color-success); font-size: 0.8125rem; font-weight: 500; }
+.metric-delta-negative { color: var(--color-error); font-size: 0.8125rem; font-weight: 500; }
+
+/* ── Code Window ─────────────────────────────────────── */
+.code-window {
+  background: var(--color-surface-dark);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.code-window-header {
+  display: flex; align-items: center; gap: 8px;
+  padding: 12px 16px;
+  background: var(--color-surface-dark-elev);
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+.code-window-dot {
+  width: 12px; height: 12px; border-radius: 50%;
+}
+.code-window-dot-red { background: #ff5f57; }
+.code-window-dot-yellow { background: #febc2e; }
+.code-window-dot-green { background: #28c840; }
+.code-window-body {
+  padding: 20px;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: var(--color-on-dark);
+  overflow-x: auto;
+}
+
+/* ── Navbar ──────────────────────────────────────────── */
+.navbar {
+  position: sticky; top: 0; z-index: 50;
+  display: flex; align-items: center; justify-content: space-between;
+  height: 64px; padding: 0 32px;
+  background: var(--color-canvas);
+  border-bottom: 1px solid var(--color-hairline-soft);
+  backdrop-filter: blur(12px);
+  background: rgba(250, 249, 245, 0.92);
+}
+
+/* ── Section Rhythm ──────────────────────────────────── */
+.section { padding: 96px 0; }
+.section-sm { padding: 48px 0; }
+.container {
+  width: 100%; max-width: 1200px;
+  margin: 0 auto; padding: 0 24px;
+}
+
+/* ── Graph Visualization ─────────────────────────────── */
+.graph-node {
+  transition: transform 0.2s ease;
+}
+.graph-node:hover {
+  transform: scale(1.15);
+  filter: drop-shadow(0 0 8px rgba(255, 107, 0, 0.4));
+}
+.graph-edge {
+  stroke: var(--color-muted-soft);
+  stroke-width: 1.5;
+  transition: stroke 0.2s ease;
+}
+
+/* ── Loading Skeleton ────────────────────────────────── */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+.skeleton {
+  background: linear-gradient(90deg, var(--color-surface-soft) 25%, var(--color-surface-card) 50%, var(--color-surface-soft) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: 8px;
+}
+
+/* ── Tooltip ─────────────────────────────────────────── */
+.custom-tooltip {
+  background: var(--color-canvas) !important;
+  border: 1px solid var(--color-hairline) !important;
+  border-radius: 8px !important;
+  padding: 12px !important;
+  box-shadow: 0 4px 16px rgba(0, 43, 73, 0.08) !important;
+}
+
+/* ── Responsive ──────────────────────────────────────── */
+@media (max-width: 768px) {
+  .section { padding: 48px 0; }
+  .container { padding: 0 16px; }
+  .card, .card-cream, .card-dark { padding: 20px; }
+  .navbar { padding: 0 16px; height: 56px; }
+  .display-xl { letter-spacing: -0.5px; }
+}
+
+/* ── Scrollbar ───────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--color-hairline); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--color-muted-soft); }
+
+/* ── Selection ───────────────────────────────────────── */
+::selection { background: rgba(255, 107, 0, 0.15); color: var(--color-ink); }
+
+/* ── Prose for markdown-like rendering ───────────────── */
+.prose h1, .prose h2, .prose h3 { font-family: var(--font-serif); font-weight: 400; }
+.prose h1 { font-size: 2rem; letter-spacing: -0.5px; }
+.prose h2 { font-size: 1.5rem; letter-spacing: -0.3px; }
+.prose p { line-height: 1.7; color: var(--color-body); }
+.prose code {
+  font-family: var(--font-mono); font-size: 0.875em;
+  background: var(--color-surface-soft); padding: 2px 6px; border-radius: 4px;
+}
+.prose strong { color: var(--color-ink); font-weight: 600; }