|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Inter:wght@300;400;500;600&display=swap'); |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
color: white; |
|
|
} |
|
|
.text-orange-500 { |
|
|
color: #f97316; |
|
|
text-shadow: 0 0 8px rgba(249, 115, 22, 0.7); |
|
|
animation: pulse-glow-orange 2s infinite ease-in-out alternate; |
|
|
} |
|
|
|
|
|
@keyframes pulse-glow-orange { |
|
|
0% { |
|
|
text-shadow: 0 0 8px rgba(249, 115, 22, 0.7); |
|
|
} |
|
|
100% { |
|
|
text-shadow: 0 0 20px rgba(249, 115, 22, 0.9); |
|
|
} |
|
|
} |
|
|
h1, h2, h3, .countdown-timer { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
letter-spacing: 0.05em; |
|
|
} |
|
|
|
|
|
header { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
z-index: 1000; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
backdrop-filter: blur(10px); |
|
|
border-bottom: 1px solid rgba(15, 240, 252, 0.2); |
|
|
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.header-container { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 1rem 2rem; |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.logo-wrapper { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.logo-wrapper img { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
border: 2px solid rgba(15, 240, 252, 0.5); |
|
|
box-shadow: 0 0 15px rgba(15, 240, 252, 0.3); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.logo-wrapper img:hover { |
|
|
transform: rotate(15deg); |
|
|
box-shadow: 0 0 25px rgba(15, 240, 252, 0.5); |
|
|
} |
|
|
|
|
|
.brand-name { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
font-size: 1.5rem; |
|
|
font-weight: 700; |
|
|
background: linear-gradient(90deg, #0ff0fc, #ff00ff); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
text-shadow: 0 0 10px rgba(15, 240, 252, 0.3); |
|
|
} |
|
|
|
|
|
.nav-links { |
|
|
display: flex; |
|
|
gap: 2rem; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
color: rgba(255, 255, 255, 0.8); |
|
|
font-size: 1rem; |
|
|
font-weight: 500; |
|
|
text-decoration: none; |
|
|
position: relative; |
|
|
padding: 0.5rem 0; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: linear-gradient(90deg, #0ff0fc, #ff00ff); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.active-link { |
|
|
color: white; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.active-link::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.cta-button { |
|
|
background: linear-gradient(90deg, #0ff0fc, #ff00ff); |
|
|
color: black; |
|
|
font-weight: 600; |
|
|
padding: 0.5rem 1.5rem; |
|
|
border-radius: 50px; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 15px rgba(15, 240, 252, 0.3); |
|
|
} |
|
|
|
|
|
.cta-button:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 20px rgba(15, 240, 252, 0.5); |
|
|
} |
|
|
|
|
|
|
|
|
.provider-carousel-container { |
|
|
mask-image: linear-gradient( |
|
|
to right, |
|
|
transparent 0%, |
|
|
black 10%, |
|
|
black 90%, |
|
|
transparent 100% |
|
|
); |
|
|
} |
|
|
.provider-carousel { |
|
|
animation: scrollProviders 20s linear infinite; |
|
|
width: calc(120px * 40); |
|
|
gap: 40px; |
|
|
} |
|
|
|
|
|
@keyframes scrollProviders { |
|
|
0% { |
|
|
transform: translateX(0); |
|
|
} |
|
|
100% { |
|
|
transform: translateX(calc(-120px * 20)); |
|
|
} |
|
|
} |
|
|
.provider-logo { |
|
|
transition: all 0.3s ease; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
min-width: 120px; |
|
|
position: relative; |
|
|
} |
|
|
.provider-tooltip { |
|
|
position: absolute; |
|
|
bottom: 100%; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
background: rgba(0,0,0,0.8); |
|
|
color: white; |
|
|
padding: 0.25rem 0.5rem; |
|
|
border-radius: 4px; |
|
|
font-size: 0.75rem; |
|
|
white-space: nowrap; |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: all 0.3s ease; |
|
|
margin-bottom: 8px; |
|
|
z-index: 10; |
|
|
} |
|
|
.provider-tooltip::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
border-width: 5px; |
|
|
border-style: solid; |
|
|
border-color: rgba(0,0,0,0.8) transparent transparent transparent; |
|
|
} |
|
|
.provider-logo:hover .provider-tooltip { |
|
|
opacity: 1; |
|
|
transform: translateX(-50%) translateY(-5px); |
|
|
} |
|
|
.provider-logo img { |
|
|
filter: drop-shadow(0 0 5px currentColor); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.provider-logo:hover img { |
|
|
transform: scale(1.2); |
|
|
filter: drop-shadow(0 0 15px currentColor); |
|
|
} |
|
|
.provider-logo.text-neonblue img { |
|
|
animation: pulseGlowBlue 2s infinite ease-in-out alternate; |
|
|
} |
|
|
|
|
|
.provider-logo.text-neonmagenta img { |
|
|
animation: pulseGlowMagenta 2s infinite ease-in-out alternate; |
|
|
} |
|
|
|
|
|
.provider-logo.text-white img { |
|
|
animation: pulseGlowWhite 2s infinite ease-in-out alternate; |
|
|
} |
|
|
|
|
|
@keyframes pulseGlowBlue { |
|
|
0% { |
|
|
transform: scale(0.95); |
|
|
filter: drop-shadow(0 0 5px rgba(15, 240, 252, 0.3)); |
|
|
} |
|
|
100% { |
|
|
transform: scale(1.05); |
|
|
filter: drop-shadow(0 0 15px rgba(15, 240, 252, 0.7)); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes pulseGlowMagenta { |
|
|
0% { |
|
|
transform: scale(0.95); |
|
|
filter: drop-shadow(0 0 5px rgba(255, 0, 255, 0.3)); |
|
|
} |
|
|
100% { |
|
|
transform: scale(1.05); |
|
|
filter: drop-shadow(0 0 15px rgba(255, 0, 255, 0.7)); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes pulseGlowWhite { |
|
|
0% { |
|
|
transform: scale(0.95); |
|
|
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3)); |
|
|
} |
|
|
100% { |
|
|
transform: scale(1.05); |
|
|
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.7)); |
|
|
} |
|
|
} |
|
|
|
|
|
.countdown-container { |
|
|
width: 100%; |
|
|
max-width: 800px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.countdown-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
gap: 1rem; |
|
|
justify-items: center; |
|
|
} |
|
|
|
|
|
.countdown-item { |
|
|
position: relative; |
|
|
width: 120px; |
|
|
height: 120px; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.countdown-svg { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
transform: rotate(-90deg); |
|
|
} |
|
|
|
|
|
.countdown-track { |
|
|
fill: transparent; |
|
|
stroke: rgba(255, 255, 255, 0.1); |
|
|
stroke-width: 5px; |
|
|
} |
|
|
|
|
|
.countdown-progress { |
|
|
fill: transparent; |
|
|
stroke-width: 5px; |
|
|
stroke-linecap: round; |
|
|
stroke-dashoffset: 283; |
|
|
transition: stroke-dashoffset 0.5s ease; |
|
|
} |
|
|
|
|
|
.days-progress { |
|
|
stroke: url(#days-gradient); |
|
|
filter: drop-shadow(0 0 5px rgba(15, 240, 252, 0.7)); |
|
|
} |
|
|
|
|
|
.hours-progress { |
|
|
stroke: url(#hours-gradient); |
|
|
filter: drop-shadow(0 0 5px rgba(255, 0, 255, 0.7)); |
|
|
} |
|
|
|
|
|
.minutes-progress { |
|
|
stroke: url(#days-gradient); |
|
|
filter: drop-shadow(0 0 5px rgba(15, 240, 252, 0.5)); |
|
|
} |
|
|
|
|
|
.seconds-progress { |
|
|
stroke: url(#hours-gradient); |
|
|
filter: drop-shadow(0 0 5px rgba(255, 0, 255, 0.5)); |
|
|
} |
|
|
|
|
|
.countdown-content { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
text-align: center; |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
|
|
|
.glass-panel { |
|
|
background: rgba(10, 10, 10, 0.5); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
border-radius: 16px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.game-category-thumbnail { |
|
|
width: 200px; |
|
|
height: 200px; |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
border-radius: 12px; |
|
|
border: 2px solid rgba(15, 240, 252, 0.3); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.game-category-thumbnail:hover { |
|
|
transform: scale(1.05); |
|
|
border-color: rgba(255, 0, 255, 0.8); |
|
|
box-shadow: |
|
|
0 10px 30px rgba(15, 240, 252, 0.5), |
|
|
0 0 20px rgba(255, 0, 255, 0.3); |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.game-category-thumbnail::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
background: linear-gradient( |
|
|
to bottom, |
|
|
transparent 60%, |
|
|
rgba(0, 0, 0, 0.8) 100% |
|
|
); |
|
|
} |
|
|
|
|
|
|
|
|
.game-thumbnail { |
|
|
min-width: 150px; |
|
|
height: 150px; |
|
|
background: rgba(20, 20, 20, 0.7); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
border-radius: 12px; |
|
|
border: 1px solid rgba(15, 240, 252, 0.3); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.game-thumbnail::before { |
|
|
content: 'GAME PREVIEW'; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
text-shadow: 0 0 8px rgba(15, 240, 252, 0.5); |
|
|
font-size: 0.8rem; |
|
|
font-weight: 500; |
|
|
letter-spacing: 0.1em; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
padding: 0.5rem 1rem; |
|
|
border-radius: 2rem; |
|
|
white-space: nowrap; |
|
|
} |
|
|
.game-thumbnail::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: radial-gradient(circle at center, transparent 60%, rgba(15, 240, 252, 0.1) 100%); |
|
|
border-radius: 12px; |
|
|
} |
|
|
|
|
|
.game-thumbnail:hover { |
|
|
transform: perspective(500px) translateY(-5px) rotateX(5deg) scale(1.05); |
|
|
border-color: rgba(15, 240, 252, 0.8); |
|
|
box-shadow: |
|
|
0 10px 30px rgba(15, 240, 252, 0.3), |
|
|
0 0 0 2px rgba(255, 0, 255, 0.4); |
|
|
background: rgba(25, 25, 25, 0.9); |
|
|
animation: hologramGlow 2s infinite alternate; |
|
|
filter: brightness(1.1); |
|
|
z-index: 10; |
|
|
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1); |
|
|
} |
|
|
.game-thumbnail:hover::after { |
|
|
background: radial-gradient(circle at center, transparent 20%, rgba(15, 240, 252, 0.4) 100%); |
|
|
animation: ripple 1.5s infinite ease-out; |
|
|
} |
|
|
|
|
|
@keyframes ripple { |
|
|
0% { |
|
|
transform: scale(0.8); |
|
|
opacity: 0.7; |
|
|
} |
|
|
100% { |
|
|
transform: scale(1.5); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes hologramGlow { |
|
|
0% { |
|
|
box-shadow: |
|
|
0 15px 40px rgba(15, 240, 252, 0.4), |
|
|
0 0 0 2px rgba(255, 0, 255, 0.5); |
|
|
} |
|
|
100% { |
|
|
box-shadow: |
|
|
0 20px 50px rgba(15, 240, 252, 0.6), |
|
|
0 0 0 3px rgba(255, 0, 255, 0.7); |
|
|
} |
|
|
} |
|
|
|
|
|
.game-carousel { |
|
|
animation: scroll 30s linear infinite; |
|
|
width: calc(150px * 20); |
|
|
} |
|
|
|
|
|
@keyframes scroll { |
|
|
0% { |
|
|
transform: translateX(0); |
|
|
} |
|
|
100% { |
|
|
transform: translateX(calc(-150px * 10)); |
|
|
} |
|
|
} |
|
|
.game-carousel-container { |
|
|
mask-image: linear-gradient( |
|
|
to right, |
|
|
transparent 0%, |
|
|
black 10%, |
|
|
black 90%, |
|
|
transparent 100% |
|
|
); |
|
|
} |
|
|
|
|
|
img[alt="BTC"], |
|
|
img[alt="ETH"], |
|
|
img[alt="USDT"], |
|
|
img[alt="LTC"], |
|
|
img[alt="DOGE"], |
|
|
img[alt="SOL"], |
|
|
img[alt="ADA"], |
|
|
img[alt="MATIC"], |
|
|
img[alt="BNB"] { |
|
|
transition: all 0.3s ease; |
|
|
animation: pulseGlow 2s infinite ease-in-out alternate; |
|
|
} |
|
|
|
|
|
@keyframes pulseGlow { |
|
|
0% { |
|
|
transform: scale(0.95); |
|
|
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3)); |
|
|
} |
|
|
100% { |
|
|
transform: scale(1.05); |
|
|
filter: drop-shadow(0 0 15px currentColor); |
|
|
} |
|
|
} |
|
|
|
|
|
img[alt="BTC"] { color: #f7931a; } |
|
|
img[alt="ETH"] { color: #627eea; } |
|
|
img[alt="USDT"] { color: #26a17b; } |
|
|
img[alt="LTC"] { color: #345d9d; } |
|
|
img[alt="DOGE"] { color: #c2a633; } |
|
|
img[alt="SOL"] { color: #00ffbd; } |
|
|
img[alt="ADA"] { color: #0033ad; } |
|
|
img[alt="MATIC"] { color: #8247e5; } |
|
|
img[alt="BNB"] { color: #f3ba2f; } |
|
|
|
|
|
img[alt="BTC"]:hover { animation: pulseGlow 0.5s infinite ease-in-out alternate; } |
|
|
img[alt="ETH"]:hover { animation: pulseGlow 0.5s infinite ease-in-out alternate; } |
|
|
img[alt="USDT"]:hover { animation: pulseGlow 0.5s infinite ease-in-out alternate; } |
|
|
img[alt="LTC"]:hover { animation: pulseGlow 0.5s infinite ease-in-out alternate; } |
|
|
img[alt="DOGE"]:hover { animation: pulseGlow 0.5s infinite ease-in-out alternate; } |
|
|
img[alt="SOL"]:hover { animation: pulseGlow 0.5s infinite ease-in-out alternate; } |
|
|
img[alt="ADA"]:hover { animation: pulseGlow 0.5s infinite ease-in-out alternate; } |
|
|
img[alt="MATIC"]:hover { animation: pulseGlow 0.5s infinite ease-in-out alternate; } |
|
|
img[alt="BNB"]:hover { animation: pulseGlow 0.5s infinite ease-in-out alternate; } |
|
|
|
|
|
.group { |
|
|
position: relative; |
|
|
} |
|
|
.group .provider-tooltip { |
|
|
bottom: auto; |
|
|
top: 100%; |
|
|
margin-top: 8px; |
|
|
margin-bottom: 0; |
|
|
} |
|
|
.group .provider-tooltip::after { |
|
|
top: auto; |
|
|
bottom: 100%; |
|
|
border-color: transparent transparent rgba(0,0,0,0.8) transparent; |
|
|
} |
|
|
|
|
|
.facebook-popup { |
|
|
animation: floatIn 1s ease-out forwards, pulse 2s infinite ease-in-out; |
|
|
opacity: 0; |
|
|
transform: translateX(20px); |
|
|
position: fixed; |
|
|
right: 20px; |
|
|
bottom: 20px; |
|
|
z-index: 1000; |
|
|
} |
|
|
@keyframes floatIn { |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
50% { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
} |
|
|
.holographic-panel { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 0 20px rgba(15, 240, 252, 0.3), |
|
|
0 0 40px rgba(255, 0, 255, 0.3); |
|
|
transition: all 0.3s ease; |
|
|
cursor: pointer; |
|
|
} |
|
|
.holographic-panel:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 0 30px rgba(15, 240, 252, 0.5), |
|
|
0 0 60px rgba(255, 0, 255, 0.5); |
|
|
} |
|
|
|
|
|
.holographic-panel::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient( |
|
|
45deg, |
|
|
rgba(15, 240, 252, 0.2) 0%, |
|
|
rgba(255, 0, 255, 0.2) 50%, |
|
|
rgba(15, 240, 252, 0.2) 100% |
|
|
); |
|
|
animation: hologram 3s infinite alternate; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
@keyframes hologram { |
|
|
0% { |
|
|
opacity: 0.3; |
|
|
background-position: 0% 50%; |
|
|
} |
|
|
100% { |
|
|
opacity: 0.5; |
|
|
background-position: 100% 50%; |
|
|
} |
|
|
} |
|
|
|
|
|
.facebook-popup button { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.facebook-popup button::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: linear-gradient( |
|
|
to bottom right, |
|
|
transparent 45%, |
|
|
rgba(255, 255, 255, 0.3) 50%, |
|
|
transparent 55% |
|
|
); |
|
|
transform: rotate(30deg); |
|
|
animation: shine 3s infinite; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
@keyframes shine { |
|
|
0% { |
|
|
left: -50%; |
|
|
} |
|
|
100% { |
|
|
left: 150%; |
|
|
} |
|
|
} |
|
|
|
|
|
.scrolling-column { |
|
|
flex: 0 0 200px; |
|
|
scrollbar-width: none; |
|
|
-ms-overflow-style: none; |
|
|
background: rgba(20, 20, 20, 0.5); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 12px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
.scrolling-column::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.placeholder-container { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.image-placeholder { |
|
|
width: 100%; |
|
|
height: 100px; |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 8px; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
transition: all 0.3s ease; |
|
|
border: 1px dashed rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.image-placeholder:hover { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-color: rgba(15, 240, 252, 0.3); |
|
|
box-shadow: 0 0 10px rgba(15, 240, 252, 0.1); |
|
|
} |
|
|
|
|
|
.image-placeholder i { |
|
|
opacity: 0.7; |
|
|
} |
|
|
|
|
|
|
|
|
.cosmic-web { |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
background: |
|
|
radial-gradient(circle at center, rgba(10, 10, 10, 0.9) 0%, #0a0a0a 100%); |
|
|
overflow: hidden; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.cosmic-web canvas { |
|
|
display: block; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.brand-logo { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.brand-logo:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
|
|
|
.brand-logo img { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 0 15px rgba(15, 240, 252, 0.5), |
|
|
0 0 30px rgba(255, 0, 255, 0.3); |
|
|
} |
|
|
|
|
|
.brand-logo img:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 0 25px rgba(15, 240, 252, 0.7), |
|
|
0 0 45px rgba(255, 0, 255, 0.5); |
|
|
} |
|
|
|
|
|
.columns-container { |
|
|
overflow-x: auto; |
|
|
padding-bottom: 2rem; |
|
|
mask-image: linear-gradient( |
|
|
to right, |
|
|
transparent 0%, |
|
|
black 5%, |
|
|
black 95%, |
|
|
transparent 100% |
|
|
); |
|
|
} |
|
|
|
|
|
.scrolling-column { |
|
|
height: 400px; |
|
|
overflow-y: hidden; |
|
|
position: relative; |
|
|
border-radius: 12px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
background: rgba(20, 20, 20, 0.5); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-down .placeholder-container { |
|
|
animation: scrollDown 20s linear infinite; |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-up .placeholder-container { |
|
|
animation: scrollUp 22s linear infinite; |
|
|
} |
|
|
|
|
|
.placeholder-container { |
|
|
height: 200%; |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
.image-placeholder { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 8px; |
|
|
height: 80px; |
|
|
margin-bottom: 1rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.image-placeholder i { |
|
|
color: rgba(255, 255, 255, 0.3); |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
} |
|
|
|
|
|
.image-placeholder:hover { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-color: rgba(15, 240, 252, 0.3); |
|
|
} |
|
|
|
|
|
@keyframes scrollDown { |
|
|
0% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes scrollUp { |
|
|
0% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.scrolling-columns-container { |
|
|
display: flex; |
|
|
gap: 1.5rem; |
|
|
mask-image: linear-gradient( |
|
|
to right, |
|
|
transparent 0%, |
|
|
black 5%, |
|
|
black 95%, |
|
|
transparent 100% |
|
|
); |
|
|
padding-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.scrolling-column { |
|
|
flex: 0 0 200px; |
|
|
height: 400px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
border-radius: 12px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
background: rgba(20, 20, 20, 0.5); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-down .placeholder-container { |
|
|
animation: scrollDown 20s linear infinite; |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-up .placeholder-container { |
|
|
animation: scrollUp 22s linear infinite; |
|
|
} |
|
|
|
|
|
.placeholder-container { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
padding: 1rem; |
|
|
height: 200%; |
|
|
} |
|
|
|
|
|
.image-placeholder { |
|
|
width: 100%; |
|
|
height: 80px; |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 8px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.image-placeholder i { |
|
|
color: rgba(255, 255, 255, 0.3); |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
} |
|
|
|
|
|
.image-placeholder:hover { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-color: rgba(15, 240, 252, 0.3); |
|
|
} |
|
|
|
|
|
@keyframes scrollDown { |
|
|
0% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes scrollUp { |
|
|
0% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.vertical-scrolling-columns { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 1.5rem; |
|
|
padding: 2rem 0; |
|
|
mask-image: linear-gradient( |
|
|
to right, |
|
|
transparent 0%, |
|
|
black 5%, |
|
|
black 95%, |
|
|
transparent 100% |
|
|
); |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
.scrolling-column { |
|
|
flex: 0 0 150px; |
|
|
height: 500px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-down .placeholder-container { |
|
|
animation: scrollDown 25s linear infinite; |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-up .placeholder-container { |
|
|
animation: scrollUp 30s linear infinite; |
|
|
} |
|
|
|
|
|
.placeholder-container { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
.image-placeholder { |
|
|
width: 150px; |
|
|
height: 150px; |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 8px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.image-placeholder i { |
|
|
color: rgba(255, 255, 255, 0.2); |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
} |
|
|
|
|
|
.image-placeholder:hover { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
@keyframes scrollDown { |
|
|
0% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes scrollUp { |
|
|
0% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.vertical-scrolling-columns { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 1.5rem; |
|
|
padding: 2rem 0; |
|
|
mask-image: linear-gradient( |
|
|
to right, |
|
|
transparent 0%, |
|
|
black 5%, |
|
|
black 95%, |
|
|
transparent 100% |
|
|
); |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
.scrolling-column { |
|
|
flex: 0 0 150px; |
|
|
height: 500px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-down .placeholder-container { |
|
|
animation: scrollDown 25s linear infinite; |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-up .placeholder-container { |
|
|
animation: scrollUp 30s linear infinite; |
|
|
} |
|
|
|
|
|
.placeholder-container { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
.image-placeholder { |
|
|
width: 150px; |
|
|
height: 150px; |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 8px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.image-placeholder i { |
|
|
color: rgba(255, 255, 255, 0.2); |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
} |
|
|
|
|
|
.image-placeholder:hover { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
@keyframes scrollDown { |
|
|
0% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes scrollUp { |
|
|
0% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.vertical-scrolling-columns { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 2rem; |
|
|
padding: 2rem 0; |
|
|
margin: 0 auto; |
|
|
max-width: 1200px; |
|
|
position: relative; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.scrolling-column { |
|
|
flex: 0 0 150px; |
|
|
height: 500px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-down .placeholder-container { |
|
|
animation: scrollDown 20s linear infinite; |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-up .placeholder-container { |
|
|
animation: scrollUp 22s linear infinite; |
|
|
} |
|
|
|
|
|
.placeholder-container { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1.5rem; |
|
|
padding: 0.5rem; |
|
|
} |
|
|
|
|
|
.image-placeholder { |
|
|
width: 150px; |
|
|
height: 150px; |
|
|
border-radius: 8px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border: 1px solid rgba(15, 240, 252, 0.3); |
|
|
box-shadow: 0 0 10px rgba(15, 240, 252, 0.3), |
|
|
0 0 20px rgba(15, 240, 252, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
background-color: transparent; |
|
|
} |
|
|
|
|
|
.image-placeholder:hover { |
|
|
border-color: rgba(15, 240, 252, 0.8); |
|
|
box-shadow: 0 0 15px rgba(15, 240, 252, 0.5), |
|
|
0 0 30px rgba(15, 240, 252, 0.2); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.image-placeholder i { |
|
|
color: rgba(255, 255, 255, 0.3); |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
} |
|
|
|
|
|
@keyframes scrollDown { |
|
|
0% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes scrollUp { |
|
|
0% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.vertical-scrolling-columns { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 1.5rem; |
|
|
padding: 2rem 0; |
|
|
mask-image: linear-gradient( |
|
|
to right, |
|
|
transparent 0%, |
|
|
black 5%, |
|
|
black 95%, |
|
|
transparent 100% |
|
|
); |
|
|
background: transparent; |
|
|
position: relative; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.scrolling-column { |
|
|
flex: 0 0 150px; |
|
|
height: 500px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-down .placeholder-container { |
|
|
animation: scrollDown 20s linear infinite; |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-up .placeholder-container { |
|
|
animation: scrollUp 22s linear infinite; |
|
|
} |
|
|
|
|
|
.placeholder-container { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
.image-placeholder { |
|
|
width: 150px; |
|
|
height: 150px; |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 8px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border: 1px solid rgba(15, 240, 252, 0.3); |
|
|
box-shadow: 0 0 10px rgba(15, 240, 252, 0.3); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.image-placeholder:hover { |
|
|
border-color: rgba(15, 240, 252, 0.8); |
|
|
box-shadow: 0 0 15px rgba(15, 240, 252, 0.5); |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
.image-placeholder i { |
|
|
color: rgba(255, 255, 255, 0.3); |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
} |
|
|
|
|
|
@keyframes scrollDown { |
|
|
0% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes scrollUp { |
|
|
0% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.vertical-scrolling-columns { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 1.5rem; |
|
|
padding: 2rem 0; |
|
|
mask-image: linear-gradient( |
|
|
to right, |
|
|
transparent 0%, |
|
|
black 5%, |
|
|
black 95%, |
|
|
transparent 100% |
|
|
); |
|
|
position: relative; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.scrolling-column { |
|
|
flex: 0 0 150px; |
|
|
height: 500px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.placeholder-container { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.image-placeholder { |
|
|
width: 150px; |
|
|
height: 150px; |
|
|
border-radius: 8px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border: 1px solid rgba(15, 240, 252, 0.3); |
|
|
box-shadow: 0 0 10px rgba(15, 240, 252, 0.3); |
|
|
transition: all 0.3s ease; |
|
|
background-color: rgba(255, 255, 255, 0.03); |
|
|
} |
|
|
|
|
|
.image-placeholder i { |
|
|
color: rgba(255, 255, 255, 0.3); |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
} |
|
|
|
|
|
.image-placeholder:hover { |
|
|
border-color: rgba(15, 240, 252, 0.8); |
|
|
box-shadow: 0 0 15px rgba(15, 240, 252, 0.5); |
|
|
background-color: rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-down .placeholder-container { |
|
|
animation: scrollDown 20s linear infinite; |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-up .placeholder-container { |
|
|
animation: scrollUp 22s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes scrollDown { |
|
|
0% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes scrollUp { |
|
|
0% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.vertical-scrolling-columns { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 1.5rem; |
|
|
padding: 2rem 0; |
|
|
mask-image: linear-gradient( |
|
|
to right, |
|
|
transparent 0%, |
|
|
black 10%, |
|
|
black 90%, |
|
|
transparent 100% |
|
|
); |
|
|
position: relative; |
|
|
z-index: 10; |
|
|
margin-top: 2rem; |
|
|
} |
|
|
|
|
|
.scrolling-column { |
|
|
flex: 0 0 150px; |
|
|
height: 500px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.placeholder-container { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.image-placeholder { |
|
|
width: 150px; |
|
|
height: 150px; |
|
|
border-radius: 8px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border: 1px solid rgba(15, 240, 252, 0.3); |
|
|
box-shadow: 0 0 10px rgba(15, 240, 252, 0.3); |
|
|
transition: all 0.3s ease; |
|
|
background-color: rgba(255, 255, 255, 0.03); |
|
|
} |
|
|
|
|
|
.image-placeholder i { |
|
|
color: rgba(255, 255, 255, 0.3); |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
} |
|
|
|
|
|
.image-placeholder:hover { |
|
|
border-color: rgba(15, 240, 252, 0.8); |
|
|
box-shadow: 0 0 15px rgba(15, 240, 252, 0.5); |
|
|
background-color: rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-down .placeholder-container { |
|
|
animation: scrollDown 20s linear infinite; |
|
|
} |
|
|
|
|
|
.scrolling-column.scroll-up .placeholder-container { |
|
|
animation: scrollUp 22s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes scrollDown { |
|
|
0% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes scrollUp { |
|
|
0% { |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.cosmic-web::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
background: |
|
|
radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 2%) 0 0, |
|
|
radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 2%) 50px 50px, |
|
|
radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 2%) 100px 100px; |
|
|
background-size: 150px 150px; |
|
|
animation: starMove 100s linear infinite; |
|
|
z-index: 2; |
|
|
pointer-events: none; |
|
|
} |
|
|
@keyframes starMove { |
|
|
from { |
|
|
background-position: 0 0; |
|
|
} |
|
|
to { |
|
|
background-position: 1000px 500px; |
|
|
} |
|
|
} |
|
|
|
|
|
.cosmic-web::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
background: |
|
|
radial-gradient(circle at center, transparent 60%, rgba(15, 240, 252, 0.05) 80%, transparent 100%); |
|
|
animation: pulseWave 12s infinite ease-in-out; |
|
|
z-index: 2; |
|
|
pointer-events: none; |
|
|
} |
|
|
@keyframes pulseWave { |
|
|
0%, 100% { |
|
|
transform: scale(1); |
|
|
opacity: 0.2; |
|
|
} |
|
|
50% { |
|
|
transform: scale(1.2); |
|
|
opacity: 0.5; |
|
|
} |
|
|
} |
|
|
|
