@endlessblink/like-i-said-v2/src/index.css

Task Management & Memory for Claude - Track tasks, remember context, and maintain continuity across sessions with 27 powerful tools. Works with Claude Desktop and Claude Code.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
/* Cache bust: 2025-01-17-20:10-task-card-recreation */
@import './styles/themes/theme-reset.css';
@import './styles/themes/fix-theme.css'; /* Provides fallback theme values while JS loads */
@import './styles/themes/theme-improvements.css'; /* Enhanced theme support and visual fixes */
@import './styles/animate.css'; /* Animation utilities */
@import './styles/themes/dropdown-fix.css'; /* Dropdown and theme fixes */
@import './styles/themes/light-theme-fixes.css'; /* Light theme readability improvements */
@import './styles/safe-areas.css'; /* Import safe area handling */

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

/* Enhanced Loading Animations */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes card-hover {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-2px) scale(1.02); }
}

@keyframes glass-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

@keyframes priority-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes memory-card-enter {
  from { 
    opacity: 0; 
    transform: translateY(20px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@layer base {
  :root {
    /* Base Theme Variables - Dynamically Injected by Theme System */
    /* These values will be overridden by the ThemeProvider */
    
    /* Core UI Colors */
    --background: 222 23% 4%;
    --foreground: 210 40% 98%;
    --card: 222 23% 7%;
    --card-foreground: 210 40% 98%;
    --popover: 222 23% 7%;
    --popover-foreground: 210 40% 98%;
    --muted: 220 20% 12%;
    --muted-foreground: 220 15% 75%;
    --border: 220 20% 18%;
    --input: 220 20% 14%;
    --ring: 262 73% 60%;
    --destructive: 0 75% 55%;
    --destructive-foreground: 220 15% 98%;
    --accent: 262 45% 18%;
    --accent-foreground: 220 15% 98%;
    
    /* Primary Color Scale - Dynamically Generated */
    --primary-50: #faf5ff;
    --primary-100: #f3e8ff;
    --primary-200: #e9d5ff;
    --primary-300: #d8b4fe;
    --primary-400: #c084fc;
    --primary-500: #a855f7;
    --primary-600: #9333ea;
    --primary-700: #7c3aed;
    --primary-800: #6b21a8;
    --primary-900: #581c87;
    --primary-950: #3b0764;
    
    /* Secondary Color Scale - Dynamically Generated */
    --secondary-50: #f8fafc;
    --secondary-100: #f1f5f9;
    --secondary-200: #e2e8f0;
    --secondary-300: #cbd5e1;
    --secondary-400: #94a3b8;
    --secondary-500: #64748b;
    --secondary-600: #475569;
    --secondary-700: #334155;
    --secondary-800: #1e293b;
    --secondary-900: #0f172a;
    --secondary-950: #020617;
    
    /* Category Colors - Theme Configurable */
    --category-personal: var(--primary-500);
    --category-work: #10b981;
    --category-code: #ef4444;
    --category-research: #3b82f6;
    
    /* Complexity Level Colors - Theme Configurable */
    --complexity-l1: #10b981;
    --complexity-l2: #3b82f6;
    --complexity-l3: #f59e0b;
    --complexity-l4: #ef4444;
    
    /* Semantic Colors - Theme Configurable */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
    
    /* Glassmorphism Effects - Theme Configurable */
    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(148, 163, 184, 0.15);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    --glass-backdrop: blur(16px);
    
    /* Design System Spacing - Configurable */
    --space-0: 0px;
    --space-px: 1px;
    --space-0\.5: 0.125rem;
    --space-1: 0.25rem;
    --space-1\.5: 0.375rem;
    --space-2: 0.5rem;
    --space-2\.5: 0.625rem;
    --space-3: 0.75rem;
    --space-3\.5: 0.875rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-32: 8rem;
    --space-36: 9rem;
    --space-40: 10rem;
    --space-44: 11rem;
    --space-48: 12rem;
    --space-52: 13rem;
    --space-56: 14rem;
    --space-60: 15rem;
    --space-64: 16rem;
    --space-72: 18rem;
    --space-80: 20rem;
    --space-96: 24rem;
    
    /* Typography Scale - Configurable */
    --text-xs-size: 0.75rem;
    --text-xs-height: 1rem;
    --text-sm-size: 0.875rem;
    --text-sm-height: 1.25rem;
    --text-base-size: 1rem;
    --text-base-height: 1.5rem;
    --text-lg-size: 1.125rem;
    --text-lg-height: 1.75rem;
    --text-xl-size: 1.25rem;
    --text-xl-height: 1.75rem;
    --text-2xl-size: 1.5rem;
    --text-2xl-height: 2rem;
    --text-3xl-size: 1.875rem;
    --text-3xl-height: 2.25rem;
    --text-4xl-size: 2.25rem;
    --text-4xl-height: 2.5rem;
    --text-5xl-size: 3rem;
    --text-5xl-height: 1;
    --text-6xl-size: 3.75rem;
    --text-6xl-height: 1;
    --text-7xl-size: 4.5rem;
    --text-7xl-height: 1;
    --text-8xl-size: 6rem;
    --text-8xl-height: 1;
    --text-9xl-size: 8rem;
    --text-9xl-height: 1;
    
    /* Border Radius Scale - Configurable */
    --radius-none: 0px;
    --radius-sm: 0.125rem;
    --radius: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Animation Durations - Configurable */
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-700: 700ms;
    --duration-1000: 1000ms;
    
    /* Animation Timing Functions - Configurable */
    --timing-linear: linear;
    --timing-in: cubic-bezier(0.4, 0, 1, 1);
    --timing-out: cubic-bezier(0, 0, 0.2, 1);
    --timing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Responsive Breakpoints - For CSS Usage */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    
    /* Component-Specific Variables */
    --nav-height: var(--space-14);
    --nav-height-mobile: var(--space-12);
    
    /* Gradient Variables - Theme Configurable */
    --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    --gradient-secondary: linear-gradient(145deg, var(--secondary-100) 0%, var(--secondary-200) 100%);
    --gradient-accent: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-600) 100%);
    --gradient-card: linear-gradient(145deg, var(--card) 0%, var(--muted) 100%);
    
    /* Shadow System - Theme Configurable */
    --shadow-soft: 0 2px 8px -1px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 16px -2px rgba(0, 0, 0, 0.15);
    --shadow-strong: 0 8px 24px -4px rgba(0, 0, 0, 0.2);
    
    /* Legacy Variables for Backward Compatibility */
    --primary: var(--primary-500);
    --primary-foreground: var(--primary-50);
    --secondary: var(--secondary-500);
    --secondary-foreground: var(--secondary-50);
  }
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography System */
.text-heading-1 {
  @apply text-3xl font-bold tracking-tight;
  line-height: 1.2;
}

.text-heading-2 {
  @apply text-2xl font-semibold tracking-tight;
  line-height: 1.3;
}

.text-heading-3 {
  @apply text-xl font-semibold;
  line-height: 1.4;
}

.text-body-lg {
  @apply text-base font-normal;
  line-height: 1.6;
}

.text-body {
  @apply text-sm font-normal;
  line-height: 1.5;
}

.text-body-sm {
  @apply text-xs font-medium;
  line-height: 1.4;
}

/* Modern Glassmorphism Components */
@layer components {
  /* Professional Card System */
  .card-glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-backdrop);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--elevation-2);
    transition: all var(--transition-normal);
  }
  
  /* Glass effect utility */
  .glass-effect {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-backdrop);
    border-color: var(--glass-border);
  }
  
  .card-glass:hover {
    transform: translateY(-2px);
    border-color: rgba(148, 163, 184, 0.2);
  }
  
  .card-glass:hover:not(.complexity-l4) {
    box-shadow: var(--elevation-3);
  }
  
  .card-glass:focus-within {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
  }
  
  /* Complexity Level System */
  .complexity-l1 { 
    --complexity-color: var(--complexity-l1);
    border-left: 3px solid hsl(var(--complexity-color));
  }
  .complexity-l2 { 
    --complexity-color: var(--complexity-l2);
    border-left: 3px solid hsl(var(--complexity-color));
  }
  .complexity-l3 { 
    --complexity-color: var(--complexity-l3);
    border-left: 3px solid hsl(var(--complexity-color));
  }
  .complexity-l4 { 
    --complexity-color: var(--complexity-l4);
    border-left: 3px solid hsl(var(--complexity-color));
    box-shadow: 0 0 0 1px hsla(var(--complexity-color), 0.2);
  }
  
  .complexity-l4:hover {
    box-shadow: 0 0 0 2px hsla(var(--complexity-color), 0.3), var(--elevation-3);
  }
  
  /* Category Badge System */
  .category-badge {
    padding: var(--space-1) var(--space-3);
    border-radius: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .category-personal { 
    background: hsla(var(--category-personal), 0.15);
    color: hsl(var(--category-personal));
    border: 1px solid hsla(var(--category-personal), 0.3);
  }
  .category-work { 
    background: hsla(var(--category-work), 0.15);
    color: hsl(var(--category-work));
    border: 1px solid hsla(var(--category-work), 0.3);
  }
  .category-code { 
    background: hsla(var(--category-code), 0.15);
    color: hsl(var(--category-code));
    border: 1px solid hsla(var(--category-code), 0.3);
  }
  .category-research { 
    background: hsla(var(--category-research), 0.15);
    color: hsl(var(--category-research));
    border: 1px solid hsla(var(--category-research), 0.3);
  }
  
  /* Professional Typography Scale */
  .text-card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: hsl(var(--foreground));
  }
  
  .text-card-description {
    font-size: var(--text-sm);
    font-weight: 400;
    color: hsl(var(--foreground) / 0.8);
  }
  
  .text-card-meta {
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
    color: hsl(var(--foreground) / 0.6);
  }
  
  /* Interactive Elements */
  .button-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    transition: all var(--transition-fast);
  }
  
  .button-glass:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
  }
  
  /* Spacing System Classes */
  .space-grid {
    gap: var(--space-4);
  }
  
  .space-grid-lg {
    gap: var(--space-6);
  }
  
  .padding-card {
    padding: var(--space-4);
  }
  
  .padding-card-lg {
    padding: var(--space-6);
  }
  
  /* Unified Card Layout - Based on Research Solutions */
  
  /* Card container - Fixed height flex column */
  .card-glass {
    /* Force flex column layout */
    display: flex !important;
    flex-direction: column !important;
    
    /* Base styling */
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    box-sizing: border-box;
    overflow: hidden;
  }
  
  /* Critical: Allow flex children to shrink properly */
  .card-glass > * {
    min-height: 0 !important;
  }
  
  /* Ensure proper flex structure for content */
  .card-glass .flex-shrink-0 {
    flex-shrink: 0 !important;
  }
  
  /* The flex-1 containers should grow/shrink properly */
  .card-glass .flex-1 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  
  /* Elements with margin-top auto */
  .card-glass .mt-auto {
    margin-top: auto !important;
  }
  
  /* Ensure parent containers have proper height */
  .card-glass .h-full {
    height: 100% !important;
  }
  
  /* Images in cards */
  .card-glass img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  /* Grid container adjustments */
  .grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 1rem !important;
  }
  
  /* Ensure consistent card behavior in grid */
  .grid .card-glass {
    width: 100% !important;
  }
}

