File: /var/www/linde-ai/html/styles/partials/_header.scss
.site-header {
position: fixed;
width: 100%;
z-index: 999;
padding: 15px 50px;
transition: all 0.2s;
&--scrolled {
padding: 5px 50px;
background: var(--color-white);
border-bottom: 2px solid var(--color-3);
.site-header__linde-text {
font-size: 20px;
line-height: 140%;
}
.site-header__linde-logo {
height: 40px;
}
}
&__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
&--child {
width: 33%;
}
}
&__navigation {
display: flex;
align-items: center;
justify-content: center;
}
&__list {
&-wrapper {
display: flex;
}
&-item {
position: relative;
display: flex;
padding: 5px 10px;
&--hovered {
.site-header__dropdown {
display: flex;
}
}
}
}
&__btn {
&:hover {
background: var(--color-8);
color: var(--color-6);
}
}
&__dropdown {
position: absolute;
top: 40px;
background: var(--color-white);
border: 1px solid var(--color-3);
border-radius: 10px;
padding: 3px;
display: none;
&:hover {
display: flex;
}
&-item {
padding: 3px 15px 3px 5px;
display: flex;
align-items: center;
cursor: pointer;
&:hover {
background: var(--color-8);
}
img {
width: 30px;
height: 30px;
}
}
&-btn {
font-size: 18px;
font-weight: 400;
line-height: 150%;
color: var(--color-4);
margin-left: 5px;
}
}
&__linde-text {
transition: all 0.2s;
}
&__linde-logo {
height: 55px;
object-fit: contain;
object-position: right;
transition: all 0.2s;
}
}