@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
:root {
--primary: #DD946F ;
--primary-hover: #CD7D7C;
--secondary: #EFD0F8;
--secondary-hover: #B8A1D9;
--aura: #9265CA80;
--background: #261E5A;
--navbar-height: 60px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Mulish;
}
.background {
display: block;
width: 100vw;
height: 100vh;
background-image: url(universe.jpg);
/* https://www.freepik.com/free-vector/gradient
-galaxy-background_14658088.htm optimize in prod*/
opacity: 0.5;
z-index: -1;
background-size: cover;
background-repeat: no-repeat;
}
.menu__wrapper {
display: flex;
position: relative;
flex-direction: row;
z-index: 2;
}
.menu__bar {
position: fixed;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
padding-right: 24px;
gap: 32px;
background-color: var(--background);
height: 60px;
}
.menu-icon {
cursor: pointer;
display: flex;
}
.navigation {
display: flex;
flex-direction: row;
list-style-type: none;
gap: 24px;
padding: 0px;
background-color: var(--background);
}
.logo {
margin-left: 16px;
width: 32px;
height: 32px;
cursor: pointer;
isolation: isolate;
}
@keyframes fade {
0% { opacity: 0 }
100% { opacity: 0.6 }
}
.navigation > li {
display: flex;
position: relative;
padding: 0px;
color: white;
cursor: pointer;
width: max-content;
transition: all 0.2s;
}
.navigation > li:hover {
color: #FF9950;
}
.navigation > li::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: -4px;
border-radius: 1px;
left: 0;
background: linear-gradient(90deg,var(--background), var(--primary), var(--background));
transform-origin: bottom center;
transition: transform 0.3s ease-out;
}
.navigation > li:hover::after {
transform: scaleX(1);
transform-origin: bottom center;
}
@media (min-width: 600px) {
.menu-icon {
display: none;
}
}
@media (max-width: 600px) {
.navigation {
display: none;
}
.menu-icon {
display: block;
}
.navigation--mobile {
top: var(--navbar-height);
position: absolute;
display: flex;
padding: 20px;
background-color: var(--background);
width: 100%;
height: calc(100vh - var(--navbar-height));
gap: 8px;
flex-direction: column;
animation: fade 1s ease-in 1 forwards;
opacity: 0.6;
}
}