/* Enhanced scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.4);
  border-radius: 3px;
  transition: all 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.6);
}

/* Enhanced modern card styles with animations */
.card-modern {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: memory-card-enter 0.4s ease-out;
}

.card-modern:hover {
  box-shadow: var(--shadow-medium);
  border-color: hsl(var(--border) / 0.8);
  transform: translateY(-2px) scale(1.01);
}

.card-modern.loading {
  animation: pulse-soft 2s ease-in-out infinite;
}

/* Glass effect for special elements */
.glass-effect {
  background: hsl(var(--card) / 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--border) / 0.5);
}

/* Interactive button styles */
.btn-primary {
  background: var(--gradient-primary);
  border: none;
  color: hsl(var(--primary-foreground));
  font-weight: 600;
  transition: all 0.2s;
  box-shadow: 0 2px 8px hsl(262 73% 60% / 0.3);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px hsl(262 73% 60% / 0.4);
}

.btn-secondary {
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--secondary-foreground));
  font-weight: 500;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: hsl(var(--secondary) / 0.8);
  border-color: hsl(var(--border) / 0.8);
}

/* Status indicators */
.status-success {
  background: hsl(var(--success) / 0.15);
  color: hsl(var(--success));
  border: 1px solid hsl(var(--success) / 0.3);
}

