230 lines
5.5 KiB
Sass
230 lines
5.5 KiB
Sass
@use "@/common/styles/colors" as *
|
|
|
|
*
|
|
box-sizing: border-box
|
|
|
|
body
|
|
margin: 0
|
|
padding: 0
|
|
letter-spacing: 0.2rem
|
|
color: #E0E0E0
|
|
font-family: 'Bangers', sans-serif
|
|
height: 100vh
|
|
width: 100vw
|
|
background-size: 300% 300%
|
|
animation: shifting-background 30s ease infinite
|
|
background: linear-gradient(45deg, #AE00FF 0%, #FF007F 100%) fixed
|
|
user-select: none
|
|
overflow: hidden
|
|
position: relative
|
|
|
|
&:before
|
|
content: ""
|
|
position: fixed
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
background-image: url("/background.svg")
|
|
|
|
.background-overlay
|
|
position: fixed
|
|
top: 0
|
|
left: 0
|
|
width: 100vw
|
|
height: 100vh
|
|
z-index: 0
|
|
pointer-events: none
|
|
|
|
.rotating-gradient
|
|
position: absolute
|
|
top: 50%
|
|
left: 50%
|
|
width: 250vh
|
|
height: 250vh
|
|
transform: translate(-50%, -50%)
|
|
background: conic-gradient(from 0deg, rgba(255, 102, 196, 0.2), rgba(102, 204, 255, 0.2), rgba(255, 209, 128, 0.2), rgba(133, 255, 189, 0.2), rgba(255, 102, 196, 0.2))
|
|
border-radius: 50%
|
|
animation: rotate-background 180s linear infinite
|
|
will-change: transform
|
|
transform-origin: center center
|
|
opacity: 0.7
|
|
filter: blur(40px)
|
|
|
|
&:after
|
|
content: ""
|
|
position: fixed
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.4) 100%)
|
|
z-index: 1
|
|
pointer-events: none
|
|
|
|
::-webkit-scrollbar
|
|
width: 8px
|
|
background-color: rgba(0, 0, 0, 0.2)
|
|
border-radius: 4px
|
|
|
|
::-webkit-scrollbar-thumb
|
|
background-color: rgba(255, 255, 255, 0.15)
|
|
border-radius: 4px
|
|
border: 1px solid rgba(255, 255, 255, 0.05)
|
|
|
|
&:hover
|
|
background-color: rgba(255, 255, 255, 0.25)
|
|
|
|
.glassy
|
|
background: $background
|
|
backdrop-filter: blur(10px)
|
|
border: 2px solid $border
|
|
border-radius: 0.8rem
|
|
|
|
.background-elements
|
|
position: fixed
|
|
top: 0
|
|
left: 0
|
|
width: 100vw
|
|
height: 100vh
|
|
overflow: hidden
|
|
z-index: 2
|
|
pointer-events: none
|
|
|
|
.glow-point
|
|
position: absolute
|
|
width: 250px
|
|
height: 250px
|
|
border-radius: 50%
|
|
filter: blur(100px)
|
|
opacity: 0.4
|
|
will-change: transform
|
|
transform: translateZ(0)
|
|
|
|
&.point-1
|
|
top: 20%
|
|
left: 10%
|
|
background-color: rgba(255, 102, 196, 0.8)
|
|
animation: float-glow 15s infinite alternate ease-in-out
|
|
|
|
&.point-2
|
|
top: 70%
|
|
left: 80%
|
|
background-color: rgba(102, 204, 255, 0.8)
|
|
animation: float-glow 18s infinite alternate-reverse ease-in-out
|
|
|
|
&.point-3
|
|
top: 80%
|
|
left: 20%
|
|
background-color: rgba(133, 255, 189, 0.8)
|
|
animation: float-glow 12s infinite alternate ease-in-out 2s
|
|
|
|
.music-note
|
|
position: absolute
|
|
font-size: 60pt
|
|
opacity: 0.7
|
|
will-change: transform, opacity, filter
|
|
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.7))
|
|
transform: translateZ(0)
|
|
backface-visibility: hidden
|
|
|
|
@for $i from 1 through 5
|
|
&.note-#{$i}
|
|
animation-name: float-note-#{$i}, pulse-note
|
|
animation-duration: #{10 + ($i * 1)}s, 5s
|
|
animation-timing-function: ease-in-out, ease-in-out
|
|
animation-iteration-count: infinite, infinite
|
|
animation-direction: alternate, alternate
|
|
animation-delay: #{$i * 0.7}s, #{$i * 0.4}s
|
|
|
|
@if $i % 4 == 0
|
|
color: rgba(255, 102, 196, 0.8)
|
|
@else if $i % 4 == 1
|
|
color: rgba(102, 204, 255, 0.8)
|
|
@else if $i % 4 == 2
|
|
color: rgba(255, 209, 128, 0.8)
|
|
@else
|
|
color: rgba(133, 255, 189, 0.8)
|
|
|
|
.card-element
|
|
background: rgba(255, 255, 255, 0.07)
|
|
backdrop-filter: blur(10px)
|
|
border: 1px solid rgba(255, 255, 255, 0.2)
|
|
border-radius: 20px
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), 0 0 20px rgba(255, 255, 255, 0.1)
|
|
overflow: hidden
|
|
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
|
animation: card-float 6s infinite ease-in-out alternate
|
|
|
|
&:hover
|
|
transform: translateY(-10px) scale(1.02)
|
|
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2), 0 0 40px rgba(255, 255, 255, 0.2)
|
|
border: 1px solid rgba(255, 255, 255, 0.4)
|
|
|
|
@keyframes shifting-background
|
|
0%
|
|
background-position: 0% 0%
|
|
50%
|
|
background-position: 100% 100%
|
|
100%
|
|
background-position: 0% 0%
|
|
|
|
@keyframes rotate-background
|
|
0%
|
|
transform: translate(-50%, -50%) rotate(0deg)
|
|
100%
|
|
transform: translate(-50%, -50%) rotate(360deg)
|
|
|
|
@keyframes float-glow
|
|
0%, 100%
|
|
transform: translate(0, 0) scale(1)
|
|
filter: blur(100px)
|
|
50%
|
|
transform: translate(30px, -20px) scale(1.2)
|
|
filter: blur(80px)
|
|
|
|
@keyframes card-float
|
|
0%, 100%
|
|
transform: translateY(0)
|
|
50%
|
|
transform: translateY(-8px)
|
|
|
|
@keyframes float-note-1
|
|
0%, 100%
|
|
transform: translateY(0) rotate(0deg)
|
|
50%
|
|
transform: translateY(-40px) rotate(10deg)
|
|
|
|
@keyframes float-note-2
|
|
0%, 100%
|
|
transform: translateY(0) rotate(0deg)
|
|
50%
|
|
transform: translateY(-30px) rotate(-8deg)
|
|
|
|
@keyframes float-note-3
|
|
0%, 100%
|
|
transform: translateY(0) rotate(0deg)
|
|
50%
|
|
transform: translateY(-50px) rotate(15deg)
|
|
|
|
@keyframes float-note-4
|
|
0%, 100%
|
|
transform: translateY(0) rotate(0deg)
|
|
33%
|
|
transform: translateY(-25px) rotate(-5deg)
|
|
66%
|
|
transform: translateY(-40px) rotate(5deg)
|
|
|
|
@keyframes float-note-5
|
|
0%, 100%
|
|
transform: translateY(0) rotate(0deg)
|
|
50%
|
|
transform: translateY(-35px) rotate(-12deg)
|
|
|
|
@keyframes pulse-note
|
|
0%, 100%
|
|
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5))
|
|
opacity: 0.6
|
|
50%
|
|
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.7))
|
|
opacity: 0.9 |