|
Tags: Blanking Manual revert |
| Line 1: |
Line 1: |
| @supports (syntax: '<angle>') {
| |
| @property --gradient-angle {
| |
| syntax: '<angle>';
| |
| initial-value: 0deg;
| |
| inherits: false;
| |
| }
| |
| }
| |
|
| |
|
| .scw-gradient-glow {
| |
| position: relative;
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| padding: 10px 18px;
| |
| border-radius: 8px;
| |
| background-color: #1a242e;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 0;
| |
| overflow: hidden;
| |
| text-decoration: none;
| |
| transition: background-color 0.3s ease;
| |
| }
| |
|
| |
| .scw-gradient-glow .home-header__searchIcon img {
| |
| vertical-align: middle;
| |
| }
| |
|
| |
| /* Glow animado na borda */
| |
| .scw-gradient-glow::before {
| |
| content: '';
| |
| position: absolute;
| |
| inset: -3px;
| |
| z-index: -1;
| |
| border-radius: inherit;
| |
|
| |
| --clr-3: #59cffc;
| |
| --clr-4: #38556a;
| |
| --clr-5: #233545;
| |
| --gradient: var(--clr-3), var(--clr-4), var(--clr-5), var(--clr-4), var(--clr-3);
| |
| --gradient-time: 5s;
| |
| --gradient-blur: 6px;
| |
|
| |
| background: conic-gradient(from var(--gradient-angle, 0deg), var(--gradient));
| |
| animation: scw-gradient-rotate-modern var(--gradient-time) linear infinite;
| |
| filter: blur(var(--gradient-blur));
| |
| transition: filter 0.2s ease;
| |
| }
| |
|
| |
| /* Glow mais intenso no hover */
| |
| .scw-gradient-glow:hover::before {
| |
| filter: blur(10px);
| |
| }
| |
|
| |
| @keyframes scw-gradient-rotate-modern {
| |
| 0% { --gradient-angle: 0deg; }
| |
| 100% { --gradient-angle: 360deg; }
| |
| }
| |
|
| |
| /* Fallback para navegadores sem suporte ao @property */
| |
| @supports not (syntax: '<angle>') {
| |
| .scw-gradient-glow::before {
| |
| animation: scw-gradient-rotate-fallback var(--gradient-time) linear infinite;
| |
| transform-origin: center;
| |
| }
| |
|
| |
| @keyframes scw-gradient-rotate-fallback {
| |
| 0% { transform: rotate(0deg); }
| |
| 100% { transform: rotate(360deg); }
| |
| }
| |
| }
| |
