home/Projects/kompose/docs/assets/css/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply scroll-smooth;
  }

  body {
    @apply bg-dark-950 text-gray-100 antialiased;
  }

  /* Typography improvements */
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold tracking-tight;
  }

  h1 {
    @apply text-5xl md:text-6xl lg:text-7xl;
  }

  h2 {
    @apply text-4xl md:text-5xl;
  }

  h3 {
    @apply text-3xl md:text-4xl;
  }
}

@layer components {
  /* Gradient text */
  .gradient-text {
    @apply bg-gradient-to-r from-primary-400 via-accent-400 to-primary-500 bg-clip-text text-transparent;
  }

  .gradient-text-hero {
    @apply bg-gradient-hero bg-clip-text text-transparent animate-gradient-xy;
  }

  /* Glass morphism */
  .glass {
    @apply backdrop-blur-lg bg-white/5 border border-white/10;
  }

  .glass-dark {
    @apply backdrop-blur-lg bg-black/30 border border-white/5;
  }

  /* Glow effects */
  .glow-box {
    @apply shadow-glow-cyber;
  }

  .glow-text {
    @apply animate-glow;
  }

  /* Button styles */
  .btn {
    @apply px-6 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 active:scale-95;
  }

  .btn-primary {
    @apply btn bg-gradient-primary text-white shadow-glow-orange hover:shadow-lg;
  }

  .btn-accent {
    @apply btn bg-gradient-accent text-white shadow-glow-purple hover:shadow-lg;
  }

  .btn-ghost {
    @apply btn border-2 border-primary-500/50 text-primary-400 hover:bg-primary-500/10 hover:border-primary-400;
  }

  /* Card styles */
  .card {
    @apply rounded-xl p-6 transition-all duration-300;
  }

  .card-glass {
    @apply card glass hover:bg-white/10;
  }

  .card-glow {
    @apply card bg-dark-900 border border-primary-500/20 hover:border-primary-500/40 hover:shadow-glow-cyber;
  }

  /* Code block improvements */
  .prose pre {
    @apply relative overflow-hidden;
  }

  .prose pre::before {
    content: '';
    @apply absolute inset-0 bg-gradient-shine opacity-0 hover:opacity-100 transition-opacity duration-500 pointer-events-none;
    animation: shimmer 2s linear infinite;
  }

  /* Link styles */
  .link-fancy {
    @apply relative inline-block text-primary-400 hover:text-primary-300 transition-colors;
  }

  .link-fancy::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-primary transition-all duration-300;
  }

  .link-fancy:hover::after {
    @apply w-full;
  }

  /* Sidebar */
  .sidebar-link {
    @apply block px-4 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-all duration-200;
  }

  .sidebar-link.active {
    @apply text-white bg-gradient-to-r from-primary-500/20 to-accent-500/20 border-l-4 border-primary-500;
  }

  /* Search box */
  .search-box {
    @apply w-full px-4 py-3 bg-dark-900 border border-dark-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all;
  }

  /* Table of contents */
  .toc-link {
    @apply text-sm text-gray-400 hover:text-primary-400 transition-colors py-1 border-l-2 border-dark-700 pl-4 hover:border-primary-500;
  }

  .toc-link.active {
    @apply text-primary-400 border-primary-500;
  }
}

@layer utilities {
  /* Gradient animations */
  .animate-gradient {
    background-size: 200% 200%;
    animation: gradient 8s ease infinite;
  }

  /* Perspective utilities */
  .perspective-1000 {
    perspective: 1000px;
  }

  .transform-style-3d {
    transform-style: preserve-3d;
  }

  /* Shimmer effect */
  .shimmer {
    @apply relative overflow-hidden;
  }

  .shimmer::after {
    content: '';
    @apply absolute inset-0 bg-gradient-shine;
    animation: shimmer 2s infinite;
  }
}

/* Markdown content improvements */
.prose {
  @apply max-w-none;
}

.prose img {
  @apply rounded-lg shadow-lg;
}

.prose table {
  @apply w-full border-collapse;
}

.prose th {
  @apply bg-dark-800 text-primary-400 font-semibold py-3 px-4 text-left border-b-2 border-primary-500/30;
}

.prose td {
  @apply py-3 px-4 border-b border-dark-700;
}

.prose tr:hover {
  @apply bg-white/5;
}

/* Copy button for code blocks */
.copy-button {
  @apply absolute top-2 right-2 p-2 rounded-md bg-dark-800 text-gray-400 hover:text-white hover:bg-dark-700 transition-all opacity-0 group-hover:opacity-100;
}

/* Loading states */
.loading-dots {
  @apply inline-flex space-x-1;
}

.loading-dots span {
  @apply w-2 h-2 bg-primary-500 rounded-full animate-pulse;
  animation-delay: calc(var(--i) * 150ms);
}

/* Hero section decorations */
.hero-decoration {
  @apply absolute pointer-events-none;
}

.hero-blob {
  @apply absolute w-96 h-96 bg-gradient-radial from-primary-500/30 to-transparent rounded-full blur-3xl animate-pulse-slow;
}