/* ============================================================================ CASE STUDIES - DARK MODE FIX ============================================================================ Purpose: Fix dark-on-dark visibility issues and add glow effects Created: 2025-01-26 Issues Fixed: 1. Cards invisible in dark mode (dark background on dark background) 2. Hover shadow not visible - needs glow effect instead ============================================================================ */ /* ============================================================================ CARD BACKGROUNDS - LIGHTER IN DARK MODE ============================================================================ */ /* Make cards lighter than the background in dark mode */ .dark .case-study-card { background: rgba(42, 55, 75, 0.6) !important; border: 1px solid rgba(0, 133, 202, 0.2); backdrop-filter: blur(10px); } /* Slightly lighter background on hover */ .dark .case-study-card:hover { background: rgba(50, 65, 90, 0.8) !important; border-color: rgba(0, 133, 202, 0.4); } /* ============================================================================ GLOW EFFECTS - HOVER STATES ============================================================================ */ /* Light mode - keep shadow */ .case-study-card { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .case-study-card:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Dark mode - use blue glow instead of shadow */ .dark .case-study-card { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 133, 202, 0.1); } .dark .case-study-card:hover { box-shadow: 0 20px 40px -10px rgba(0, 133, 202, 0.3), 0 10px 25px -5px rgba(0, 133, 202, 0.2), 0 0 0 1px rgba(0, 133, 202, 0.3), 0 0 80px -20px rgba(0, 133, 202, 0.4); transform: translateY(-8px); } /* Featured card - blue glow in dark mode (same as other cards) */ .dark .case-study-card.group:hover { box-shadow: 0 20px 40px -10px rgba(0, 133, 202, 0.3), 0 10px 25px -5px rgba(0, 133, 202, 0.2), 0 0 0 1px rgba(0, 133, 202, 0.3), 0 0 80px -20px rgba(0, 133, 202, 0.4); } /* ============================================================================ TEXT VISIBILITY - ENSURE READABLE TEXT ============================================================================ */ /* Ensure headings are visible in dark mode */ .dark .case-study-card h3 { color: #FFFFFF !important; } /* Ensure description text is visible */ .dark .case-study-card p { color: rgba(255, 255, 255, 0.7) !important; } /* Category badges - lighter background in dark mode */ .dark .case-study-card .bg-c21-vibrant-blue\/10 { background: rgba(0, 133, 202, 0.2) !important; } .dark .case-study-card .bg-c21-electric-cyan\/10 { background: rgba(0, 200, 255, 0.2) !important; } .dark .case-study-card .bg-c21-bright-orange\/10 { background: rgba(255, 130, 0, 0.2) !important; } /* ============================================================================ STATS NUMBERS - ENSURE VISIBILITY ============================================================================ */ /* Make stat numbers more vibrant in dark mode */ .dark .case-study-card .text-c21-vibrant-blue { color: #33A5E5 !important; /* Lighter blue for better contrast */ } .dark .case-study-card .text-c21-electric-cyan { color: #00D4FF !important; /* Brighter cyan */ } .dark .case-study-card .text-c21-bright-orange { color: #FFA94D !important; /* Lighter orange */ } /* ============================================================================ GRADIENT OVERLAYS - PRESERVE VISIBILITY ============================================================================ */ /* Ensure gradient card images remain visible */ .dark .case-study-card .bg-gradient-to-br { opacity: 1; } /* Icon backgrounds remain visible */ .dark .case-study-card .bg-white\/20 { background: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.2); } /* ============================================================================ LINK HOVER STATES ============================================================================ */ /* Links should glow on hover in dark mode */ .dark .case-study-card a:hover { text-shadow: 0 0 8px currentColor; } /* ============================================================================ SPECIALIZED SOLUTIONS CARDS - DARK MODE FIX ============================================================================ */ /* Fix cards with dark:bg-c21-dark-bg (same as page background) */ .dark .bg-white.dark\:bg-c21-dark-bg { background: rgba(42, 55, 75, 0.6) !important; border: 1px solid rgba(0, 133, 202, 0.2); backdrop-filter: blur(10px); } /* Glow effect on hover for specialized solution cards */ .dark .bg-white.dark\:bg-c21-dark-bg:hover { background: rgba(50, 65, 90, 0.8) !important; border-color: rgba(0, 133, 202, 0.4); box-shadow: 0 20px 40px -10px rgba(0, 133, 202, 0.3), 0 10px 25px -5px rgba(0, 133, 202, 0.2), 0 0 0 1px rgba(0, 133, 202, 0.3), 0 0 80px -20px rgba(0, 133, 202, 0.4); } /* Ensure headings are visible */ .dark .bg-white.dark\:bg-c21-dark-bg h3 { color: #FFFFFF !important; } /* Ensure text is visible */ .dark .bg-white.dark\:bg-c21-dark-bg p { color: rgba(255, 255, 255, 0.7) !important; } /* Make stat text more vibrant */ .dark .bg-white.dark\:bg-c21-dark-bg .text-c21-vibrant-blue { color: #33A5E5 !important; } /* ============================================================================ RESPONSIVE ADJUSTMENTS ============================================================================ */ @media (max-width: 768px) { /* Reduce glow intensity on mobile for performance */ .dark .case-study-card:hover { box-shadow: 0 20px 40px -10px rgba(0, 133, 202, 0.25), 0 10px 25px -5px rgba(0, 133, 202, 0.15), 0 0 0 1px rgba(0, 133, 202, 0.25); } .dark .bg-white.dark\:bg-c21-dark-bg:hover { box-shadow: 0 20px 40px -10px rgba(0, 133, 202, 0.25), 0 10px 25px -5px rgba(0, 133, 202, 0.15), 0 0 0 1px rgba(0, 133, 202, 0.25); } }