diff --git a/src/Component/FAQ.css b/src/Component/FAQ.css index f10eb3e..143a670 100644 --- a/src/Component/FAQ.css +++ b/src/Component/FAQ.css @@ -45,17 +45,72 @@ margin: 0 5rem; } } +@property --gradient-angle { + syntax: ""; + initial-value: 0deg; + inherits: false; + } + .faq { - border: 1px solid rgba(255, 255, 255, 0.5); /* White border with transparency */ + border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 8px; padding: 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.2); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgba(18, 1, 26, 0.7); /* Violet background color with transparency */ width: 70vw; + position: relative; + padding: 1rem; + border-radius: 3px; + z-index: 1; } +.faq::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + background: conic-gradient( + from var(--gradient-angle), + #8126f0, + #b179f0, + #b395ef, + #b179f0, + #8126f0 + ); + border-radius: inherit; + padding: 0.3rem; /* Adjust as needed for border thickness */ + -webkit-mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + animation: moving 1s linear infinite; + } + + @keyframes moving { + 0% { + --gradient-angle: 0deg; + } + 100% { + --gradient-angle: 360deg; + } + } + + + + + + + + @media screen and (max-width:768px) { .faq{ width: 85vw; @@ -118,4 +173,4 @@ .small{ font-size: 0.75rem; } -} \ No newline at end of file +}