|
945 | 945 | } |
946 | 946 |
|
947 | 947 | @keyframes wallet-connect-button-attention { |
| 948 | + /* No background animation — only border, glow, and scale. */ |
948 | 949 | 0%, |
949 | 950 | 58%, |
950 | 951 | 100% { |
951 | 952 | transform: translateY(0) scale(1); |
952 | 953 | box-shadow: none; |
953 | 954 | border-color: rgba(251, 146, 60, 0.34); |
954 | | - background-color: rgba(251, 146, 60, 0.14); |
955 | | - background: rgba(251, 146, 60, 0.14); |
956 | | - color: rgba(255, 247, 237, 0.98); |
957 | 955 | } |
958 | 956 | 12%, |
959 | 957 | 40% { |
960 | | - /* Peak: bg, border, glow, and scale all move together. */ |
961 | 958 | transform: translateY(-1px) scale(1.045); |
962 | 959 | border-color: rgba(254, 215, 170, 0.95); |
963 | | - background-color: rgba(251, 146, 60, 0.42); |
964 | | - background: rgba(251, 146, 60, 0.42); |
965 | | - color: #fff; |
966 | 960 | box-shadow: |
967 | 961 | 0 0 0 2px rgba(251, 146, 60, 0.75), |
968 | 962 | 0 0 28px rgba(251, 146, 60, 0.65), |
969 | 963 | 0 12px 28px rgba(0, 0, 0, 0.28); |
970 | 964 | } |
971 | 965 | 48% { |
972 | | - /* Shared soft decay — bg resets with border/scale, not after. */ |
973 | 966 | transform: translateY(0) scale(1.015); |
974 | 967 | border-color: rgba(253, 186, 116, 0.72); |
975 | | - background-color: rgba(251, 146, 60, 0.22); |
976 | | - background: rgba(251, 146, 60, 0.22); |
977 | | - color: rgba(255, 247, 237, 0.98); |
978 | 968 | box-shadow: |
979 | 969 | 0 0 0 1px rgba(251, 146, 60, 0.4), |
980 | 970 | 0 0 14px rgba(251, 146, 60, 0.32); |
|
990 | 980 |
|
991 | 981 | .wallet-connect-attention-button { |
992 | 982 | animation: wallet-connect-button-attention 2.1s ease-in-out 1 both; |
993 | | - will-change: transform, box-shadow, background-color, border-color; |
| 983 | + will-change: transform, box-shadow, border-color; |
994 | 984 | } |
995 | 985 |
|
996 | 986 | @media (prefers-reduced-motion: reduce) { |
|
1015 | 1005 |
|
1016 | 1006 | .wallet-connect-attention-button { |
1017 | 1007 | border-color: rgba(254, 215, 170, 0.9) !important; |
1018 | | - background: rgba(251, 146, 60, 0.36) !important; |
1019 | | - color: #fff !important; |
| 1008 | + box-shadow: |
| 1009 | + 0 0 0 2px rgba(251, 146, 60, 0.65), |
| 1010 | + 0 0 20px rgba(251, 146, 60, 0.4); |
1020 | 1011 | } |
1021 | 1012 | } |
0 commit comments