.o-banner {
$self: &;
max-width: 100%;
position: relative;
color: $color-text-negative;
overflow: hidden;
z-index: 0;
a {
color: $color-text-negative;
&:not(.u-t-category-link) {
font-weight: $font-weight-normal;
}
}
&__link {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
z-index: 1;
}
&__wrapper {
@extend .grid-wrapper;
}
&__container {
@extend .grid-container;
@include media($sm-breakpoint) {
padding-left: 16px;
padding-right: 16px;
}
@include media($md-breakpoint) {
padding-left: 0;
padding-right: 0;
}
}
&__title-row {
@extend .row;
}
&__photo-credit {
@include fluid-props(font-size, $fluid-min, $fluid-max, 6px, 13px);
@include fluid-props(bottom, $fluid-min, $fluid-max, 8px, 34px);
@include fluid-props(right, $fluid-min, $fluid-max, 12px, 40px);
position: absolute;
transform: rotate(90deg);
transform-origin: right;
font-family: $font-highlight;
text-transform: uppercase;
letter-spacing: 1px;
}
&__image {
position: absolute;
top: 0;
left: 0;
display: block;
z-index: -2;
@include object-fit(cover, center);
@include size(100%, 100%);
transform: scale(1);
transition: transform $transition-slow ease;
}
&__content {
@include fluid-props(padding-bottom, $fluid-min, $fluid-max, 10px, 40px);
@include fluid-props(padding-top, $fluid-min, $fluid-max, 200px, 550px);
position: relative;
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
opacity: .5;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
z-index: -2;
@include size(100%, 50%);
transition: opacity $transition-slow ease;
}
@include media($sm-breakpoint) {
padding-top: 0;
}
}
&__title-wrap {
@extend .col-xs-11;
@extend .col-sm-8;
@include media($sm-breakpoint) {
height: 41.5vw;
max-height: 90vh;
display: flex;
align-items: flex-end;
}
}
&__meta {
padding-top: 25px;
font-family: $font-highlight;
}
&__category {
@extend .u-t-category-link;
z-index: 5;
}
&__author {
text-align: right;
font-weight: $font-weight-bold;
display: inline-block;
width: 100%;
padding-right: 1.5em;
@include media(900px) {
padding-right: 0;
}
}
&__author-link {
@extend .u-t-author-link;
z-index: 5;
}
&__photos,
&__video-length {
@include fluid-props(padding-left, $fluid-min, $fluid-max, 20px, 30px);
text-decoration: none;
font-weight: $font-weight-bold;
svg {
vertical-align: bottom;
@include fluid-props(width, $fluid-min, $fluid-max, 13px, 20px);
@include fluid-props(height, $fluid-min, $fluid-max, 13px, 20px);
@include fluid-props(margin-right, $fluid-min, $fluid-max, 9px, 14px);
}
}
&--light {
color: $color-text-dark;
a {
color: $color-text-dark;
}
.o-banner__content::after {
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
.u-t-title-page {
color: $color-text;
}
}
&--media {
#{ $self }__content {
@include fluid-props(padding-right, $fluid-min, $fluid-max, 4px, 12px);
&::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
background: $color-primary;
height: 85%;
@include fluid-props(width, $fluid-min, $fluid-max, 4px, 12px);
@include media($md-breakpoint) {
height: 70%;
}
}
}
#{ $self }__cta {
position: absolute;
background: $color-primary;
display: flex;
align-items: center;
justify-content: center;
top: 15%;
right: 0;
text-decoration: none;
text-align: center;
font-family: $font-highlight;
z-index: 2;
@include fluid-props(height, $fluid-min, $fluid-max, 33px, 90px);
transition: background-color $transition-fast ease-out;
@include media($md-breakpoint) {
top: 30%;
}
}
#{ $self }__cta-label {
@include fluid-props(font-size, $fluid-min, $fluid-max, 12px, 24px);
padding-left: 1.2em;
padding-right: 1.2em;
font-weight: $font-weight-semi;
vertical-align: middle;
flex-grow: 1;
span {
position: relative;
&::after {
content: ' ';
position: absolute;
bottom: -.2em;
left: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: left center;
background-color: currentColor;
transition: transform .15s ease-out;
}
}
+ #{ $self }__cta-icon {
background-color: $color-primary-dark;
}
}
#{ $self }__cta-icon {
position: relative;
background-color: $color-primary;
transition: background-color $transition-fast ease-out;
@include fluid-props(width height, $fluid-min, $fluid-max, 33px, 90px);
svg {
@include fluid-props(width height, $fluid-min, $fluid-max, 25px, 55px);
@include centerer(true, true);
}
}
}
}
.o-banner {
&.is-hover {
.o-banner__content::after {
opacity: .9;
}
}
&__cta {
@include hover-behaviour {
background-color: $color-primary-dark;
.o-banner__cta-label {
span::after {
transform: scaleX(1);
}
+ .o-banner__cta-icon {
background-color: $color-primary;
}
}
.o-banner__cta-icon {
background-color: $color-primary-dark;
}
}
}
}