html {
font-size: 16px;
}
body {
margin: 0;
padding: 0;
height: 100%;
font-family: "Nunito", sans-serif;
overflow: hidden;
max-width: 1600px;
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
}
#background-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: -1;
}
.background-audio {
position: absolute;
visibility: hidden;
}
audio {
display: none;
}
/* === MOUETTE ANIMEE === */
#mouette {
position: fixed;
height: auto;
width: clamp(2.5rem, 12vw, 42.5rem);
bottom: 0.9rem;
right: 0.9rem;
z-index: 10;
pointer-events: none;
transform: translate(0, 0);
-webkit-animation: volMouette 12s cubic-bezier(0.25, 1, 0.5, 1) forwards;
animation: volMouette 12s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@-webkit-keyframes volMouette {
0% {
-webkit-transform: translate(-100vw, -100vh);
opacity: 0;
}
100% {
-webkit-transform: translate(0, 0);
opacity: 1;
}
}
@keyframes volMouette {
0% {
transform: translate(-100vw, -100vh);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
/* === DANSE DES MOTS CROATIE > HRVATSKA === */
.titre-danseur {
position: absolute;
bottom: 0;
left: 0;
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
font-family: 'Kaushan Script', cursive;
font-weight: 700;
font-size: clamp(2.5rem, 7.5vw, 27.5rem);
padding: 0.3em 0.3em;
box-sizing: border-box;
text-align: center;
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(#ff0000), color-stop(#ff0000), color-stop(#ff0000), color-stop(#ffffff), color-stop(#ffffff), color-stop(#0000ff), color-stop(#0000ff), color-stop(#0000ff), to(#0000ff));
background: linear-gradient(180deg, #ff0000, #ff0000, #ff0000, #ff0000, #ffffff, #ffffff, #0000ff, #0000ff, #0000ff, #0000ff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 0 0.05em rgba(0, 0, 0, 0.2);
z-index: 5;
opacity: 0;
-webkit-animation: slideInDiagonal 12s cubic-bezier(0.66, 0, 0.34, 1) forwards;
animation: slideInDiagonal 12s cubic-bezier(0.66, 0, 0.34, 1) forwards;
transition: opacity 0.5s ease-in-out;
}
@-webkit-keyframes slideInDiagonal {
0% {
-webkit-transform: translate(0, 0);
opacity: 0.4;
}
50% {
-webkit-transform: translate(18vw, -10vh);
opacity: 0.8;
}
100% {
-webkit-transform: translate(-50%, 0);
bottom: 72%;
left: 50%;
opacity: 1;
}
}
@keyframes slideInDiagonal {
0% {
transform: translate(0, 0);
opacity: 0.4;
}
50% {
transform: translate(18vw, -10vh);
opacity: 0.8;
}
100% {
transform: translate(-50%, 0);
bottom: 72%;
left: 50%;
opacity: 1;
}
}
.titre-danseur:hover {
letter-spacing: 0.05em;
transition: letter-spacing 0.3s ease;
}
/* === ENTER BOUTON === */
#enter-btn {
position: absolute;
bottom: -10rem;
left: 50%;
transform: translateX(-50%) translateY(0);
font-family: 'Kaushan Script', cursive;
font-weight: 600;
background: linear-gradient(180deg, #ff7f50, #ff6347);
color: white;
border: none;
padding: clamp(0.8rem, 1.5vw, 1.2rem) clamp(1.5rem, 3vw, 2.5rem);
font-size: clamp(1rem, 1.8vw, 7.7rem);
text-align: center;
border-radius: 25px;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease-in-out;
z-index: 20;
}
#enter-btn.show {
animation: boutonEntree 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
pointer-events: auto;
}
@keyframes boutonEntree {
0% {
opacity: 0;
bottom: -10rem;
}
100% {
opacity: 1;
bottom: 56%;
transform: translate(-50%, 50%);
}
}
#enter-btn:hover {
transform: translate(-50%, 45%);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
/* === CREDIT BOUTON === */
#credit-btn {
position: absolute;
bottom: -10rem;
left: 50%;
transform: translateX(-50%) translateY(0);
font-family: "Nunito", sans-serif;
font-size: clamp(0.7rem, 1.3vw, 5.55rem);
font-weight: 300;
color: white;
border: none;
padding: 0.5em 1em;
text-align: center;
border-radius: 25px;
opacity: 0;
pointer-events: none;
z-index: 19;
transition: all 0.3s ease-in-out;
background: transparent;
}
#credit-btn.show {
animation: creditEntree 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
pointer-events: none;
}
@keyframes creditEntree {
0% {
opacity: 0;
bottom: -10rem;
}
100% {
opacity: 1;
bottom: 36%;
transform: translate(-50%, 50%);
}
}
/* === MESSAGE BOUTON === */
#message-btn {
position: absolute;
bottom: -10rem;
left: 50%;
transform: translateX(-50%) translateY(0);
font-family: "Nunito", sans-serif;
font-size: clamp(0.7rem, 1.3vw, 5.55rem);
font-weight: 300;
color: white;
border: none;
padding: 0.4em 0.8em;
border-radius: 25px;
text-align: center;
opacity: 0;
pointer-events: none;
z-index: 18;
background: transparent;
}
#message-btn.show {
animation: messageBtnEntree 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes messageBtnEntree {
0% {
opacity: 0;
bottom: -10rem;
}
100% {
opacity: 1;
bottom: 29%;
transform: translate(-50%, 50%);
}
}
/* === CGU BOUTON === */
#cgu-btn {
position: absolute;
bottom: -10rem;
left: 50%;
transform: translateX(-50%) translateY(0);
font-family: "Nunito", sans-serif;
font-size: clamp(0.6rem, 0.9vw, 3.85rem);
font-weight: 100;
color: white;
border: none;
padding: 0.3em 0.6em;
border-radius: 25px;
opacity: 0;
pointer-events: auto;
text-align: center;
z-index: 10;
background: transparent;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.3em;
}
#cgu-btn a {
white-space: nowrap;
color: white;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
#cgu-btn a:hover {
color: #ddddff;
}
#cgu-btn .separator {
margin: 0 0.2em;
}
#cgu-btn.show {
animation: cguEntree 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes cguEntree {
0% {
opacity: 0;
bottom: -10rem;
}
100% {
opacity: 1;
bottom: 0.9rem;
transform: translateX(-50%) translateY(0);
}
}
.separator-central {
margin: 0 0.3em;
color: white;
font-size: inherit;
line-height: 1;
display: inline-block;
}
/* === MEDIAS QUERIES === */
/* === Taille Mouette en mode portrait === */
@media (orientation: portrait) {
#mouette {
width: clamp(4rem, 19.2vw, 68rem); /* Taille augmentée de 60% */
}
}
/* === modification du cgu-btn en portrait -380 === */
@media (max-width: 389px) and (orientation: portrait) {
#cgu-btn {
flex-direction: column;
gap: 0.1em; /* Plus fin pour mobile */
}
.cgu-ligne {
display: flex;
justify-content: center;
gap: 0.3em;
}
#cgu-btn .separator {
margin: 0 0.2em;
}
}
/* === rajout d'un separator en portrait au dessus de 390px === */
@media (max-width: 389px) and (orientation: portrait) {
.separator-central {
display: none;
}
}
/* === Modification de toutes les fonts +40% en mode portrait === */
@media (min-width: 600px) and (orientation: portrait) {
.titre-danseur {
font-size: clamp(3.5rem, 10.5vw, 38.5rem);
}
#enter-btn {
font-size: clamp(1.4rem, 2.52vw, 10.78rem);
}
#credit-btn,
#message-btn {
font-size: clamp(0.98rem, 1.82vw, 7.77rem);
}
#cgu-btn {
font-size: clamp(0.84rem, 1.26vw, 5.39rem);
}
}
/* === NEXT === */