/** * WHITE BACKGROUND FIX FOR NON-TRANSPARENT IMAGES * * Problem: Many character/mascot images have white backgrounds * Solution: Use CSS filters and blend modes to make white transparent * * Works on: Hero banners, account pages, anywhere with colored backgrounds */ /* ======================================== METHOD 1: Mix Blend Mode (Best for light colored backgrounds) ======================================== */ .character-image-fix, img[alt*="Alfie"], img[alt*="Olive"], img[alt*="Pineapple"], img[alt*="FreshBox Character"] { /* Remove white using multiply blend mode */ mix-blend-mode: multiply; /* Enhance image quality */ filter: brightness(1.05) contrast(1.1) saturate(1.05); /* Add proper shadow */ box-shadow: none !important; /* Remove built-in shadow */ filter: brightness(1.05) contrast(1.1) saturate(1.05) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15)); /* Ensure rendering */ isolation: isolate; background: transparent !important; } /* ======================================== METHOD 2: Darken Blend Mode (Best for dark/colored backgrounds) ======================================== */ .hero-section .character-image-fix, .banner-section .character-image-fix, .gradient-background .character-image-fix, [class*="bg-gradient"] img[alt*="Alfie"], [class*="bg-gradient"] img[alt*="Olive"], [class*="bg-fresh-green"] img[alt*="Alfie"], [class*="bg-purple"] img[alt*="Alfie"] { /* Darken mode works better on colored backgrounds */ mix-blend-mode: darken !important; /* Compensate for darkening */ filter: brightness(1.15) contrast(1.2) saturate(1.1) drop-shadow(0 15px 40px rgba(0, 0, 0, 0.25)); } /* ======================================== METHOD 3: Screen Blend Mode (For very dark backgrounds) ======================================== */ [class*="bg-gray-900"] img[alt*="Alfie"], [class*="bg-black"] img[alt*="Alfie"], .dark-background .character-image-fix { mix-blend-mode: screen !important; filter: brightness(0.9) contrast(1.1) drop-shadow(0 10px 30px rgba(255, 255, 255, 0.1)); } /* ======================================== CONTAINER FIXES ======================================== */ /* Ensure parent containers support blend modes */ .hero-character-container, .character-container { position: relative; isolation: isolate; background: transparent; } .hero-character-container img, .character-container img { display: block; max-width: 100%; height: auto; } /* ======================================== SPECIFIC IMAGE URL TARGETING ======================================== */ /* Target specific problematic images by their URL hash */ img[src*="754c87a454573b8f9380141ac15eb92f"], /* Alfie pineapple with white bg */ img[src*="7ec81caed29a7aa237e8725e3a9a718d"], /* Original Alfie */ img[src*="3346f3253b89366d70e3e745298e0bc5"] /* Account page Alfie */ { mix-blend-mode: darken !important; filter: brightness(1.1) contrast(1.15) saturate(1.08) drop-shadow(0 15px 35px rgba(0, 0, 0, 0.2)); background: transparent !important; } /* ======================================== SVG FILTER METHOD (Most aggressive - use sparingly) ======================================== */ .remove-white-aggressive { /* This literally removes white pixels using SVG filter */ filter: url('#remove-white-filter'); } /* Add this SVG to your HTML or : */ /* ======================================== FALLBACK FOR BROWSERS WITHOUT BLEND MODE SUPPORT ======================================== */ @supports not (mix-blend-mode: multiply) { .character-image-fix, img[alt*="Alfie"], img[alt*="Olive"] { /* Fallback: Just enhance contrast */ filter: brightness(1.05) contrast(1.2) saturate(1.1) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2)); } } /* ======================================== RESPONSIVE ADJUSTMENTS ======================================== */ @media (max-width: 768px) { .character-image-fix, .hero-character-container img { /* Slightly less aggressive on mobile */ filter: brightness(1.08) contrast(1.12) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.15)); } } /* ======================================== PRINT STYLES ======================================== */ @media print { .character-image-fix, img[alt*="Alfie"], img[alt*="Olive"] { mix-blend-mode: normal !important; filter: none !important; } } /* ======================================== UTILITY CLASSES ======================================== */ /* Apply these classes manually if automatic detection fails */ .blend-multiply { mix-blend-mode: multiply !important; } .blend-darken { mix-blend-mode: darken !important; } .blend-screen { mix-blend-mode: screen !important; } .remove-white-bg { background: transparent !important; mix-blend-mode: darken; filter: brightness(1.1) contrast(1.15) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2)); } /* ======================================== ANIMATION COMPATIBILITY ======================================== */ /* Ensure animations work with blend modes */ .character-image-fix:hover, .hero-character-container img:hover { transform: scale(1.05); transition: transform 0.3s ease; /* Blend mode stays consistent during animation */ } /* Bounce animation compatibility */ @keyframes bounce-with-blend { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .animate-bounce-with-blend { animation: bounce-with-blend 3s ease-in-out infinite; will-change: transform; /* Optimize performance */ }