TPS_web_october/themes/tps/assets/css/components/2-layout/header.scss

// Header =============================

.header {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    background: transparent;
    padding: 20px 0;
    z-index: 50;
    border-top: 1px solid rgba(250, 250, 250, .3);
    border-bottom: 1px solid rgba(250, 250, 250, .3);

    &_row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo {
        display: flex;
        align-items: center;
        position: relative;

        svg {
            @include ImgCon;
            position: relative;
        }

        &_bg {
            width: 70px;
            height: 70px;
            display: block;

            svg,
            img {
                @include ImgCon;
            }
        }

        &_group {
            position: relative;
            margin-right: 10px;

            &-txt {
                width: 120px;
                height: 30px;
                overflow: hidden;

                svg {
                    @include ImgCon;
                    position: relative;
                }
            }

            &:last-child {
                margin-right: 0;
            }
        }

        &_inner {
            &-text {
                font-size: 18px;
                font-weight: 900;
                line-height: 1;
                color: #6A6A6A;

                position: absolute;
                top: 53%;
                left: 50%;
                @include transform;
            }
        }
    }

    .nav {
        position: relative;

        ul {
            display: flex;
            align-items: center;

            li {
                margin-right: 60px;
                position: relative;

                &:last-child {
                    margin-right: 0;
                }

                a,
                span {
                    display: block;
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 20px;
                    color: #FFFFFF;
                    cursor: pointer;

                    &.service_nav-link {
                        position: relative;

                        &::after {
                            content: "";
                            position: absolute;
                            top: 50%;
                            right: -20px;
                            transform: translateY(-50%);
                            -moz-ransform: translateY(-50%);
                            -o-transform: translateY(-50%);
                            -ms-transform: translateY(-50%);
                            -webkit-transform: translateY(-50%);
                            width: 8px;
                            height: 4px;
                            -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
                            clip-path: polygon(0 0, 50% 100%, 100% 0);
                            background: #fff;
                        }
                    }

                    // &:hover~.service_nav {
                    //     display: block;
                    //     max-height: unset;
                    // }
                }
            }
        }

        .service_nav {
            display: none;
            @include transition;
            max-height: 0;
            overflow: hidden;
            background: #fff;

            position: absolute;
            top: calc(100% + 20px);
            left: 50%;
            @include transformX;
            white-space: nowrap;
            z-index: 3;
            min-width: 400px;
            text-align: center;

            &.active {
                display: block;
                max-height: unset;
            }

            a {
                display: block;
                font-weight: 500;
                font-size: 16px;
                line-height: 20px;
                color: #000;
                @include transition;
                padding: 20px 0;

                &:hover {
                    background: $main-color;
                    color: #fff;
                }

            }
        }
    }

    .lang {
        position: relative;

        &_current {
            display: flex;
            align-items: center;
            position: relative;
            margin-right: 20px;
            cursor: pointer;

            span {
                position: relative;
                display: block;

                font-weight: 500;
                font-size: 16px;
                line-height: 20px;
                color: #FFFFFF;

                &::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    right: -20px;
                    @include transformY;

                    width: 8px;
                    height: 4px;
                    clip-path: polygon(0 0, 50% 100%, 100% 0);
                    background: #fff;
                }
            }
        }

        &_icon {
            width: 20px;
            height: 20px;
            margin-right: 10px;

            img {
                @include ImgCon;
            }
        }

        &_drop {
            position: absolute;
            top: calc(100% + 50px);
            left: 50%;
            @include transformX;
            background: #fff;
            color: #000;
            width: 120px;

            opacity: 0;
            pointer-events: none;
            transition: .3s linear;

            &.active {
                opacity: 1;
                pointer-events: unset;
                top: calc(100% + 20px);
            }

            &-link {
                color: #000 !important;
                display: block;
                text-align: center;
                text-transform: uppercase;

                font-size: 15px;
                font-weight: 500;
                line-height: 1.4;
                padding: 7px;
                @include transition;

                &:hover {
                    background: $main-color !important;
                    color: #fff !important;
                }

            }
        }
    }

    .burger {
        display: none;
    }
}

