website/_src/_assets/scss/_hero.scss

$edge-height-sm: $spacer * 2;
$edge-height:    $spacer * 4;

.hero {
    background: $brand-07;
    padding-top: $spacer * 2;
    padding-bottom: 0;
    height: calc(100vh - #{$edge-height-sm});
    min-height: 580px;
    margin-bottom: $edge-height-sm;
    position: relative;

    @media ($screen-sm) {
        height: calc(100vh - #{$edge-height});
        margin-bottom: $edge-height;
    }

    &:after {
        content: '';
        width: 100%;
        height: $edge-height-sm;
        display: block;
        position: absolute;
        left: 0;
        background: #b3d0da;
        bottom: -($edge-height-sm);
        clip-path: polygon(0 0, 100% 0, 100% 20%, 0% 100%);

        @media ($screen-sm) {
            height: $edge-height;
            bottom: -($edge-height);
        }
    }

    .menu--main {
        background: $brand-03;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 0;

        &:after {
            content: '';
            width: 100%;
            height: $edge-height-sm;
            display: block;
            position: absolute;
            left: 0;
            background: $brand-03;
            bottom: -($edge-height-sm);
            clip-path: polygon(100% 0, 0 0, 0 100%);

            @media ($screen-sm) {
                height: $edge-height;
                bottom: -($edge-height);
            }
        }

        .button {
            background: none;
            border: 1.5px solid rgba($brand-05, .2);
            color: rgba($brand-05, .8);

            &:hover,
            &:focus {
                color: $brand-05;
            }
        }
    }

    .menu__link {
        color: rgba($brand-05, .8);

        &:after {
            background: rgba($brand-05, .8);
        }

        &:hover,
        &:focus,
        &.active {
            color: $brand-05;

            &:after {
                background: $brand-05;
            }

            .logo {
                fill: $brand-05;
            }
        }
    }

    .logo {
        fill: rgba($brand-05, .95);
    }
}

.hero__content {
    position: relative;
    z-index: 2;
}

.hero__title {
    color: $brand-05;
    font-size: $font-size-h2;
    margin-bottom: $spacer / $line-height;

    @media ($screen-sm) {
        font-size: $font-size-h1 * 1.1;
    }
}

.hero__description {
    font-size: $font-size-base;
    margin-top: 0;
    margin-bottom: $spacer * 2;
    color: $brand-02;
    line-height: $line-height;

    @media ($screen-sm) {
        font-size: $font-size-large;
    }
}


//
// Le star base
//
.starbase {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-bottom: 4.5rem solid $brand-02;
    align-self: flex-end;
    z-index: 1;

    .row {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
}

.starbase__item {
    position: relative;
}

.starbase__item--stones {
    margin-bottom: -1rem;
}

.starbase__item--mooncycle {
    margin-bottom: -4rem;
    animation: bicycle 8s both 2s;
}

@keyframes bicycle {
    0% {
        transform: translate3d(60vw, 0, 0);
    }

    35%,
    60% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100vw, 0, 0);
    }
}

.starbase__item--towers {
    margin-bottom: -4.5rem;
}

.starbase-rocket {
    position: absolute;
    bottom: -4.5rem;
    right: 20%;
    z-index: 0;
    animation: rocketStart 8s ease-in infinite forwards;

    + .starbase-rocket {
        animation-delay: .8s;
        right: 35%;
        width: 30px;
    }
}

@keyframes rocketStart {
    0% {
        transform: translate3d(0, 0, 0);
    }

    30%,
    100% {
        transform: translate3d(0, -110vh, 0);
    }
}