@talentsoft-opensource/hylia/organisms/header-page.less

The Hylia design systems. Contains all the building blocks style rules for Talentsoft.

.Hylia-m-header {
    position: relative;

    max-width: 120rem;
    margin: auto;
    padding: 0 5rem;

    border-top-left-radius: @radius;
    border-top-right-radius: @radius;
    background-color: @stormtrooper;

    &--full {
        max-width: 100%;
        padding: 0 7rem;

        border-radius: 0;
    }

    &__menu {
        margin-top: 2rem;
    }

    &__landmark {
        display: flex;
    }

    &__title {
        font-family: @condensed_bold;
        font-size: 2.6rem;
        line-height: 3.6rem;

        width: 60%;
        padding: 2rem 0;

        color: @smart;
    }

    &--fixed {
        .Hylia-m-header__headband {
            position: fixed;
            z-index: 1000;
            top: 0;
            right: 0;
            left: 0;

            animation: appearHeader 0.5s;

// transition: background 0.5s, box-shadow 0.5s;

            background-color: @stormtrooper;
            box-shadow: 0 0.1rem 1rem 0 rgba(0, 0, 0, 0.1);
        }

        &.Hylia-m-header--with-nav {
            .Hylia-m-header__title {
                font-size: 2rem;

                padding-bottom: 0;
            }
        }

        .Hylia-m-header__wrapper {
            padding: 0 7rem;
        }

        &:not(.Hylia-m-header--full) {
            .Hylia-m-header__wrapper {
                width: 120rem;
                margin: auto;
                padding: 0 5rem;
            }
        }
    }
}

@keyframes appearHeader {
    0% {
        transform: translateY(-2rem);

        opacity: 0;
    }
    100% {
        transform: translateY(0rem);

        opacity: 1;
    }
}