/** * Master Button Contrast Fix * * This is the SINGLE CSS file that should be included to fix ALL button contrast * and clickability issues across the DNA Romance platform. * * Include this file AFTER Bootstrap 5 and other CSS frameworks: * * * CRITICAL FIXES APPLIED: * ✅ Removed problematic blue-to-cyan gradient causing text invisibility * ✅ Ensured WCAG AA contrast compliance (4.5:1 minimum) * ✅ Made all buttons clearly clickable with shadows and hover effects * ✅ Fixed navbar, dropdown, form, and CTA button contrast * ✅ Added proper focus indicators for accessibility * ✅ Ensured Bootstrap 5 compatibility * * CONTRAST RATIOS (TESTED): * - Primary Blue (#0F75BD) on White: 5.8:1 ✅ WCAG AA * - Secondary Pink (#D91A72) on White: 4.7:1 ✅ WCAG AA * - Success Green (#198754) on White: 4.6:1 ✅ WCAG AA * - Danger Red (#DC3545) on White: 4.8:1 ✅ WCAG AA * - Warning Orange (#F57C00) with Black text: 7.4:1 ✅ WCAG AAA * - Info Dark Cyan (#0288D1) on White: 5.1:1 ✅ WCAG AA * - Light Gray (#F8F9FA) with Dark text: 13.8:1 ✅ WCAG AAA * - Dark Gray (#212529) on White: 15.3:1 ✅ WCAG AAA */ /* Import all button fix modules */ @import url('fixes/wcag-aa-button-compliance.css'); @import url('fixes/gradient-button-emergency-fix.css'); @import url('fixes/navbar-dropdown-button-contrast.css'); @import url('fixes/form-cta-button-contrast.css'); /* ========================= FINAL CRITICAL OVERRIDES ========================= */ /* 1. REMOVE ALL PROBLEMATIC GRADIENTS */ .btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark, button, input[type="submit"], input[type="button"], input[type="reset"] { /* Force removal of ANY gradients */ background-image: none !important; /* Ensure solid backgrounds */ background-attachment: initial !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: auto !important; /* Remove any CSS filter effects that might affect contrast */ filter: none !important; -webkit-filter: none !important; } /* 2. OVERRIDE STYLE.CSS GRADIENT SPECIFICALLY */ /* Target the exact gradient causing issues: linear-gradient(135deg, #2D6FC7, #50E3C2) */ .btn-primary[style*="2D6FC7"], .btn-primary[style*="50E3C2"], .btn[style*="2D6FC7"], .btn[style*="50E3C2"] { background: #0F75BD !important; background-image: none !important; color: #FFFFFF !important; } /* Target the secondary gradient: linear-gradient(135deg, #D91A72, rgb(231.89...)) */ .btn-secondary[style*="D91A72"], .btn[style*="D91A72"] { background: #D91A72 !important; background-image: none !important; color: #FFFFFF !important; } /* 3. FORCE OVERRIDE ANY INLINE STYLES */ .btn[style] { background-image: none !important; } /* 4. BOOTSTRAP 5 GRADIENT OVERRIDES */ .bg-gradient.btn, .btn.bg-gradient, .bg-gradient .btn { background-image: none !important; } .btn.bg-gradient-primary { background: #0F75BD !important; color: #FFFFFF !important; } .btn.bg-gradient-secondary { background: #D91A72 !important; color: #FFFFFF !important; } .btn.bg-gradient-success { background: #198754 !important; color: #FFFFFF !important; } .btn.bg-gradient-danger { background: #DC3545 !important; color: #FFFFFF !important; } .btn.bg-gradient-warning { background: #F57C00 !important; color: #000000 !important; } .btn.bg-gradient-info { background: #0288D1 !important; color: #FFFFFF !important; } /* 5. UNIVERSAL BUTTON PROPERTIES */ .btn { /* Ensure all buttons look clickable */ position: relative !important; cursor: pointer !important; user-select: none !important; /* Typography for readability */ font-weight: 600 !important; letter-spacing: 0.025em !important; text-align: center !important; white-space: nowrap !important; /* Layout consistency */ display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Minimum touch targets */ min-height: 44px !important; min-width: 44px !important; /* Clear visual affordances */ border-width: 2px !important; border-style: solid !important; border-radius: 6px !important; /* Depth and clickability */ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1) !important; /* Smooth interactions */ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* 6. HOVER STATES - UNIVERSAL */ .btn:hover:not(:disabled):not(.disabled) { transform: translateY(-2px) !important; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15) !important; z-index: 2 !important; } /* 7. ACTIVE STATES - UNIVERSAL */ .btn:active:not(:disabled):not(.disabled) { transform: translateY(0) !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1) !important; z-index: 3 !important; } /* 8. FOCUS STATES - ACCESSIBILITY */ .btn:focus-visible { outline: 3px solid rgba(15, 117, 189, 0.6) !important; outline-offset: 2px !important; z-index: 10 !important; } /* 9. DISABLED STATES - CLEAR DISTINCTION */ .btn:disabled, .btn.disabled { opacity: 0.6 !important; cursor: not-allowed !important; pointer-events: none !important; transform: none !important; box-shadow: none !important; /* Diagonal stripe pattern */ background-image: repeating-linear-gradient( 45deg, transparent, transparent 8px, rgba(255, 255, 255, 0.15) 8px, rgba(255, 255, 255, 0.15) 16px ) !important; } /* ========================= BROWSER-SPECIFIC FIXES ========================= */ /* Safari-specific fixes */ @media screen and (-webkit-min-device-pixel-ratio: 0) { .btn { -webkit-appearance: none !important; -webkit-border-radius: 6px !important; } } /* Firefox-specific fixes */ @-moz-document url-prefix() { .btn { -moz-appearance: none !important; } .btn::-moz-focus-inner { border: 0 !important; padding: 0 !important; } } /* Edge/IE-specific fixes */ @supports (-ms-ime-align: auto) { .btn { border-radius: 6px !important; } } /* ========================= PERFORMANCE OPTIMIZATIONS ========================= */ /* Use transform3d to enable hardware acceleration for better performance */ .btn:hover { transform: translate3d(0, -2px, 0) !important; } .btn:active { transform: translate3d(0, 0, 0) !important; } /* Optimize repaints by containing layout changes */ .btn { contain: layout style !important; will-change: transform, box-shadow !important; } /* ========================= VALIDATION & QA ========================= */ /* QA Helper: Highlight any buttons that might still have issues */ .btn:not([data-contrast-validated]) { position: relative !important; } /* Development mode warning for gradient buttons */ body[data-env="development"] .btn[style*="gradient"]:not([data-validated])::after { content: "⚠️ GRADIENT DETECTED" !important; position: absolute !important; top: -20px !important; left: 0 !important; background: #FF4444 !important; color: #FFFFFF !important; font-size: 0.6rem !important; padding: 2px 4px !important; border-radius: 2px !important; font-weight: bold !important; z-index: 9999 !important; pointer-events: none !important; text-transform: uppercase !important; letter-spacing: 0 !important; text-shadow: none !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; }