landingpage/themes/app-landingpage/assets/scss/_header.scss

.logo {
    display: flex;
    flex-direction: row;
    text-decoration: none;

    &-image {
        width: auto;
        height: 55px;
        display: block;
        flex: 0 0 auto;
        overflow: hidden;
    }
}

.header {
    background-position: center;
    @extend .section_bg-gradient;
    @if $header-mobile-sticky {
        top: 0;
        position: sticky;
        z-index: 2;

        @media(min-width: $screen-md){
            z-index: auto;
            position: relative;
        }
    } @else {
        position: relative;
        z-index: 2;
    }
    &_home {
        body & {
            background-image: none;
            z-index: auto;
        }

        &:before,
        &:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            z-index: -1;
            background-position: center;
            background-image: $background-image_gradient;
            height: 140px;
            top: -12px;
        }
        &:after {
            top: -10px;
            background-image: $background-image_shape-wave-xs;
            background-position: center bottom;
            background-size: 100% auto;
            background-repeat: no-repeat;
        }

        @media(min-width: $screen-sm){
            &:before,
            &:after {
                background-image: $background-image_gradient;
                height: 280px;
            }
            &:after {
                background-image: $background-image_shape-wave;
                background-size: auto;
                background-position: left bottom;
            }

        }
        .page-home & {
            @media(min-width: $screen-lg){
                margin-bottom: 5 * $spacer;
            }
            @media(min-width: $screen-xl){
                margin-bottom: $spacer;
            }
        }
        @media (min-width: $screen-xl) {
            &:before,
            &:after {
                min-height: 320px;
                height: 23vw;
            }
            &:after {
                background-size: cover;
                background-position: center bottom;
            }
        }
        @media (min-width: $screen-xl + 180px){
            &:before,
            &:after {
               height: 20vw;
               transform: translate3d(0,-2%,0);
            }
        }
        @media (min-width: 2200px){
            &:before,
            &:after {
                transform: translate3d(0,-10%,0);
            }
        }
        @media (min-width: 2200px){
            &:before,
            &:after {
                transform: translate3d(0,-20%,0);
            }
        }
    }

    .logo-caption {
        color: $white;
    }
    .nav-link {
        text-decoration: none;
    }
    .nav-item {
        font-weight: $font-weight-bold;
    }
    .nav-item,
    .nav-link {
        @media(min-width: $screen-md){
             color: inherit;
        }
    }
    .navbar{
        padding-top: $spacer * 1.5;
        padding-bottom: $spacer * 1.5;
        @media(min-width: $screen-md){
            color: $white;
        }
    }
    .btn-menu {
        appearance: none;
        width: 44px;
        height: 44px;
        min-width: 44px;
        display: block;
        border-radius: $border-radius;
        position: absolute;
        background: transparent;
        border: none;
        outline: none;
        top: $spacer * 1.5;
        right: $spacer * 1.5;
        z-index: 1;

        &:before {
            content: "";
            width: 100%;
            height: 100%;
            min-width: 44px;
            background: url("../img/icons/burger_menu.svg") center no-repeat;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }
        @media(min-width: $screen-md){
            display: none;
        }
        &_close:before {
            background-image: url("../img/icons/burger_menu_close.svg");
        }
    }
    &-nav {
        display: none;
        &.active {
            display: block;
            position: fixed;
            height: 100vh;
            width: 100%;
            left: 0;
            top:0;
            background-color: $body-bg;
            padding-top: $spacer * 1.3;
            padding-left: $spacer;
            padding-right: $spacer;
            z-index: $zindex-modal;

            .nav {
                display: flex;
                flex-direction: column;
            }
        }

        .nav-item {
            font-size: $font-size-lg;
            color: $body-color;
            font-weight: $font-weight-bold;
            order: 1;

            .nav-link {
                &,
                &:hover {
                    color: inherit;
                }
                &.disabled {
                    opacity: 0.7;
                }
            }

            &.lang {
                display: flex;
                align-items: center;
                font-size: $font-size-base;
                position: relative;
                top: 0.08rem;
                order: 0;
                padding-left: $spacer * 0.8;
                padding-right: $spacer * 0.8;
                margin-bottom: $spacer;
                text-transform: uppercase;

                .nav-link {
                    &,
                    &:hover {
                        padding-left: 0.3rem;
                        padding-right: 0.3rem;
                        opacity: 0.7;
                    }

                    &-delimiter {
                        position: relative;
                        top: -0.08rem;
                    }
                    &.active {
                        &,
                        &:hover {
                            opacity: 1;
                        }
                    }
                }
            }
        }

        @media(min-width: $screen-md){
            &,
            &.active {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                position: static;
                background: transparent;
                height: auto;
                width: auto;
                padding: 0;

                .nav {
                    flex-direction: row;
                    color: $white;

                    &-item.lang {
                        padding-left: 0;
                        padding-right: 0;
                        margin-bottom: 0;
                    }
                }
            }
            .nav-item,
            .nav-item.lang {
                order: 1;
                color: inherit;
            }
            .btn-menu {
                display: none;
            }
            .nav-link {
                &.active {
                    position: relative;
                    &:after {
                        content: "";
                        position: absolute;
                        bottom: $spacer * 0.6;
                        border-top: 2px solid $white;
                        left: $spacer;
                        right: $spacer;
                    }
                }
            }
            .nav-link-icon {
                &.icon_github {
                    position: relative;
                    margin-right: 10px;
                    &:before {
                        content: "";
                        background-image: url("../img/icons/github_white.svg");
                        background-position: center;
                        background-repeat: no-repeat;
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        top: 0.01rem;
                    }
                    img {
                        visibility: hidden;
                    }
                }
            }
        }
    }
}