Spaces:
Running
Running
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
body { | |
font-family: 'Arial', sans-serif; | |
background: #000; | |
color: #fff; | |
overflow-x: hidden; | |
position: relative; | |
min-height: 100vh; | |
} | |
.cosmo-bg { | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: linear-gradient(135deg, rgba(0, 255, 204, 0.15), rgba(255, 0, 122, 0.15), #000 80%); | |
z-index: -2; | |
animation: cosmoShift 25s infinite ease-in-out; | |
} | |
@keyframes cosmoShift { | |
0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; } | |
50% { transform: scale(1.2) rotate(10deg); opacity: 1; } | |
} | |
#cosmo-canvas { | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
z-index: -1; | |
pointer-events: none; | |
mix-blend-mode: screen; | |
} | |
.container { | |
max-width: 1800px; | |
margin: 0 auto; | |
padding: 4rem; | |
position: relative; | |
z-index: 1; | |
} | |
header { | |
text-align: center; | |
padding: 8rem 0; | |
} | |
.cosmo-title { | |
font-size: 9rem; | |
font-weight: 900; | |
text-transform: uppercase; | |
background: linear-gradient(135deg, #00ffcc, #ff007a, #fff, #00ffcc); | |
background-size: 200%; | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
filter: drop-shadow(0 0 50px rgba(0, 255, 204, 0.9)); | |
animation: cosmoGlow 5s infinite, cosmoFlow 12s infinite; | |
} | |
@keyframes cosmoGlow { | |
0%, 100% { transform: translateZ(0) scale(1); } | |
50% { transform: translateZ(200px) scale(1.1); } | |
} | |
@keyframes cosmoFlow { | |
0% { background-position: 0%; } | |
100% { background-position: 200%; } | |
} | |
.subtitle { | |
font-size: 2.5rem; | |
opacity: 0.9; | |
margin-top: 2rem; | |
background: linear-gradient(90deg, #00ffcc, #ff007a); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
text-shadow: 0 0 25px rgba(255, 255, 255, 0.8); | |
animation: fadeIn 4s ease-in-out; | |
} | |
.header-cream { | |
width: 30%; /* Увеличено */ | |
max-width: 400px; /* Увеличено */ | |
margin-top: 3rem; | |
filter: drop-shadow(0 0 50px rgba(0, 255, 204, 1)) brightness(1.2); /* Улучшено освещение */ | |
animation: floatHeader 8s infinite ease-in-out; | |
} | |
@keyframes floatHeader { | |
0%, 100% { transform: translateY(0); } | |
50% { transform: translateY(-30px); } /* Увеличено смещение */ | |
} | |
@keyframes fadeIn { | |
0% { opacity: 0; transform: translateY(30px); } | |
100% { opacity: 0.9; transform: translateY(0); } | |
} | |
.hero { | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
padding: 5rem 0; | |
flex-wrap: wrap; | |
gap: 6rem; | |
} | |
.cosmo-product { | |
width: 50%; | |
height: 50rem; /* Увеличено */ | |
position: relative; | |
transform-style: preserve-3d; | |
transition: transform 0.8s ease; | |
} | |
.holo-layer { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
} | |
.layer-1 { | |
background: url('cream.png') no-repeat center/contain; | |
filter: drop-shadow(0 0 100px rgba(0, 255, 204, 1)) brightness(1.6); /* Улучшено освещение */ | |
animation: holoFloat 12s infinite ease-in-out; | |
} | |
.layer-2 { | |
background: radial-gradient(circle, rgba(0, 255, 204, 0.6), transparent 70%); | |
filter: blur(25px); | |
animation: holoPulse 6s infinite ease-in-out; | |
} | |
.layer-3 { | |
background: radial-gradient(circle, rgba(255, 0, 122, 0.4), transparent 70%); | |
filter: blur(15px); | |
animation: holoPulse 8s infinite ease-in-out reverse; | |
} | |
@keyframes holoFloat { | |
0%, 100% { transform: translateY(0) rotateZ(5deg) translateZ(0); } | |
50% { transform: translateY(-70px) rotateZ(-5deg) translateZ(200px); } /* Увеличено смещение */ | |
} | |
@keyframes holoPulse { | |
0%, 100% { opacity: 0.6; transform: scale(1); } | |
50% { opacity: 0.9; transform: scale(1.2); } /* Увеличено масштабирование */ | |
} | |
.hero-text { | |
width: 45%; | |
} | |
.hero-text h2 { | |
font-size: 4.5rem; | |
margin-bottom: 3rem; | |
background: linear-gradient(90deg, #00ffcc, #ff007a, #fff); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
text-shadow: 0 0 30px rgba(0, 255, 204, 1); | |
animation: textGlow 4s infinite; | |
} | |
@keyframes textGlow { | |
0%, 100% { text-shadow: 0 0 30px rgba(0, 255, 204, 1); } | |
50% { text-shadow: 0 0 40px rgba(255, 0, 122, 1); } | |
} | |
.cosmo-button { | |
padding: 2rem 6rem; | |
font-size: 2.2rem; | |
border: none; | |
background: linear-gradient(45deg, #00ffcc, #ff007a, #fff, #00ffcc); | |
background-size: 300%; | |
color: #000; | |
border-radius: 200px; | |
cursor: pointer; | |
transition: transform 0.6s, filter 0.6s, background-position 0.6s; | |
box-shadow: 0 0 50px rgba(0, 255, 204, 1); | |
animation: cosmoButton 5s infinite; | |
} | |
.cosmo-button:hover { | |
transform: scale(1.3) translateZ(70px); | |
filter: brightness(1.6); | |
background-position: 100%; | |
} | |
@keyframes cosmoButton { | |
0%, 100% { box-shadow: 0 0 50px rgba(0, 255, 204, 1); } | |
50% { box-shadow: 0 0 70px rgba(255, 0, 122, 1); } | |
} | |
.features { | |
display: flex; | |
justify-content: space-around; | |
padding: 8rem 0; | |
flex-wrap: wrap; | |
gap: 5rem; | |
} | |
.cosmo-pod { | |
width: 30%; | |
padding: 3.5rem; | |
background: linear-gradient(135deg, rgba(0, 255, 204, 0.05), rgba(255, 0, 122, 0.05)); | |
border-radius: 35px; | |
text-align: center; | |
transition: all 0.8s ease; | |
backdrop-filter: blur(25px); | |
border: 2px solid rgba(0, 255, 204, 0.5); | |
transform-style: preserve-3d; | |
} | |
.cosmo-pod:hover, .cosmo-pod.active { | |
transform: translateY(-40px) scale(1.25) translateZ(40px); | |
background: linear-gradient(45deg, rgba(0, 255, 204, 0.3), rgba(255, 0, 122, 0.3)); | |
box-shadow: 0 0 60px rgba(0, 255, 204, 1); | |
} | |
.cosmo-pod h3 { | |
font-size: 2.2rem; | |
margin-bottom: 1.5rem; | |
background: linear-gradient(90deg, #00ffcc, #ff007a); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
} | |
/* Адаптация для мобильных */ | |
@media (max-width: 768px) { | |
.cosmo-title { | |
font-size: 5rem; | |
} | |
.subtitle { | |
font-size: 1.8rem; | |
} | |
.header-cream { | |
width: 50%; | |
max-width: 250px; | |
} | |
.hero { | |
flex-direction: column; | |
text-align: center; | |
padding: 3rem 0; | |
} | |
.cosmo-product { | |
width: 90%; | |
height: 30rem; | |
} | |
.hero-text { | |
width: 100%; | |
} | |
.hero-text h2 { | |
font-size: 3rem; | |
} | |
.cosmo-button { | |
padding: 1.5rem 4rem; | |
font-size: 1.8rem; | |
} | |
.features { | |
padding: 5rem 0; | |
} | |
.cosmo-pod { | |
width: 90%; | |
} | |
} | |
@media (max-width: 480px) { | |
.cosmo-title { | |
font-size: 3.5rem; | |
} | |
.subtitle { | |
font-size: 1.4rem; | |
} | |
.header-cream { | |
width: 60%; | |
max-width: 180px; | |
} | |
.hero-text h2 { | |
font-size: 2rem; | |
} | |
.cosmo-pod h3 { | |
font-size: 1.6rem; | |
} | |
} | |