:root {
--primary: #DD946F ;
--primary-hover: #CD7D7C;
--background: #261E5A;
--navbar-height: 60px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Poppins;
}
.background {
display: block;
width: 100vw;
height: 100vh;
background-image: url(background.jpg);
opacity: 1;
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;
opacity: 0.9;
}
.menu-icon {
cursor: pointer;
display: flex;
height: 32px;
width: 32px;
}
.navigation {
display: flex;
flex-direction: row;
list-style-type: none;
align-items: center;
gap: 24px;
padding: 0px;
background-color: var(--background);
}
.logo {
margin-left: 16px;
width: 32px;
height: 32px;
cursor: pointer;
}
.navigation > li {
display: flex;
position: relative;
cursor: pointer;
font-size: 1.25rem;
}
.navigation > li > a {
color: white;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
text-decoration: none;
font-weight: 500;
background-image: linear-gradient(
to right,
var(--primary-hover),
var(--primary-hover) 50%,
white 50%
);
background-size: 200% 100%;
background-position: -100%;
display: inline-block;
padding: 3px 0;
position: relative;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.2s ease-in-out;
}
.navigation > li > a:before {
content: '';
background: var(--primary-hover);
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
transition: all 0.2s ease-in-out;
}
.navigation > li > a:hover {
background-position: 0;
}
/* hover effect inspired by
https://codepen.io/team/css-tricks/pen/OJOXWPp
*/
.navigation > li > a:hover::before{
width: 100%;
}
@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;
right: 0px;
display: flex;
padding: 80px 60px;
min-height: 100%;
background-color: var(--background);
gap: 8px;
flex-direction: column;
align-items: flex-start;
opacity: 0.95;
animation: fadein 0.3s forwards;
}
@keyframes fadein {
0% {
opacity: 0;
width: 0;
height: 0;
}
100% {
opacity: 1;
width: 100%;
height: calc(100vh - var(--navbar-height));
}
}
.navigation--mobile--fadeout {
animation: fadeout 300ms forwards;
}
@keyframes fadeout {
0% {
opacity: 1;
width: 100%;
height: calc(100vh - var(--navbar-height));
}
100% {
opacity: 0;
width: 0;
height: 0;
}
}
}