hero.less

//
// Hero
// --------------------------------------------------

.hero {
    display: block;
    position: relative;
    background: @hero-tiled-background;
}

.hero__copy {
    .vertical-align(absolute);
}

.hero__copy-inner {
    &:extend(.container-fluid);

    @media screen and (max-width: (@screen-md)) {
        padding: 0;
    }
}

.hero__copy--center {
    text-align: center;
    .horizontal-align(absolute);
}

.hero__copy--left {
    text-align: left;
    left: 0;
    right: auto;
}

.hero__copy--right {
    text-align: right;
    left: auto;
    right: 0;
}

.hero__image {
    display: block;
    width: 100%;
    max-width: none;
}

.hero__title {
    margin-top: 0;
    font-weight: @font-weight-bold;
    font-size: 44px;
}

.hero__description {
    max-width: 660px;
    font-weight: @font-weight-light;
    font-size: 17px;
}

.hero__description,
.hero__title {
    color: #fff;

    @media screen and (max-width: (@screen-md - 1)) {
        color: @text-color;
    }
}

.hero__title--dark {
    color: @brand-primary;
}

.hero__description-under-hero {
    max-width: 100%;
    color: @brand-primary;
}

.hero__button {

}

//
// Hero - Variations
// --------------------------------------------------

.hero--home {
    display: none;
    height: 410px;
    opacity: 0;

    &.gor-active {
        opacity: 1;
    }

    .hero__image {
        float: right;
        width: auto;
    }

    .hero__copy {
        max-width: 480px;
    }

    .hero__title {
        margin-bottom: 8px;
    }

    .hero__description {
        margin-bottom: 15px;
    }
}

.hero--page {
    .hero__title,
    .hero__title--dark {
        font-size: @font-size-h2;
    }

    .hero__copy {
        width: 100%;
    }
    
    .hero__copy-inner {

    }
}

.section {
    .hero__copy {
        padding-left: 40px;
    }
    .hero--page {
        .hero__copy-inner {
            width: auto;
        }
    }
}

.hero--no-image {
    display: flex;
    align-items: center;
    padding: 40px 0;

    .hero__copy {
        position: relative;
        top: auto;
        transform: none;
    }
}

.hero--no-image.hero--no-description {
    min-height: 175px !important;   // Temporary better solution needed to let content dictate height
}


.hero--catalog {

    &:extend(.hero--page all);

    .hero__copy {
        padding-left: 0;
        width: 100%;
    }

    .hero__copy-inner {
        &:extend(.container-fluid);
    }

    .hero__description,
    .hero__title,
    .hero__copy {
        color: #fff;
    }

    .hero__description {
        font-size: 15px;
        max-width: none;

        strong {
            font-weight: @font-weight-normal;
        }

        p {
            font-weight: @font-weight-light;
            font-size: 15px;
        }
    }
}

.hero--highlight {
    height: 250px;
    background: @gray-medium;
    border: 4px solid @gray;

    .hero__copy {
        max-width: 500px;
        left: 170px;
    }

    .hero__title {
        margin-top: 0;
        font-size: 18px;
    }

    .hero__image {
        width: auto;
        position: absolute;
        right: 100px;
        bottom: 0;
    }

    @media screen and (max-width: @screen-tablet) {
        .hero__copy {
            left: 0;
        }
    }
}

.hero--no-image,
.hero--highlight,
.hero--home {
    .hero__description,
    .hero__title,
    .hero__copy {
        color: @brand-primary;
    }
}