/* StyleKit — effects.css (efeitos universais aplicáveis por classe/atributo) */ /* Vidro/blur */ .has-glass { backdrop-filter: saturate(1.1) blur(12px); background: color-mix(in srgb, #ffffff 8%, transparent); border: 1px solid color-mix(in srgb, #ffffff 10%, transparent); } /* Gradiente utilitário (exemplo) */ .bg-gradient-primary { background: linear-gradient(135deg, color-mix(in srgb, var(--btn-bg) 35%, #ffffff 0%), transparent 65%); } /* Reflexão leve (ex.: overlays) */ .has-reflection::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,0)); pointer-events: none; } /* ===== Busca — efeitos visuais (ativados via .searchfx-*) ===== */ /* Efeito 1: Reflection animado (faixa) */ .searchfx-reflection form.corretor-search{ position: relative; overflow: hidden; } .searchfx-reflection form.corretor-search::after{ content:""; position:absolute; top:0; bottom:0; left:-30%; width: var(--hero-refl-width, 18%); pointer-events:none; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--color-accent) 0%, transparent) 38%, color-mix(in srgb, var(--color-accent) 35%, transparent) 50%, color-mix(in srgb, var(--color-accent) 0%, transparent) 62%, transparent 100% ); transform: skewX(-20deg); animation: search-reflection-move var(--hero-refl-speed, 3s) linear infinite; z-index: 1; } @keyframes search-reflection-move{ 0%{ left:-30%; } 100%{ left:130%; } } /* Efeito 2: Borda reflexiva */ .searchfx-reflective-border form.corretor-search::before{ content:""; position:absolute; inset:0; border-radius: var(--radius-lg, 12px); padding:1px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 35%, #ffffff) 0%, rgba(255,255,255,.28) 28%, rgba(0,0,0,.18) 58%, rgba(255,255,255,.35) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; z-index:1; }