src/css/sections/mainBanner.css - master - engineunity_sub/doxml_work_site

src/css/sections/mainBanner.css
119 строк2 KB
PauloChaser
move content from branch dev to master
12 фев 2025, 18:06
12 фев 2025, 18:06a2e2735

.banner--main {
    padding-bottom: 60px;
    justify-content: flex-start;
}


.banner {
    position: relative;
    height: calc(100dvh - 126px);
}

@media screen and (max-height: 1000px) {
    .banner {
        height: calc(100dvh - 86px);
    }
}

.banner__textIcon {
    margin-bottom: -5px;
    max-width: 24px;
    max-height: 24px;
}

.description {
    line-height: 1.4;
    grid-gap: 12px;
}

.description__text {
    font-size: 20px;
    color: var(--gray);
}

.banner__arrow {
    width: 100%;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    padding: 20px 0;
}

/*.banner__arrow {*/
/*    display: inline-block;*/
/*    width: 80px;*/
/*    background-image: url("images/arrow-down.svg");*/
/*    background-repeat: no-repeat;*/
/*    background-size: contain;*/
/*}*/

.banner__arrowIconWrap {
    display: block;
}

.banner__arrowIcon {
    width: 80px;
    margin: auto;
    display: block;
    transition: .2s ease, filter .3s ease;
    animation: 1s ease-in-out infinite shake;
    animation-play-state: running;
}

@keyframes shake {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
    }
}

.banner__arrow:hover .banner__arrowIcon {
    animation-play-state: paused;
    transform: scale(1.1);

}

.banner__arrow:hover .banner__arrowIcon {
    filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(3000%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

.banner__arrow:hover .svgArrow {
    fill: aqua;
}

@media screen and (max-width: 1020px) {
    .description__text.description__text.description__text {
        font-size: 18px;
    }

    .banner__arrowIcon {
        width: 70px;
    }
}

@media screen and (max-width: 991px) {
    .banner {
        position: relative;
        height: calc(100dvh - 80px);
    }

    .banner__arrow {
        display: none;
        /*padding: 10px 0;*/
    }
    .banner__arrowIcon{
        /*max-height: 50px;*/
        /*opacity: 0.6;*/
    }
}

@media screen and (max-width: 700px) {
    .description__text.description__text.description__text {
        font-size: 14px;
    }
}