dgx-spark-playbooks/nvidia/txt2kg/assets/frontend/styles/nvidia-build-typography.css

/* Typography Hierarchy - NVIDIA Build Style */
.nvidia-build-h1 {
  font-family: 'Inter', 'system-ui', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

.nvidia-build-h2 {
  font-family: 'Inter', 'system-ui', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
}

.nvidia-build-h3 {
  font-family: 'Inter', 'system-ui', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: hsl(var(--foreground));
}

.nvidia-build-body {
  font-family: 'Inter', 'system-ui', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: hsl(var(--foreground));
}

.nvidia-build-body-large {
  font-family: 'Inter', 'system-ui', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  color: hsl(var(--muted-foreground));
}

.nvidia-build-caption {
  font-family: 'Inter', 'system-ui', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.nvidia-build-button {
  font-family: 'Inter', 'system-ui', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: none;
}

/* NVIDIA Build Color Patterns */
.nvidia-build-accent {
  color: hsl(var(--nvidia-green));
}

.nvidia-build-gradient-text {
  background: linear-gradient(135deg, hsl(var(--nvidia-green)), hsl(var(--nvidia-green-light)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Modern Card Styling - NVIDIA Build Pattern */
.nvidia-build-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 2rem;
  transition: all 0.2s ease;
}

.nvidia-build-card:hover {
  border-color: hsl(var(--nvidia-green) / 0.3);
  box-shadow: 0 8px 32px hsl(var(--nvidia-green) / 0.1);
  transform: translateY(-2px);
}

/* Navigation and UI Elements */
.nvidia-build-nav {
  font-family: 'Inter', 'system-ui', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.nvidia-build-tag {
  font-family: 'Inter', 'system-ui', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  background: hsl(var(--nvidia-green) / 0.1);
  color: hsl(var(--nvidia-green));
  border-radius: 9999px;
}

/* Code and Technical Text */
.nvidia-build-code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.875rem;
  font-weight: 400;
  background: hsl(var(--muted));
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

/* Responsive Typography Adjustments */
@media (max-width: 768px) {
  .nvidia-build-h1 {
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: 1.2;
  }
  
  .nvidia-build-h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.3;
  }
  
  .nvidia-build-body-large {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* Enhanced Tab Navigation Styles */
.nvidia-build-tabs {
  @apply inline-flex items-center justify-center rounded-xl bg-muted/20 border border-border/15 p-2 shadow-sm backdrop-blur-sm;
  width: fit-content;
  margin: 0 auto;
}

.nvidia-build-tab {
  @apply inline-flex items-center justify-center gap-3 whitespace-nowrap rounded-lg px-4 py-3 text-sm font-medium transition-all duration-200 hover:bg-background/60;
}

.nvidia-build-tab-active {
  @apply bg-background text-foreground shadow-sm border border-border/20;
  background: linear-gradient(135deg, hsl(var(--background)) 0%, hsl(var(--background) / 0.95) 100%);
}

.nvidia-build-tab-active .nvidia-build-tab-icon {
  @apply scale-105;
}

.nvidia-build-tab-icon {
  @apply w-5 h-5 rounded-md bg-nvidia-green/15 flex items-center justify-center transition-transform duration-200;
}

/* Dark Mode Optimizations */
@media (prefers-color-scheme: dark) {
  .nvidia-build-card {
    background: hsl(var(--card) / 0.8);
    backdrop-filter: blur(12px);
  }
  
  .nvidia-build-card:hover {
    background: hsl(var(--card) / 0.9);
  }
  
  .nvidia-build-tabs {
    @apply bg-muted/15 border-border/10;
    backdrop-filter: blur(16px);
  }
  
  .nvidia-build-tab-active {
    background: linear-gradient(135deg, hsl(var(--background) / 0.9) 0%, hsl(var(--background) / 0.8) 100%);
    @apply border-border/30;
  }
}