@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-hero-game {
min-height: rem-calc(300);
position: relative;
z-index: 6;
background-color: $primary;
@include padding-bottom( rem-calc(100) );
overflow: hidden;
@include bp($md) {
min-height: rem-calc(600);
}
&:before {
width: 100%;
height: 100%;
content: '';
background: linear-gradient(to top, rgba($primary, 0) 0%, $primary 100%);
position: absolute;
top: 0;
left: 0;
z-index: 2;
pointer-events: none;
@include bp($lg) {
height: 30%;
}
}
.overlay {
&:before,
&:after {
content: '';
left: 0;
top: 0;
position: absolute;
z-index: 1;
border-radius: 100%;
}
&:before {
width: rem-calc(1000);
height: rem-calc(1000);
background: $light-blue;
filter: blur(142px);
transform: translate3d(-50%, -50%, 0);
}
&:after {
width: rem-calc(740);
height: rem-calc(740);
background: $primary;
filter: blur(350px);
transform: translate3d(-50%, 0, 0);
}
}
.block-breadcrumb {
@include margin-bottom( rem-calc(82) );
position: relative;
}
.container {
position: relative;
z-index: 5;
}
.heading,
.content-container {
color: var( --text-color );
}
&__wrapper {
.game-excerpt {
margin-bottom: 0;
}
}
&__trailer {
position: relative;
display: block;
margin-top: rem-calc(32);
@include bp($md) {
margin-top: 0;
}
@include bp($xl) {
max-width: 50%;
max-height: rem-calc(540);
position: absolute;
@include margin-top( rem-calc(-82) );
top: 0;
right: -3%;
}
@include bp($xxxl) {
right: -6%;
}
&[href='#'] {
pointer-events: none;
&:before {
content: none;
}
}
&:hover {
&:before {
background-color: $secondary;
background-image: url(/wp-content/themes/british-esports/assets/icons/play--white.svg);
}
}
&:before {
width: rem-calc(60);
height: rem-calc(60);
content: '';
background-color: $white;
background-image: url(/wp-content/themes/british-esports/assets/icons/play.svg);
background-repeat: no-repeat;
background-position: center;
background-size: rem-calc(20);
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
transform: translate3d(-50%,-50%,0);
transition: 0.3s var(--ease);
transition-property: background-color, background-image;
}
}
&__poster-image {
display: flex;
flex-direction: column;
aspect-ratio: 960/540;
@include bp($lg) {
// width: rem-calc(960);
// height: rem-calc(540);
}
img {
height: 100%;
object-fit: cover;
}
}
&__bg-image {
display: flex;
flex-direction: column;
pointer-events: none;
&:before {
width: 100%;
height: 100%;
content: '';
position: absolute;
inset: 0;
background-color: $primary;
opacity: 0.4;
pointer-events: none;
z-index: 2;
}
img {
height: 100%;
object-fit: cover;
}
}
&__age-logo {
width: rem-calc(40);
aspect-ratio: 64/78;
margin-top: rem-calc(24);
@include bp($md) {
width: rem-calc(64);
aspect-ratio: 64/78;
}
@include bp($lg) {
margin-top: 0;
position: absolute;
top: 0;
right: 0;
pointer-events: none;
transform: translate3d(calc( 100% + 16px ),0,0);
}
}
}
.block-hero-game__bar {
position: relative;
z-index: 5;
margin-top: auto;
@include padding( rem-calc(24 0) );
background: linear-gradient(to left, $primary, $light-blue);
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: rem-calc(32 16);
@include bp(1100px) {
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
}
}
.available-on {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: rfs-fluid-value( rem-calc(16 32) );
color: $white;
@include bp($md) {
justify-content: flex-start;
}
p {
@include fluid-type(14, 18);
margin-bottom: 0;
line-height: 1;
&.platform-name {
font-weight: 800;
}
}
picture {
max-width: rem-calc(150);
max-height: rem-calc(50);
display: flex;
flex-direction: column;
img {
width: auto;
height: 100%;
object-fit: contain;
}
}
}
.social-urls-col {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: rem-calc(32);
@include bp($sm) {
margin-top: 0;
}
}
.social-urls {
ul{
@include list-unstyled;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: rfs-fluid-value( rem-calc(16 20) );
margin: 0 auto;
@include bp($sm) {
justify-content: flex-end;
}
@include bp($lg){
margin: 0;
}
@include bp($xxl){
gap: rfs-fluid-value( rem-calc(0 50) );
}
li {
a {
display: flex;
align-items: center;
justify-content: center;
&:hover{
svg{
fill: $secondary;
}
}
svg {
width: rem-calc(20);
max-height: rem-calc(20);
fill: $white;
transition: 0.2s ease-in-out fill;
}
}
}
}
}
}
Animation: