276 lines
6.4 KiB
CSS
276 lines
6.4 KiB
CSS
/* Lili Record's Custom Styles - Metallic & Neon Edition */
|
|
|
|
:root {
|
|
--primary-neon: #FF007F;
|
|
--secondary-neon: #00F2FF;
|
|
--metallic-silver: #c0c0c0;
|
|
--metallic-dark: #2c2c2c;
|
|
--vinyl-black: #050505;
|
|
}
|
|
|
|
body {
|
|
background-color: #050505;
|
|
background-image:
|
|
radial-gradient(at 0% 0%, rgba(255, 0, 127, 0.15) 0px, transparent 50%),
|
|
radial-gradient(at 100% 100%, rgba(0, 242, 255, 0.15) 0px, transparent 50%);
|
|
min-height: 100vh;
|
|
color: #eee;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--primary-neon), #e60072);
|
|
border: none;
|
|
box-shadow: 0 0 20px rgba(255, 0, 127, 0.4);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 30px rgba(255, 0, 127, 0.7);
|
|
}
|
|
|
|
/* Vinyl Record Player */
|
|
.player-container {
|
|
position: relative;
|
|
width: 400px;
|
|
height: 400px;
|
|
margin: 0 auto;
|
|
background: linear-gradient(145deg, #333, #111);
|
|
border-radius: 30px;
|
|
padding: 25px;
|
|
border: 2px solid rgba(255,255,255,0.05);
|
|
box-shadow:
|
|
inset 0 0 80px #000,
|
|
0 20px 60px rgba(0,0,0,0.8),
|
|
0 0 40px rgba(0, 242, 255, 0.05);
|
|
}
|
|
|
|
.vinyl-disk {
|
|
width: 350px;
|
|
height: 350px;
|
|
background: radial-gradient(circle, #222 0%, #111 20%, #050505 100%);
|
|
border-radius: 50%;
|
|
position: relative;
|
|
box-shadow: 0 0 30px rgba(0,0,0,1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-image: repeating-radial-gradient(
|
|
circle,
|
|
rgba(255,255,255,0.03) 0,
|
|
rgba(255,255,255,0.03) 1px,
|
|
transparent 1px,
|
|
transparent 3px
|
|
);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Metallic Shine */
|
|
.vinyl-disk::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
border-radius: 50%;
|
|
background: conic-gradient(
|
|
from 0deg,
|
|
transparent 0deg,
|
|
rgba(255,255,255,0.05) 45deg,
|
|
transparent 90deg,
|
|
rgba(255,255,255,0.05) 135deg,
|
|
transparent 180deg,
|
|
rgba(255,255,255,0.05) 225deg,
|
|
transparent 270deg,
|
|
rgba(255,255,255,0.05) 315deg,
|
|
transparent 360deg
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.vinyl-label {
|
|
width: 140px;
|
|
height: 140px;
|
|
background-color: var(--primary-neon);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.5s ease;
|
|
border: 6px solid #111;
|
|
z-index: 2;
|
|
overflow: hidden;
|
|
background: #fff; /* White bg for logo fallback */
|
|
}
|
|
|
|
.tonearm {
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 40px;
|
|
width: 24px;
|
|
height: 200px;
|
|
background: linear-gradient(to right, #666, #999, #666);
|
|
border-radius: 12px;
|
|
transform-origin: 50% 15px;
|
|
transform: rotate(-35deg);
|
|
transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
z-index: 10;
|
|
box-shadow: 4px 4px 10px rgba(0,0,0,0.6);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.tonearm::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 30px;
|
|
height: 40px;
|
|
background: #333;
|
|
border-radius: 4px;
|
|
border: 2px solid #555;
|
|
}
|
|
|
|
.tonearm.active {
|
|
transform: rotate(10deg);
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.vinyl-disk.spinning {
|
|
animation: spin 3.5s linear infinite;
|
|
}
|
|
|
|
/* WhatsApp Floating Button */
|
|
.whatsapp-float {
|
|
position: fixed;
|
|
width: 60px;
|
|
height: 60px;
|
|
bottom: 40px;
|
|
right: 40px;
|
|
background-color: #25d366;
|
|
color: #fff;
|
|
border-radius: 50px;
|
|
text-align: center;
|
|
font-size: 30px;
|
|
box-shadow: 0 0 20px rgba(37, 211, 102, 0.5);
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.whatsapp-float:hover {
|
|
transform: scale(1.1);
|
|
background-color: #128c7e;
|
|
box-shadow: 0 0 30px rgba(37, 211, 102, 0.8);
|
|
color: #fff;
|
|
}
|
|
|
|
.whatsapp-footer:hover {
|
|
filter: brightness(1.2);
|
|
text-shadow: 0 0 10px rgba(37, 211, 102, 0.5);
|
|
}
|
|
|
|
/* Visualizer Waves */
|
|
.visualizer-container {
|
|
height: 60px;
|
|
width: 100%;
|
|
}
|
|
|
|
.v-bar {
|
|
width: 6px;
|
|
height: 4px;
|
|
background: linear-gradient(to top, var(--secondary-neon), var(--primary-neon));
|
|
border-radius: 3px;
|
|
opacity: 0.5;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.visualizer-container.playing .v-bar {
|
|
opacity: 1;
|
|
animation: wave 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
.v-bar:nth-child(1) { animation-delay: 0.0s; }
|
|
.v-bar:nth-child(2) { animation-delay: 0.1s; }
|
|
.v-bar:nth-child(3) { animation-delay: 0.2s; }
|
|
.v-bar:nth-child(4) { animation-delay: 0.3s; }
|
|
.v-bar:nth-child(5) { animation-delay: 0.4s; }
|
|
.v-bar:nth-child(6) { animation-delay: 0.5s; }
|
|
.v-bar:nth-child(7) { animation-delay: 0.6s; }
|
|
.v-bar:nth-child(8) { animation-delay: 0.7s; }
|
|
.v-bar:nth-child(9) { animation-delay: 0.8s; }
|
|
.v-bar:nth-child(10) { animation-delay: 0.9s; }
|
|
.v-bar:nth-child(11) { animation-delay: 0.1s; }
|
|
.v-bar:nth-child(12) { animation-delay: 0.2s; }
|
|
.v-bar:nth-child(13) { animation-delay: 0.3s; }
|
|
.v-bar:nth-child(14) { animation-delay: 0.4s; }
|
|
.v-bar:nth-child(15) { animation-delay: 0.5s; }
|
|
.v-bar:nth-child(16) { animation-delay: 0.6s; }
|
|
.v-bar:nth-child(17) { animation-delay: 0.7s; }
|
|
.v-bar:nth-child(18) { animation-delay: 0.8s; }
|
|
.v-bar:nth-child(19) { animation-delay: 0.9s; }
|
|
.v-bar:nth-child(20) { animation-delay: 0.0s; }
|
|
|
|
@keyframes wave {
|
|
0%, 100% {
|
|
height: 4px;
|
|
filter: brightness(1);
|
|
}
|
|
50% {
|
|
height: 50px;
|
|
filter: brightness(1.5);
|
|
box-shadow: 0 0 15px var(--primary-neon);
|
|
}
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 992px) {
|
|
.player-container {
|
|
width: 320px;
|
|
height: 320px;
|
|
}
|
|
.vinyl-disk {
|
|
width: 270px;
|
|
height: 270px;
|
|
}
|
|
.vinyl-label {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
.tonearm {
|
|
height: 160px;
|
|
right: 30px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.player-container {
|
|
width: 280px;
|
|
height: 280px;
|
|
}
|
|
.vinyl-disk {
|
|
width: 230px;
|
|
height: 230px;
|
|
}
|
|
.vinyl-label {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.tonearm {
|
|
height: 140px;
|
|
}
|
|
.whatsapp-float {
|
|
width: 50px;
|
|
height: 50px;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
font-size: 25px;
|
|
}
|
|
} |