|
|
|
@ -1,4 +1,4 @@ |
|
|
|
h2@property --glow-deg { |
|
|
|
@property --glow-deg { |
|
|
|
syntax: "<angle>"; |
|
|
|
inherits: true; |
|
|
|
initial-value: 0deg; |
|
|
|
@ -1007,7 +1007,7 @@ form:has(.cta) { |
|
|
|
& button { |
|
|
|
text-align: left; |
|
|
|
appearance: none; |
|
|
|
border: 2px solid transparent; |
|
|
|
border: 3px solid transparent; |
|
|
|
flex-grow: 1; |
|
|
|
line-height: 1.25; |
|
|
|
background: var(--clr-white); |
|
|
|
@ -1018,9 +1018,20 @@ form:has(.cta) { |
|
|
|
color: var(--clr-black); |
|
|
|
|
|
|
|
&.chance { |
|
|
|
animation: glow 10s linear infinite; |
|
|
|
animation: glow 4s linear infinite; |
|
|
|
background: linear-gradient(var(--clr-white), var(--clr-white)) padding-box, |
|
|
|
linear-gradient(var(--glow-deg), var(--clr-blue), var(--clr-green), #74B2FF, var(--clr-green)) border-box; |
|
|
|
conic-gradient( |
|
|
|
from var(--glow-deg), |
|
|
|
var(--clr-blue), |
|
|
|
var(--clr-green), |
|
|
|
var(--clr-blue), |
|
|
|
var(--clr-green), |
|
|
|
var(--clr-blue) |
|
|
|
) border-box; |
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) { |
|
|
|
animation: none; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|