html,
body{
width: 100%;
height: 100%;
margin: 0;
min-height: 100vh; /* fallback */
min-height: 100dvh; /* utilisé par les navigateurs récents */
overflow:hidden;
font-family:
"Helvetica Neue",
Arial,
sans-serif;
}
:root{
--cyan:
#FFE169;
--blue:
#DC143C;
--violet:
#FF8000;
--purple:
#FFFBF5;
--pink:
#DD666E;
--green:
#FF5967;
--azure:
#FFB400;
--aurora-opacity:
.9;
--aurora-blur:
200px;
--aurora-speed:
1s;
}
body{
display:flex;
justify-content:center;
align-items:center;
background:
#FFFFFF;
position:relative;
}
.aurora{
position:fixed;
inset:0;
width:100%;
height:100%;
overflow:hidden;
z-index:-2;
}
.blob{
position:absolute;
border-radius:50%;
filter:
blur(var(--aurora-blur));
opacity:
var(--aurora-opacity);
mix-blend-mode:
plus-lighter;
will-change:
transform;
}
.b1{
width:900px;
height:900px;
background:
var(--cyan);
left:-3px;
top:-250px;
animation:
moveBlob1
36s
infinite
alternate
ease-in-out;
}
.b2{
width:1800px;
height:800px;
background:
var(--blue);
right:-750px;
top:-400px;
animation:
moveBlob2
47s
infinite
alternate
ease-in-out;
}
.b3{
width:850px;
height:850px;
background:
var(--violet);
left:2%;
bottom:-400px;
animation:
moveBlob3
54s
infinite
alternate
ease-in-out;
}
.b4{
width:650px;
height:650px;
background:
var(--pink);
right:10%;
bottom:-200px;
animation:
moveBlob4
42s
infinite
alternate
ease-in-out;
}
.b5{
width:1200px;
height:1200px;
background:
var(--green);
left:-500px;
bottom:-2%;
animation:
moveBlob5
28s
infinite
alternate
ease-in-out;
}
.b6{
width:1000px;
height:1000px;
background:
var(--azure);
right:-400px;
top:40%;
animation:
moveBlob6
46s
infinite
alternate
ease-in-out;
}
.b7{
width:1200px;
height:1200px;
background:
var(--purple);
left:22%;
top:0%;
animation:
moveBlob7
41s
infinite
alternate
ease-in-out;
}
@keyframes moveBlob1{
0%{
transform:
translate(-150px,-120px)
scale(1)
rotate(0deg);
}
25%{
transform:
translate(80px,40px)
scale(1.25)
rotate(60deg);
}
50%{
transform:
translate(280px,-100px)
scale(.95)
rotate(150deg);
}
75%{
transform:
translate(120px,250px)
scale(1.35)
rotate(250deg);
}
100%{
transform:
translate(-120px,80px)
scale(1.05)
rotate(360deg);
}
}
@keyframes moveBlob2{
0%{
transform:
translate(120px,-80px)
scale(.9);
}
30%{
transform:
translate(-250px,100px)
scale(1.3);
}
60%{
transform:
translate(-80px,280px)
scale(1);
}
100%{
transform:
translate(220px,-150px)
scale(1.25);
}
}
@keyframes moveBlob3{
0%{
transform:
translate(-80px,120px)
scale(1);
}
35%{
transform:
translate(180px,-100px)
scale(1.25);
}
70%{
transform:
translate(-220px,-180px)
scale(.9);
}
100%{
transform:
translate(80px,100px)
scale(1.35);
}
}
@keyframes moveBlob4{
0%{
transform:
translate(100px,80px)
scale(1);
}
25%{
transform:
translate(-220px,-120px)
scale(1.3);
}
50%{
transform:
translate(-80px,220px)
scale(.85);
}
100%{
transform:
translate(250px,-100px)
scale(1.2);
}
}
@keyframes moveBlob5{
0%{
transform:
translate(-100px,100px)
scale(1);
}
50%{
transform:
translate(200px,-200px)
scale(0.4);
}
100%{
transform:
translate(350px,80px)
scale(1.1);
}
}
@keyframes moveBlob6{
0%{
transform:
translate(200px,-200px)
scale(1);
}
30%{
transform:
translate(-250px,50px)
scale(1.35);
}
70%{
transform:
translate(-100px,300px)
scale(.95);
}
100%{
transform:
translate(300px,100px)
scale(1.25);
}
}
@keyframes moveBlob7{
0%{
transform:
translate(0,0)
scale(1);
}
25%{
transform:
translate(-300px,120px)
scale(0.35);
}
50%{
transform:
translate(200px,250px)
scale(.9);
}
75%{
transform:
translate(300px,-150px)
scale(1.4);
}
100%{
transform:
translate(-100px,-100px)
scale(1);
}
}
.logo{
width:65%;
position:relative;
z-index:5;
cursor:pointer;
filter:
drop-shadow(
0 0px 0px rgba(255,255,255,0)
)
drop-shadow(
0 0px 10px rgba(0,0,0,.0)
)
drop-shadow(
0 0px 50px rgba(0,0,0,.0)
)
drop-shadow(
0 0px 0px rgba(255,255,255,0)
) ;
}
.logo{
mix-blend-mode:
hard-light;
}
.logo{
opacity:.97;
}
@media(max-width:768px){
.logo{
width:85%;
}
:root{
--aurora-blur:70px;
}
}
@media(max-width:430px){
.logo{
width:85%;
}
:root{
--aurora-blur:70px;
}
}