NEXUS_AI.pro/pixel-perfect-pixels-main/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

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

/* NEXUS-AI Cyberpunk Neon Design System */

@layer base {
  :root {
    --background: 230 15% 5%;
    --foreground: 180 10% 92%;

    --card: 230 15% 8%;
    --card-foreground: 180 10% 92%;

    --popover: 230 18% 9%;
    --popover-foreground: 180 10% 92%;

    --primary: 170 100% 50%;
    --primary-foreground: 230 15% 5%;

    --secondary: 230 15% 12%;
    --secondary-foreground: 180 10% 85%;

    --muted: 230 12% 14%;
    --muted-foreground: 220 10% 50%;

    --accent: 280 100% 60%;
    --accent-foreground: 180 10% 98%;

    --destructive: 0 85% 55%;
    --destructive-foreground: 0 0% 98%;

    --border: 230 15% 15%;
    --input: 230 12% 12%;
    --ring: 170 100% 50%;

    --radius: 0.5rem;

    /* Cyberpunk tokens */
    --neon-cyan: 170 100% 50%;
    --neon-magenta: 320 100% 60%;
    --neon-purple: 280 100% 60%;
    --neon-green: 120 100% 50%;
    --neon-orange: 30 100% 55%;
    --neon-red: 0 100% 55%;
    --surface-glass: 230 15% 8%;
    --scanline-opacity: 0.03;

    --sidebar-background: 230 18% 6%;
    --sidebar-foreground: 180 10% 80%;
    --sidebar-primary: 170 100% 50%;
    --sidebar-primary-foreground: 230 15% 5%;
    --sidebar-accent: 230 15% 14%;
    --sidebar-accent-foreground: 180 10% 85%;
    --sidebar-border: 230 15% 12%;
    --sidebar-ring: 170 100% 50%;
  }

  .dark {
    --background: 230 15% 5%;
    --foreground: 180 10% 92%;
    --card: 230 15% 8%;
    --card-foreground: 180 10% 92%;
    --popover: 230 18% 9%;
    --popover-foreground: 180 10% 92%;
    --primary: 170 100% 50%;
    --primary-foreground: 230 15% 5%;
    --secondary: 230 15% 12%;
    --secondary-foreground: 180 10% 85%;
    --muted: 230 12% 14%;
    --muted-foreground: 220 10% 50%;
    --accent: 280 100% 60%;
    --accent-foreground: 180 10% 98%;
    --destructive: 0 85% 55%;
    --destructive-foreground: 0 0% 98%;
    --border: 230 15% 15%;
    --input: 230 12% 12%;
    --ring: 170 100% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Inter', system-ui, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', sans-serif;
  }

  code, pre, .font-mono {
    font-family: 'JetBrains Mono', monospace;
  }
}

@layer utilities {
  .glow-cyan {
    box-shadow: 0 0 10px hsl(var(--neon-cyan) / 0.4),
                0 0 30px hsl(var(--neon-cyan) / 0.15),
                0 0 60px hsl(var(--neon-cyan) / 0.05);
  }

  .glow-cyan-strong {
    box-shadow: 0 0 10px hsl(var(--neon-cyan) / 0.6),
                0 0 40px hsl(var(--neon-cyan) / 0.3),
                0 0 80px hsl(var(--neon-cyan) / 0.15),
                inset 0 0 20px hsl(var(--neon-cyan) / 0.05);
  }

  .glow-magenta {
    box-shadow: 0 0 10px hsl(var(--neon-magenta) / 0.4),
                0 0 30px hsl(var(--neon-magenta) / 0.15);
  }

  .glow-purple {
    box-shadow: 0 0 10px hsl(var(--neon-purple) / 0.4),
                0 0 30px hsl(var(--neon-purple) / 0.15);
  }

  .text-glow-cyan {
    text-shadow: 0 0 10px hsl(var(--neon-cyan) / 0.6),
                 0 0 30px hsl(var(--neon-cyan) / 0.3);
  }

  .text-glow-magenta {
    text-shadow: 0 0 10px hsl(var(--neon-magenta) / 0.6),
                 0 0 30px hsl(var(--neon-magenta) / 0.3);
  }

  .text-gradient-cyber {
    background: linear-gradient(135deg, hsl(var(--neon-cyan)), hsl(var(--neon-purple)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .text-gradient-fire {
    background: linear-gradient(135deg, hsl(var(--neon-orange)), hsl(var(--neon-magenta)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .bg-gradient-cyber {
    background: linear-gradient(135deg, hsl(var(--neon-cyan)), hsl(var(--neon-purple)));
  }

  .bg-glass-cyber {
    background: hsl(var(--surface-glass) / 0.6);
    backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid hsl(var(--neon-cyan) / 0.1);
  }

  .border-neon-cyan {
    border-color: hsl(var(--neon-cyan) / 0.3);
  }

  .border-neon-magenta {
    border-color: hsl(var(--neon-magenta) / 0.3);
  }

  /* Scanlines overlay */
  .scanlines::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      hsl(var(--neon-cyan) / var(--scanline-opacity)) 2px,
      hsl(var(--neon-cyan) / var(--scanline-opacity)) 4px
    );
    pointer-events: none;
    z-index: 1;
  }

  /* Pulse glow animations */
  .animate-pulse-cyan {
    animation: pulse-cyan 2s ease-in-out infinite;
  }

  @keyframes pulse-cyan {
    0%, 100% {
      box-shadow: 0 0 10px hsl(var(--neon-cyan) / 0.3);
    }
    50% {
      box-shadow: 0 0 20px hsl(var(--neon-cyan) / 0.6),
                  0 0 40px hsl(var(--neon-cyan) / 0.2);
    }
  }

  .animate-flicker {
    animation: flicker 3s ease-in-out infinite;
  }

  @keyframes flicker {
    0%, 100% { opacity: 1; }
    5% { opacity: 0.85; }
    10% { opacity: 1; }
    50% { opacity: 0.95; }
    55% { opacity: 0.85; }
    60% { opacity: 1; }
  }

  /* Typing indicator */
  .typing-indicator span {
    animation: typing-bounce 1.4s ease-in-out infinite;
  }
  .typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
  }
  .typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
  }

  /* Matrix rain for background */
  .matrix-bg {
    background: 
      radial-gradient(ellipse at 20% 50%, hsl(var(--neon-cyan) / 0.04) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 20%, hsl(var(--neon-purple) / 0.04) 0%, transparent 50%),
      radial-gradient(ellipse at 50% 80%, hsl(var(--neon-magenta) / 0.03) 0%, transparent 50%);
  }

  /* Grid overlay */
  .grid-overlay {
    background-image: 
      linear-gradient(hsl(var(--neon-cyan) / 0.03) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--neon-cyan) / 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  /* Skill card hover effect */
  .skill-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .skill-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px hsl(var(--neon-cyan) / 0.2),
                0 8px 32px hsl(var(--background) / 0.8);
  }

  /* Sidebar item */
  .sidebar-item {
    transition: all 0.2s ease;
  }
  .sidebar-item:hover {
    background: hsl(var(--neon-cyan) / 0.08);
    border-color: hsl(var(--neon-cyan) / 0.2);
  }
  .sidebar-item.active {
    background: hsl(var(--neon-cyan) / 0.12);
    border-color: hsl(var(--neon-cyan) / 0.4);
  }
}