|
|
@@ -98,47 +98,54 @@
|
|
|
position: relative;
|
|
|
border-radius: 14px;
|
|
|
width: min(660px, 100%);
|
|
|
+ box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.2),
|
|
|
+ 0 0 40px rgba(192, 132, 252, 0.08),
|
|
|
+ 0 0 80px rgba(90, 90, 255, 0.05);
|
|
|
+ animation: glow-pulse 4s ease-in-out infinite alternate;
|
|
|
}
|
|
|
|
|
|
- .form-glow::before {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- inset: -2px;
|
|
|
- border-radius: 14px;
|
|
|
- background: conic-gradient(
|
|
|
- from var(--angle, 0deg),
|
|
|
- transparent 0%,
|
|
|
- #c084fc 20%,
|
|
|
- #5a5aff 40%,
|
|
|
- transparent 60%
|
|
|
- );
|
|
|
- animation: spin-border 10s linear infinite;
|
|
|
- z-index: 0;
|
|
|
+ .form-glow .standardForm {
|
|
|
+ max-width: 660px;
|
|
|
+ border-color: transparent;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
- .form-glow::after {
|
|
|
+ .form-glow .standardForm::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
- inset: 1px;
|
|
|
- border-radius: 13px;
|
|
|
- background: #1a1a2e;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .form-glow .standardForm {
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- border-color: transparent;
|
|
|
- max-width: 660px;
|
|
|
+ top: 0;
|
|
|
+ left: -75%;
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(
|
|
|
+ 105deg,
|
|
|
+ transparent 20%,
|
|
|
+ rgba(255, 255, 255, 0.045) 50%,
|
|
|
+ transparent 80%
|
|
|
+ );
|
|
|
+ transform: skewX(-10deg);
|
|
|
+ animation: shimmer 6s ease-in-out infinite;
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 10;
|
|
|
}
|
|
|
|
|
|
- @property --angle {
|
|
|
- syntax: "<angle>";
|
|
|
- inherits: false;
|
|
|
- initial-value: 0deg;
|
|
|
+ @keyframes shimmer {
|
|
|
+ 0% { left: -75%; }
|
|
|
+ 25% { left: 125%; }
|
|
|
+ 100% { left: 125%; }
|
|
|
}
|
|
|
|
|
|
- @keyframes spin-border {
|
|
|
- to { --angle: 360deg; }
|
|
|
+ @keyframes glow-pulse {
|
|
|
+ from {
|
|
|
+ box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.15),
|
|
|
+ 0 0 30px rgba(192, 132, 252, 0.06),
|
|
|
+ 0 0 60px rgba(90, 90, 255, 0.04);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.35),
|
|
|
+ 0 0 50px rgba(192, 132, 252, 0.14),
|
|
|
+ 0 0 100px rgba(90, 90, 255, 0.08);
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
