Testlend2 / styles.css
flpolprojects's picture
Update styles.css
cf9055f verified
* {
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;
}
}