/* 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{ 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(--accent) 0%, transparent) 38%, color-mix(in srgb, var(--accent) 35%, transparent) 50%, color-mix(in srgb, var(--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, 12px); padding:1px; background: linear-gradient(135deg, color-mix(in srgb, var(--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; } /* ===== Banner — Overlays (Hero) — FONTE ÚNICA (unificado) ===== */ /* Gradiente sobre o banner (usa variáveis do front-page.php) */ .hero.heroovr-gradient::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient( var(--hero-grad-angle, 0deg), var(--hero-grad-rgba, rgba(0,0,0,.35)) 0%, rgba(0,0,0,0) 60% ); z-index: 1; /* abaixo do .hero-inner (que tem z-index:2) */ } /* Reflexo — faixa animada movendo em X. → Nome de keyframes exclusivo para evitar colisões: sk-hero-reflection-move */ .hero.heroovr-reflection{ position: relative; overflow: hidden; } .hero.heroovr-reflection::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%, rgba(255,255,255,.12) 44%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.12) 56%, transparent 100% ); transform: skewX(-20deg); opacity: var(--hero-refl-opacity, .12); animation: sk-hero-reflection-move var(--hero-refl-speed, 3s) linear infinite; mix-blend-mode: screen; will-change: left; /* performance hint */ z-index: 0; } @keyframes sk-hero-reflection-move{ 0% { left: -30%; } 100% { left: 130%; } } /* Vidro (blur) — duplicação de imagem + tinta por cima */ .hero.heroovr-blur::before{ content:""; position:absolute; inset:-2%; background: inherit; transform: scale(1.02); filter: blur(var(--hero-blur-amount, 8px)); z-index: 0; } .hero.heroovr-blur::after{ content:""; position:absolute; inset:0; background: var(--hero-blur-tint, rgba(0,0,0,.12)); pointer-events:none; z-index: 0; } /* Estado NONE — garante que não sobrem camadas residuais */ .hero:not(.heroovr-gradient):not(.heroovr-reflection):not(.heroovr-blur)::before, .hero:not(.heroovr-gradient):not(.heroovr-reflection):not(.heroovr-blur)::after{ content: none !important; }