🎨 Complete Brand Transformation:
- Rebranded from 'TCG Vault' to 'Deck Hearth'
- Updated logo initials from 'TCG' to 'DH'
- Changed app name throughout the application
🔥 Fire-Themed Color Palette:
Light Theme (Warm Daylight by the Hearth):
- Primary: Warm cream (#fefcf8) like sunlit stone
- Secondary: Soft beige (#f7f3ed) like aged parchment
- Tertiary: Light wood tone (#f0e6d6)
- Text: Dark chocolate brown (#2d1810)
- Accents: Ember orange, flame orange, golden yellow
Dark Theme (Cozy Evening by the Fire):
- Primary: Deep charcoal (#1a0f0a) like burnt wood
- Secondary: Rich dark brown (#2d1b12) like oak
- Tertiary: Medium brown (#3d2317) like mahogany
- Text: Warm white (#fff8f0) like firelight
- Accents: Bright flame, glowing ember, golden glow
🎨 Fire-Inspired Design Elements:
- Flame gradient: Orange to ember red
- Golden gradient: Golden yellow to flame orange
- Fire glow effects with warm shadows
- Wood-toned borders and accents
- Ember and flame-colored interactive elements
🔧 Enhanced Component Styling:
- Updated BulkSelectionToolbar with fire colors
- New CSS classes: btn-flame, btn-ember, btn-gold
- Fire glow and ember glow effects
- Gradient backgrounds: gradient-bg-fire, gradient-bg-golden
- Tailwind color palette: hearth.flame, hearth.ember, etc.
✨ Warm & Inviting Experience:
- Light mode: Cozy daytime fireplace atmosphere
- Dark mode: Intimate evening hearth ambiance
- Maintains accessibility with proper contrast
- Smooth transitions between themes
The app now perfectly captures the warm, inviting feeling of gathering around a hearth! 🔥🏠✨
🔧 Grid Layout Improvements:
- Fixed excessive right padding (pr-96) that was cutting off cards on smaller screens
- Made right padding responsive: only applies on lg+ screens where side panels are visible
- Improved grid columns: grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5
- Added responsive gap spacing: gap-4 sm:gap-6 lg:gap-8
- Made container padding responsive: p-4 sm:p-6 lg:p-8
📱 Mobile-First Responsive Design:
- Added 'xs' breakpoint (475px) to Tailwind config for better mobile control
- Made header layout stack vertically on mobile with proper spacing
- Responsive text sizing throughout (text-2xl sm:text-3xl)
- Improved button spacing and layout for mobile devices
🎯 Layout Fixes:
- Cards no longer get cut off on mobile/tablet screens
- Side panels properly hidden on screens < 1024px via existing CSS
- Grid adapts properly to available screen space
- Better utilization of screen real estate on all devices
✅ Cross-Device Testing:
- Mobile: Single column layout with proper spacing
- Tablet: 2-3 columns with adequate gaps
- Desktop: 3-4 columns with side panel space reserved
- Large screens: 4-5 columns with full side panel functionality
The cards page now provides an optimal viewing experience across all device sizes! 📱💻🖥️
- Redesigned card display with 2.5:3.5 aspect ratio and image-only view
- Added infinite scroll to replace pagination
- Implemented authentic card back placeholders for MTG, Pokemon, and Lorcana
- Added rarity-based particle effects with tiered intensity (mythic/enchanted/rare/uncommon)
- Enhanced hover details panel with structured card information
- Fixed search functionality with debouncing and Enter key support
- Improved filter system with working TCG, rarity, set, and price filters
- Added favorite system for cards in both hover and detail views
- Updated card detail page with comprehensive metadata and actions
- Fixed API filtering with proper Vercel Postgres implementation
- Added particle animations and rarity glow effects
- Improved overall UX with better visual hierarchy and interactions
- Add PWA configuration (manifest.json, service worker)
- Implement light/dark theme system with purple accents
- Replace desktop navbar with mobile-first bottom navigation
- Redesign auth forms with mobile-optimized UI
- Update Dashboard with gradient cards and touch-friendly actions
- Add safe area support for iOS devices
- Implement theme context with system preference detection
- Optimize touch targets and mobile interactions
- Add offline functionality through service worker
