*{
box-sizing:border-box;
}
html,
body{
margin:0;
padding:0;
background:
radial-gradient(
circle at top,
#26324a,
#090b12 60%
);
font-family:
Inter,
Arial,
sans-serif;
color:white;
min-height:100vh;
}
body{
overflow-x:hidden;
}
/* APP */
.app{
width:100%;
max-width:760px;
margin:auto;
padding:
25px
18px
40px;
}
/* BLOCS */
.title,
.acc-button,
.arr-button,
.rec-button,
.waveform,
.reecouter,
.linkA,
.linkV,
.link{
width:100%;
min-height:105px;
margin:
18px 0;
border-radius:26px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
cursor:pointer;
overflow:hidden;
transition:
transform .2s,
box-shadow .2s;
}
.title:hover,
.acc-button:hover,
.arr-button:hover,
.rec-button:hover,
.waveform:hover,
.reecouter:hover,
.link:hover{
transform:
translateY(-3px);
}
/* TITRE */
.title{
height:130px;
background:
linear-gradient(
135deg,
#00ff87,
#00b4d8
);
box-shadow:
0 15px 40px #00ff8750;
}
.text_title{
font-size:48px;
font-weight:900;
letter-spacing:2px;
}
/* ACCORD */
.acc-button{
background:
linear-gradient(
135deg,
#4facfe,
#00f2fe
);
box-shadow:
0 10px 30px #00eaff40;
flex-direction:column;
padding:20px;
gap:15px;
}
.arr-button{
background:
linear-gradient(
135deg,
#ffb347,
#ff6b00
);
box-shadow:
0 10px 30px #ff880050;
}
/* RECORD */
.rec-button{
background:
linear-gradient(
135deg,
#161616,
#050505
);
border:
2px solid #ff2851;
box-shadow:
0 10px 35px #ff285150;
}
/* WAVEFORM */
.waveform{
height:180px;
background:
linear-gradient(
145deg,
#050505,
#151515
);
border:
2px solid #8cff70;
box-shadow:
inset 0 0 30px #8cff7030;
}
.visualizer{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
/* REECOUTE */
.reecouter{
background:
linear-gradient(
135deg,
#8e2de2,
#4a00e0
);
box-shadow:
0 12px 35px #8e2de250;
}
/* VIDEO */
.screen{
margin-top:30px;
height:65vh;
min-height:350px;
background:#000;
border-radius:30px;
overflow:hidden;
position:relative;
box-shadow:
0 20px 60px #000;
}
video{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* CALQUES */
.calque,
.calque2,
.calque3{
position:absolute;
top:50%;
left:50%;
transform:
translate(-50%,-50%);
z-index:20;
font-size:75px;
font-weight:900;
text-shadow:
0 0 25px black;
}
.calque3{
cursor:pointer;
color:#00ffcc;
}
/* TEXTES */
.text{
position:absolute;
left:25px;
z-index:30;
}
.text_menu{
font-size:26px;
font-weight:700;
}
/* SELECT */
/* SELECT SONG */
.select_song{
width:min(100%, 500px);
height:70px;
border-radius:20px;
border:3px solid #ffffff;
background:#ffffff;
color:#111111;
padding:0 60px 0 24px;
font-size:24px;
font-weight:800;
cursor:pointer;
box-shadow:
0 10px 30px rgba(0,0,0,.25);
appearance:none;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23111'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 20px center;
}
.select_song:hover{
transform:scale(1.02);
}
.select_song:focus{
outline:none;
border-color:#00ff87;
box-shadow:
0 0 0 4px rgba(0,255,135,.3),
0 10px 30px rgba(0,0,0,.25);
}
/* DOWNLOAD */
.linkA{
background:
linear-gradient(
135deg,
#007991,
#78ffd6
);
}
.linkV{
background:
linear-gradient(
135deg,
#654ea3,
#eaafc8
);
}
.link{
background:
linear-gradient(
135deg,
#2193b0,
#6dd5ed
);
}
/* ICONES */
.svg-icon{
width:38px;
height:38px;
stroke:white;
fill:none;
stroke-width:2.5;
}
/* TABLET */
@media(max-width:700px){
.app{
padding:
18px 12px;
}
.text_title{
font-size:36px;
}
.text_menu{
font-size:21px;
}
.screen{
height:55vh;
}
.calque,
.calque2,
.calque3{
font-size:55px;
}
}
/* PETIT MOBILE */
@media(max-width:420px){
.acc-button{
min-height:auto;
padding:20px;
}
.acc-button .text{
display:none;
}
.text_menu{
width:100%;
}
.select_song{
width:100%;
max-width:none;
height:60px;
font-size:12px;
}
}