JordanJPatt/vibecoding1

1/* VibeCoding1 - Modern Development Theme */2 3/* CSS Custom Properties for Dynamic Theming */4:root {5  --primary-color: #3b82f6; /* Blue-500 */6  --secondary-color: #8b5cf6; /* Purple-500 */7  --accent-color: #06b6d4; /* Cyan-500 */8  --bg-primary: #ffffff;9  --bg-secondary: #f8fafc;10  --text-primary: #1f2937;11  --text-secondary: #6b7280;12  --border-color: #e5e7eb;13  --shadow-color: rgba(0, 0, 0, 0.1);14}15 16/* Dark Mode Variables */17[data-theme="dark"] {18  --bg-primary: #111827;19  --bg-secondary: #1f2937;20  --text-primary: #f9fafb;21  --text-secondary: #d1d5db;22  --border-color: #374151;23  --shadow-color: rgba(0, 0, 0, 0.3);24}25 26/* Base Styles */27* {28  margin: 0;29  padding: 0;30  box-sizing: border-box;31}32 33html {34  scroll-behavior: smooth;35}36 37body {38  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;39  line-height: 1.6;40  color: var(--text-primary);41  background-color: var(--bg-secondary);42  transition: all 0.3s ease;43}44 45/* Custom Scrollbar */46::-webkit-scrollbar {47  width: 8px;48}49 50::-webkit-scrollbar-track {51  background: var(--bg-secondary);52}53 54::-webkit-scrollbar-thumb {55  background: var(--border-color);56  border-radius: 4px;57}58 59::-webkit-scrollbar-thumb:hover {60  background: var(--text-secondary);61}62 63/* Utility Classes */64.gradient-text {65  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));66  -webkit-background-clip: text;67  -webkit-text-fill-color: transparent;68  background-clip: text;69}70 71.glass-effect {72  backdrop-filter: blur(10px);73  background: rgba(255, 255, 255, 0.1);74  border: 1px solid rgba(255, 255, 255, 0.2);75}76 77.dark .glass-effect {78  background: rgba(0, 0, 0, 0.2);79  border: 1px solid rgba(255, 255, 255, 0.1);80}81 82/* Animation Classes */83@keyframes fadeInUp {84  from {85    opacity: 0;86    transform: translateY(30px);87  }88  to {89    opacity: 1;90    transform: translateY(0);91  }92}93 94.fade-in-up {95  animation: fadeInUp 0.6s ease-out;96}97 98@keyframes pulse {99  0%, 100% {100    transform: scale(1);101  }102  50% {103    transform: scale(1.05);104  }105}106 107.pulse-hover:hover {108  animation: pulse 0.3s ease-in-out;109}110 111/* Loading Animation */112.loading-dots {113  display: inline-block;114}115 116.loading-dots::after {117  content: '';118  animation: loading 1.5s infinite;119}120 121@keyframes loading {122  0% { content: ''; }123  25% { content: '.'; }124  50% { content: '..'; }125  75% { content: '...'; }126  100% { content: ''; }127}128 129/* Custom Button Styles */130.btn-primary {131  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));132  color: white;133  border: none;134  padding: 12px 24px;135  border-radius: 8px;136  font-weight: 600;137  cursor: pointer;138  transition: all 0.3s ease;139  box-shadow: 0 4px 14px var(--shadow-color);140}141 142.btn-primary:hover {143  transform: translateY(-2px);144  box-shadow: 0 6px 20px var(--shadow-color);145}146 147.btn-secondary {148  background: transparent;149  color: var(--text-primary);150  border: 2px solid var(--border-color);151  padding: 10px 22px;152  border-radius: 8px;153  font-weight: 600;154  cursor: pointer;155  transition: all 0.3s ease;156}157 158.btn-secondary:hover {159  background: var(--bg-primary);160  border-color: var(--primary-color);161}162 163/* Card Styles */164.card {165  background: var(--bg-primary);166  border-radius: 12px;167  padding: 24px;168  box-shadow: 0 4px 6px var(--shadow-color);169  border: 1px solid var(--border-color);170  transition: all 0.3s ease;171}172 173.card:hover {174  transform: translateY(-4px);175  box-shadow: 0 8px 25px var(--shadow-color);176}177 178/* Code Block Styling */179.code-block {180  background: #1a1a1a;181  border-radius: 8px;182  padding: 20px;183  overflow-x: auto;184  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;185  font-size: 14px;186  line-height: 1.5;187  position: relative;188}189 190.code-block::before {191  content: '';192  position: absolute;193  top: 0;194  left: 0;195  right: 0;196  height: 30px;197  background: #2a2a2a;198  border-radius: 8px 8px 0 0;199}200 201/* Responsive Design */202@media (max-width: 768px) {203  .card {204    padding: 16px;205  }206  207  .btn-primary,208  .btn-secondary {209    padding: 10px 20px;210    font-size: 14px;211  }212}213 214/* Focus States */215*:focus {216  outline: 2px solid var(--primary-color);217  outline-offset: 2px;218}219 220/* Selection Styling */221::selection {222  background: var(--primary-color);223  color: white;224}225 226/* Print Styles */227@media print {228  .no-print {229    display: none !important;230  }231}