/** * ============================================================================ * CORREÇÃO CSS PARA SAFARI iOS * ============================================================================ * * PROBLEMA: Site apresenta manchas brancas, flickering e recarregamento * visual durante o scroll APENAS no Safari iOS (iPhone). * * CAUSA: O motor WebKit do Safari iOS tem limitações conhecidas com: * 1. backdrop-filter: blur() (principal culpado) * 2. Transparências complexas (glassmorphism) sobre gradientes/imagens * 3. Animações em muitos elementos durante o scroll * 4. Filter: blur() com valores altos * 5. Box-shadows complexas com blur radius alto * * SOLUÇÃO: Usar @supports (-webkit-touch-callout: none) para detectar * Safari iOS e aplicar fallbacks que removem ou simplificam as propriedades * problemáticas SEM alterar o visual em outros navegadores. * * Data: 22 de dezembro de 2025 * ============================================================================ */ /* * Detecção do Safari iOS usando -webkit-touch-callout * Esta propriedade é exclusiva do Safari iOS e permite direcionar * especificamente este navegador sem afetar outros. */ @supports (-webkit-touch-callout: none) { /* ======================================================================== * 1. BACKDROP-FILTER - CORREÇÃO CRÍTICA * ======================================================================== */ /** * .glass-card - Principal elemento problemático * Remove backdrop-filter e substitui por fundo semi-sólido */ .glass-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; /* Substitui gradiente transparente por versão mais opaca */ background: rgba(22, 22, 39, 0.95) !important; /* Simplifica box-shadow para reduzir carga de renderização */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; } /** * .glass-card:before - Pseudo-elemento com gradiente sobreposto * Desativa para evitar sobreposição de transparências */ .glass-card:before { display: none !important; } /** * Classes utilitárias Tailwind com backdrop-blur */ .backdrop-blur-sm { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; /* Fallback: fundo semi-transparente */ background-color: rgba(15, 15, 26, 0.9) !important; } .backdrop-blur-xl { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; /* Fallback: fundo semi-transparente */ background-color: rgba(15, 15, 26, 0.95) !important; } /* ======================================================================== * 2. FILTER: BLUR() - CORREÇÃO DE ALTA PRIORIDADE * ======================================================================== */ /** * Classes com blur extremamente alto (100px, 120px, 150px) * Remove completamente o blur para evitar sobrecarga da GPU */ .blur-\[100px\], .blur-\[120px\], .blur-\[150px\] { filter: none !important; /* Reduz opacidade para manter efeito visual suave */ opacity: 0.3 !important; } /** * Blur moderado (24px) * Remove para evitar problemas durante scroll */ .blur-xl { filter: none !important; opacity: 0.5 !important; } /* ======================================================================== * 3. ANIMAÇÕES COMPLEXAS - SIMPLIFICAÇÃO * ======================================================================== */ /** * Animações infinitas que alteram opacity * Reduz para estado estático para evitar repaints constantes */ .animate-pulse { animation: none !important; opacity: 0.7 !important; } .animate-pulse-glow { animation: none !important; opacity: 1 !important; /* Remove box-shadow animado, mantém versão estática simplificada */ box-shadow: 0 0 15px rgba(0, 208, 255, 0.3) !important; } /** * Animações de transform * Desativa para evitar problemas de composição durante scroll */ .animate-float, .animate-orbit { animation: none !important; } /** * Animação de shimmer (background-position) * Desativa para evitar flickering */ .animate-shimmer { animation: none !important; background: transparent !important; } /** * Animações de bounce e spin (não essenciais) * Desativa para reduzir carga de renderização */ .animate-bounce, .animate-spin { animation: none !important; } /* ======================================================================== * 4. BOX-SHADOW COMPLEXAS - SIMPLIFICAÇÃO * ======================================================================== */ /** * Shadows neon com blur radius alto (30px, 40px, 50px) * Simplifica para versões mais leves */ .shadow-\[0_0_30px_hsl\(191_100\%_50\%\/0\.3\)\], .shadow-\[0_0_30px_hsl\(191_100\%_50\%\/0\.1\)\] { box-shadow: 0 0 10px rgba(0, 208, 255, 0.2) !important; } .shadow-\[0_0_40px_hsl\(191_100\%_50\%\/0\.6\)\], .shadow-\[0_0_50px_hsl\(191_100\%_50\%\/0\.5\)\] { box-shadow: 0 0 15px rgba(0, 208, 255, 0.3) !important; } /** * Shadows com inset (ainda mais pesadas) * Simplifica drasticamente */ .shadow-\[0_0_20px_hsl\(191_100\%_50\%\/0\.4\)\,inset_0_0_20px_hsl\(191_100\%_50\%\/0\.1\)\], .hover\:shadow-\[0_0_40px_hsl\(191_100\%_50\%\/0\.6\)\,inset_0_0_30px_hsl\(191_100\%_50\%\/0\.2\)\]:hover { box-shadow: 0 0 10px rgba(0, 208, 255, 0.25) !important; } /** * Shadows hover (aplicadas em interação) * Simplifica para evitar lag durante hover */ .hover\:shadow-\[0_0_30px_hsl\(191_100\%_50\%\/0\.5\)\]:hover, .hover\:shadow-\[0_0_40px_hsl\(191_100\%_50\%\/0\.6\)\]:hover, .hover\:shadow-\[0_0_50px_hsl\(191_100\%_50\%\/0\.5\)\]:hover { box-shadow: 0 0 12px rgba(0, 208, 255, 0.3) !important; } /** * Shadows neon verde (accent color) */ .shadow-\[0_0_20px_hsl\(157_100\%_50\%\/0\.3\)\], .hover\:shadow-\[0_0_30px_hsl\(157_100\%_50\%\/0\.5\)\]:hover { box-shadow: 0 0 10px rgba(0, 255, 170, 0.25) !important; } /** * Shadows neon roxo (purple accent) */ .group:hover .group-hover\:shadow-\[0_0_30px_hsl\(271_76\%_53\%\/0\.3\)\] { box-shadow: 0 0 10px rgba(138, 44, 226, 0.25) !important; } /* ======================================================================== * 5. DROP-SHADOW (FILTER-BASED SHADOWS) * ======================================================================== */ /** * Drop-shadows aplicadas via filter * Simplifica para evitar problemas de renderização */ .drop-shadow-\[0_0_10px_hsl\(191_100\%_50\%\/0\.5\)\], .drop-shadow-\[0_0_15px_hsl\(191_100\%_50\%\/0\.5\)\] { filter: drop-shadow(0 0 5px rgba(0, 208, 255, 0.3)) !important; } /* ======================================================================== * 6. OTIMIZAÇÕES DE PERFORMANCE ADICIONAIS * ======================================================================== */ /** * Força composição em camada separada para elementos com transform * Reduz repaints durante scroll */ .hover-lift { will-change: transform; /* Remove box-shadow do hover para reduzir carga */ } .hover-lift:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 208, 255, 0.2) !important; } /** * Otimização de scroll suave para iOS */ body, .scroll-area, .overflow-auto, .overflow-y-auto { -webkit-overflow-scrolling: touch; } /** * Elementos fixos (como badges ou headers) * Força composição em camada separada */ .fixed, [class*="fixed"] { will-change: transform; -webkit-transform: translateZ(0); transform: translateZ(0); } /* ======================================================================== * 7. TEXT-GLOW - SIMPLIFICAÇÃO * ======================================================================== */ /** * Text-shadow com múltiplas camadas * Simplifica para versão mais leve */ .text-glow { text-shadow: 0 0 8px rgba(0, 208, 255, 0.6), 0 0 15px rgba(0, 208, 255, 0.3) !important; } /* ======================================================================== * 8. TRANSIÇÕES - OTIMIZAÇÃO * ======================================================================== */ /** * Transições que envolvem backdrop-filter * Remove a propriedade da transição */ .transition, .transition-all { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform !important; } /* ======================================================================== * 9. GRADIENTES COMPLEXOS - SIMPLIFICAÇÃO (OPCIONAL) * ======================================================================== */ /** * Se ainda houver problemas, descomente esta seção para simplificar * gradientes complexos em backgrounds */ /* .bg-gradient-to-b, .bg-gradient-to-br, .bg-gradient-to-r, .bg-gradient-to-t, .bg-gradient-to-l { background-image: none !important; background-color: rgba(15, 15, 26, 0.95) !important; } */ } /** * ============================================================================ * FIM DA CORREÇÃO PARA SAFARI iOS * ============================================================================ * * IMPORTANTE: Este arquivo deve ser carregado APÓS os arquivos CSS principais * para garantir que as correções sobrescrevam os estilos originais apenas * no Safari iOS. * * TESTES RECOMENDADOS: * 1. Testar em iPhone real (Safari) * 2. Verificar se manchas brancas desapareceram * 3. Testar scroll suave em todas as seções * 4. Verificar se animações não causam flickering * 5. Confirmar que o visual permanece aceitável (trade-off: performance > efeitos) * * FALLBACK: Se ainda houver problemas, considere desativar mais animações * ou simplificar ainda mais os gradientes (seção 9 comentada acima). * ============================================================================ */