@font-face{ font-family:"Rosa Black Sans"; src:url("fonts/hinted-RosaSans-Black.ttf") format("truetype"); font-weight:normal; font-style:normal; } @font-face{ font-family:"Rosa Black Italic"; src:url("/fonts/hinted-RosaSans-BlackItalic.ttf") format("truetype"); font-weight:normal; font-style:italic; } @font-face{font-family:"Rosa Black Bold"; src:url("/fonts/hinted-RosaSans-Bold.ttf") format("truetype"); font-weight:bold; font-style:normal; } .section-center{ position:absolute; top:50%; left:0; display:block; width:100%; padding:0; margin:0; z-index:6; text-align:center; transform:translateY(-50%); } [type=checkbox]:checked,[type=checkbox]:not(:checked) { position:absolute; left:-99999px; } .menu-icon:checked+label,.menu-icon:not(:checked)+label{ position:fixed; top:170px; left:75px; display:block; width:70px; height:70px; padding:0; margin:0; cursor:pointer; z-index:10; } .menu-bulle { position:fixed; top:150px; left:50px; display:block; width:80px; height:80px; padding:0; margin:0; z-index:9; overflow:hidden; background-color:#fff487; animation:border-transform 7s linear infinite; transition:top 350ms 1100ms cubic-bezier(.32, 1, .23, 1),right 350ms 1100ms cubic-bezier(.32, 1, .23, 1), transform 250ms 1100ms ease,width 650ms 400ms cubic-bezier(.32, 1, .23, 1),height 650ms 400ms cubic-bezier(.32, 1, .23, 1); } .menu-icon:checked+label:before,.menu-icon:not(:checked)+label:before { position:absolute; content:""; display:block; width:30px; height:20px; z-index:20; top:0; left:0; border-top:2px solid #45050c; border-bottom:2px solid #45050c; transition:border-width 100ms 1500ms ease,top 100ms 1600ms cubic-bezier(.32, 1, .23, 1),height 100ms 1600ms cubic-bezier(.23, 1, .32, 1), background-color 200ms ease,transform 200ms cubic-bezier(.32, 1, .23, 1); } .menu-icon:checked+label:after,.menu-icon:not(:checked)+label:after { position:absolute; content:""; display:block; width:22px; height:2px; z-index:20; top:10px; left:0px; background-color:#45050c; margin-top:-1px; transition:width 100ms 1750ms ease,right 100ms 1750ms ease,margin-top 100ms ease,transform 200ms cubic-bezier(.32, 1, .23, 1); } .menu-icon:checked+label:before{ top:10px; transform:rotate(45deg); height:2px; background-color:#45050c; border-width:0; transition:border-width 100ms 340ms ease,top 100ms 300ms cubic-bezier(.32, 1, .23, 1),height 100ms 300ms cubic-bezier(.32, 1, .23, 1),background-color 200ms 500ms ease,transform 200ms 1700ms cubic-bezier(.32, 1, .23, 1); } .menu-icon:checked+label:after{ width:30px; margin-top:0; transform:rotate(-45deg); transition:width 100ms ease,right 100ms ease,margin-top 100ms 500ms ease,transform 200ms 1700ms cubic-bezier(.32, 1, .23, 1); } @keyframes border-transform{0%, 100% {border-radius:63% 37% 54% 46%/55% 48% 52% 45%}14% {border-radius:40% 60% 54% 46%/49% 60% 40% 51%}28% {border-radius:54% 46% 38% 62%/49% 70% 30% 51%}42% {border-radius:61% 39% 55% 45%/61% 38% 62% 39%}56% {border-radius:61% 39% 67% 33%/70% 50% 50% 30%}70% {border-radius:50% 50% 34% 66%/56% 68% 32% 44%}84% {border-radius:46% 54% 50% 50%/35% 61% 39% 65%} } .menu-icon:checked~.menu-bulle{ animation-play-state:paused; top:50%; left:40px; transform:translate(-50%, -50%); width:35%; height:88%; transition:top 350ms 700ms cubic-bezier(.32, 1, .23, 1),left 350ms 700ms cubic-bezier(.32, 1, .23, 1), transform 250ms 700ms ease,width 750ms 1000ms cubic-bezier(.32, 1, .23, 1), height 750ms 1000ms cubic-bezier(.32, 1, .23, 1); } .menu-bulle ul{ position:absolute; top:25%; left:50px; display:block; width:100%; padding:0; margin:0; z-index:6; text-align:right; list-style:none; } .menu-bulle ul li{ position:relative; display:block; width:100%; padding:0; padding-bottom:15px; margin:10px 0; text-align:center; list-style:none; pointer-events:none; opacity:0;visibility:hidden; transform:translateY(30px); transition:all 250ms linear; } .menu-bulle ul li:nth-child(1) { transition-delay:200ms; } .menu-bulle ul li:nth-child(2){ transition-delay:150ms; } .menu-bulle ul li:nth-child(3) { transition-delay:100ms; } .menu-bulle ul li:nth-child(4) { transition-delay:50ms; } .menu-bulle ul li a { font-family:sans-serif; font-size:2vh; text-transform:uppercase; line-height:1.1; font-weight:800; display:inline-block; position:relative; color:#45050c; transition:all 250ms linear; max-width:9vw; } .menu-bulle ul li a:hover { text-decoration:underline; color:#45050c; } .menu-bulle ul li a:after { display:block; position:absolute; top:50%; content:""; height:2vh; margin-top:-1vh; width:0; left:0; transition:width 250ms linear; } .menu-bulle ul li a:hover:after { width:100%; } .menu-icon:checked~.menu-bulle ul li { pointer-events:auto; visibility:visible; opacity:1; transform:translateY(0); transition:opacity 350ms ease,transform 250ms ease; } .menu-icon:checked~.menu-bulle ul li:nth-child(1) { transition-delay:1400ms; } .menu-icon:checked~.menu-bulle ul li:nth-child(2) { transition-delay:1480ms; } .menu-icon:checked~.menu-bulle ul li:nth-child(3) { transition-delay:1560ms; } .menu-icon:checked~.menu-bulle ul li:nth-child(4) { transition-delay:1640ms; } @media screen and (min-width: 3400px) { .menu-icon:checked~.menu-bulle{ left:90px; } } @media screen and (max-width: 991px) { .menu-icon:checked~.menu-bulle { animation-play-state:paused; top:50%; left:50%; transform:translate(-50%, -50%); width:200%; height:200%; transition:top 350ms 700ms cubic-bezier(.32, 1, .23, 1),left 350ms 700ms cubic-bezier(.32, 1, .23, 1), transform 250ms 700ms ease,width 750ms 1000ms cubic-bezier(.32, 1, .23, 1), height 750ms 1000ms cubic-bezier(.32, 1, .23, 1); } .menu-bulle ul{ left:0; transform:translateY(10%); transform:translateX(-20%); } .menu-icon:checked+label,.menu-icon:not(:checked)+label { right:55px; } .logo { left:30px; } .menu-bulle { right:30px; } h1 { font-size:9vw; -webkit-text-stroke:2px rgba(0,0,0,0); text-stroke:2px rgba(0,0,0,0); -webkit-text-fill-color:#fff487; text-fill-color:#fff487; color:#fff487; } .menu-bulle ul li a{ font-size:2vh; padding:5px; max-width:unset; } .menu-icon:checked+label { top:10px; left:10px; width:50px; height:50px; } .menu-icon:not(:checked)+label { top:110px; left:50px; } .menu-bulle { top:90px; left:30px; display:block; width:60px; height:60px; }