.heroBanner {
$offset: $header-height - 30px; $hero-background: $charcoal-grey; $gradient-start: #3760A7; $gradient-stop: #39BBD1; $section-pad: 80px; $search-width: 450px; background: linear-gradient(45deg, rgba($gradient-start, 1), rgba($gradient-stop, 1)); background-size: cover; background-position: center; position: relative; background-repeat: no-repeat; &__wrapper { @include outer-container; @include pad($section-pad + $header-height $outer-pad $section-pad); position: relative; @include media($mobile) { @include pad(80px + $header-height $outer-pad 80px); } } &--transparentHeader &__wrapper { @include pad($section-pad + $offset $outer-pad $section-pad); @include media($mobile) { @include pad(80px + $offset $outer-pad 80px); } } &--imageBackground:before { @include position(absolute, 0 0 0 0); content: ''; background: linear-gradient(0deg, rgba($black, 0.2), rgba($black, 0.5)); } &--noBackground { background: transparent; } &--noBackground &__title { color: $heading-color; } &--noBackground &__description { color: $text-color; } &__content { @include span-columns(9); @include shift(1.5); text-align: center; @include media($tablet) { @include span-columns(12); @include shift(0); } } &__title { color: $white; margin-bottom: 10px; } &__description { margin-bottom: 0; color: $white; font-size: 18px; @include media($mobile) { font-size: 16px; } } &__descriptionLink { color: rgba($white, 1); border-color: rgba($white, 0.4); &:hover { color: rgba($white, 1); border-color: rgba($white, 0.7); } @include media($mobile) { font-size: 16px; } } &__search { @include span-columns(9); @include shift(1.5); text-align: center; margin-top: 30px; @include media($tablet) { @include span-columns(12); @include shift(0); } } &__searchForm { max-width: $search-width; height: 50px; display: flex; align-items: center; justify-content: center; margin: 0 auto; position: relative; } &__searchInput[type="search"] { @include placeholder(rgba($black, 0.4)); width: 100%; height: 100%; border: 0; padding: 0 0 2px 60px; border-radius: $base-border-radius; margin: 0; box-shadow: 0 2px 4px 0 rgba($black, 0.17); appearance: none; &:focus { outline: none; } } &__searchIcon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); fill: rgba($black, 0.4); } &__searchResults { @keyframes searchResults { from { opacity: 0; transform: translate3d(0, -10px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } animation: searchResults 0.3s $CurveFastOutSlowIn both; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; right: 0; z-index: 99; padding: 0 20px; } &__searchResultsContainer { margin-top: 10px; overflow: hidden; border-radius: $base-border-radius; background: $white; max-width: $search-width; width: 100%; box-shadow: 0 8px 10px 1px rgba($black, 0.14), 0 3px 14px 2px rgba($black, 0.12), 0 5px 5px -3px rgba($black, 0.4); } &__searchEntries { padding: 10px 0; max-height: 500px; overflow: auto; } &__searchResult { text-align: left; display: flex; flex-direction: row; align-items: center; border: 0; color: $text-color; padding: 10px 20px; font-size: 16px; flex: 1; &:hover, &:focus, &:active { outline: none; border: 0; color: $text-color; background: rgba($black, 0.06); } &--notFound { padding-left: 20px; } } &__author { display: flex; align-items: center; justify-content: center; @include media($mobile) { display: none; } } &__authorImage { @include size(25px); border-radius: 50%; margin-right: 8px; } &__authorName { font-size: 14px; color: $white; font-weight: 600; } &__logo { height: 64px; margin: 15px 0 10px; }
}