// Header end =========================

@keyframes logo-bg {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes logo-bg {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes inner-txt {
    0% {
        opacity: 0;
    }

    85% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes inner-txt {
    0% {
        opacity: 0;
    }

    85% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes group-txt {
    0% {
        transform: translateX(-150%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes group-txt {
    0% {
        transform: translateX(-150%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.logo-bg-animate {
    animation: logo-bg .8s linear;
    -webkit-animation: logo-bg .8s linear;
}

.inner-txt-animte {
    animation: inner-txt 1s linear;
    -webkit-animation: inner-txt 1s linear;
}

.group-txt-animte {
    animation: group-txt 1s linear;
    -webkit-animation: group-txt 1s linear;
}

// =============================================================

svg .svg-elem-1 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 0s;
    transition: fill 0.7s ease-in 0s;
}

svg.active .svg-elem-1 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-2 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 0.07s;
    transition: fill 0.7s ease-in 0.07s;
}

svg.active .svg-elem-2 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-3 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 0.14s;
    transition: fill 0.7s ease-in 0.14s;
}

svg.active .svg-elem-3 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-4 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 0.21000000000000002s;
    transition: fill 0.7s ease-in 0.21000000000000002s;
}

svg.active .svg-elem-4 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-5 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 0.28s;
    transition: fill 0.7s ease-in 0.28s;
}

svg.active .svg-elem-5 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-6 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 0.35000000000000003s;
    transition: fill 0.7s ease-in 0.35000000000000003s;
}

svg.active .svg-elem-6 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-7 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 0.42000000000000004s;
    transition: fill 0.7s ease-in 0.42000000000000004s;
}

svg.active .svg-elem-7 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-8 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 0.49000000000000005s;
    transition: fill 0.7s ease-in 0.49000000000000005s;
}

svg.active .svg-elem-8 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-9 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 0.56s;
    transition: fill 0.7s ease-in 0.56s;
}

svg.active .svg-elem-9 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-10 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 0.6300000000000001s;
    transition: fill 0.7s ease-in 0.6300000000000001s;
}

svg.active .svg-elem-10 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-11 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 0.7000000000000001s;
    transition: fill 0.7s ease-in 0.7000000000000001s;
}

svg.active .svg-elem-11 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-12 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 0.77s;
    transition: fill 0.7s ease-in 0.77s;
}

svg.active .svg-elem-12 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-13 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 0.8400000000000001s;
    transition: fill 0.7s ease-in 0.8400000000000001s;
}

svg.active .svg-elem-13 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-14 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 0.9100000000000001s;
    transition: fill 0.7s ease-in 0.9100000000000001s;
}

svg.active .svg-elem-14 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-15 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 0.9800000000000001s;
    transition: fill 0.7s ease-in 0.9800000000000001s;
}

svg.active .svg-elem-15 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-16 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 1.05s;
    transition: fill 0.7s ease-in 1.05s;
}

svg.active .svg-elem-16 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-17 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 1.12s;
    transition: fill 0.7s ease-in 1.12s;
}

svg.active .svg-elem-17 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-18 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 1.1900000000000002s;
    transition: fill 0.7s ease-in 1.1900000000000002s;
}

svg.active .svg-elem-18 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-19 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 1.2600000000000002s;
    transition: fill 0.7s ease-in 1.2600000000000002s;
}

svg.active .svg-elem-19 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-20 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 1.33s;
    transition: fill 0.7s ease-in 1.33s;
}

svg.active .svg-elem-20 {
    fill: rgb(255, 255, 255);
}

svg .svg-elem-21 {
    fill: transparent;
    -webkit-transition: fill 0.7s ease-in 1.4000000000000001s;
    transition: fill 0.7s ease-in 1.4000000000000001s;
}

svg.active .svg-elem-21 {
    fill: rgb(255, 255, 255);
}