.status-warning {
  background: hsl(var(--warning) / 0.15);
  color: hsl(var(--warning));
  border: 1px solid hsl(var(--warning) / 0.3);
}

.status-info {
  background: hsl(var(--info) / 0.15);
  color: hsl(var(--info));
  border: 1px solid hsl(var(--info) / 0.3);
}

/* Enhanced Animation utilities */
.animate-fade-in {
  animation: fade-in 0.5s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out;
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

.animate-spin-slow {
  animation: spin-slow 3s linear infinite;
}

.animate-memory-enter {
  animation: memory-card-enter 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Enhanced line clamp utilities - Let Tailwind handle these */

/* Focus styles */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 focus:ring-offset-gray-900;
}

/* Improved input styles */
.input-modern {
  background: hsl(var(--input));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 0.8);
  transition: all 0.2s;
  font-weight: 400;
}

.input-modern:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}

/* Modern spacing system */
.space-section { @apply py-6 px-4 md:py-8 md:px-6; }
.space-container { @apply max-w-screen-2xl mx-auto; }
.space-card { @apply p-4 md:p-5; }
.space-compact { @apply p-3 md:p-4; }

/* Navigation utilities */
.nav-height { height: var(--nav-height-mobile); }
@media (min-width: 768px) {
  .nav-height { height: var(--nav-height); }
}

/* Improved button system */
.btn-icon {
  @apply h-8 w-8 p-0 flex items-center justify-center rounded-md transition-all duration-200;
}

.btn-icon-sm {
  @apply h-7 w-7 p-0 flex items-center justify-center rounded-md transition-all duration-200;
}

/* Responsive grid utilities */
.grid-responsive {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4 lg:gap-5;
}

/* Improved text contrast utilities */
.text-primary-contrast { color: hsl(var(--foreground)); }
.text-secondary-contrast { color: hsl(var(--muted-foreground)); }
.text-tertiary-contrast { color: hsl(var(--muted-foreground) / 0.7); }

/* Focus visible improvements */
.focus-visible-ring {
  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900;
}