@charset "UTF-8"; // NOTE: this compnent is dependant on the glider.scss component // The Glider components is dependant on JS-classes and is therefore not namespaced .glider-hero-contain { display: flex; position: relative; align-items: center; margin: 0; @include e(text) { position: absolute; top: rhythm(2); left: rhythm(2); z-index: z_index(background); padding-right: rhythm(2); max-width: 95%; @include bp-up(sm-xs) { top: rhythm(3); left: rhythm(3); padding-right: rhythm(3); max-width: 90%; } @include bp-up(sm) { top: rhythm(4); left: rhythm(4); padding-right: rhythm(4); max-width: 80%; } @include bp-up(md) { top: rhythm(6); left: rhythm(6); padding-right: rhythm(6); max-width: 70%; } @include bp-up(lg) { top: rhythm(7); left: rhythm(7); padding-right: 0; max-width: 60%; } @include bp-up(xl) { top: rhythm(8); left: rhythm(8); } > h1 { color: $color-snow; > span { background-color: rgba(0,0,0,0.6); } @include plumber( $font-size: 2, $line-height: 3, $leading-bottom: 1 ); @include bp-up(sm) { @include plumber( $font-size: 2.3, $line-height: 3, $leading-bottom: 1 ); } @include bp-up(md) { @include plumber( $font-size: 3, $line-height: 4, $leading-bottom: 2 ); } @include bp-up(lg) { @include plumber( $font-size: 4, $line-height: 5, $leading-bottom: 2 ); } @include bp-up(xl) { @include plumber( $font-size: 5, $line-height: 6, $leading-bottom: 3 ); } } > p { color: $color-snow; > span { background-color: rgba(0,0,0,0.6); } @include plumber( $font-size: 1.5, $line-height: 2, ); @include bp-up(sm) { @include plumber( $font-size: 2, $line-height: 3, ); } @include bp-up(lg) { @include plumber( $font-size: 2.5, $line-height: 3, ); } @include bp-up(xl) { @include plumber( $font-size: 3, $line-height: 4, ); } } } .glider { visibility: hidden; &[data-glider-initialized="true"] { visibility: visible; } } } .glider-slide { width: 100vw; @include m(hero) { margin: 0; padding: 0; position: relative; &::after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-black, 0) 35%, rgba($color-black, 1) 100%); } @include e(image) { display: block; object-fit: cover; object-position: 50% 50%; width: 100%; height: 100%; @include bp-up(sm) { min-height: rem(500px); max-height: 75vh; } } @include e(text) { position: absolute; z-index: 1; bottom: rhythm(2); left: rhythm(2); padding-right: rhythm(2); color: $color-snow; font-family: $font-family-bold; max-width: 95%; > span { //text-shadow: 0 0 20px rgba(0,0,0,0.8); > a { position: relative; z-index: 1; &:hover { text-decoration: none; color: $color-cyberspace !important; text-shadow: none; } &::before { content: ''; position: absolute; z-index: -1; width: 100%; height: 100%; background-color: $color-snow; bottom: 0; left: 0; transform-origin: right; transform: scaleX(0); transition: transform .3s ease-in-out; } &:hover::before { transform-origin: left; transform: scaleX(1); } } } @include plumber( $font-size: 2.3, $line-height: 3, $leading-bottom: 0, $baseline: $headings-baseline ); @include bp-up(sm-xs) { bottom: rhythm(3); left: rhythm(3); padding-right: rhythm(3); max-width: 90%; @include plumber( $font-size: 3, $line-height: 4, $leading-bottom: 0 ); } @include bp-up(sm) { bottom: rhythm(4); left: rhythm(4); padding-right: rhythm(4); max-width: 80%; @include plumber( $font-size: 4, $line-height: 5, $leading-bottom: 0 ); } @include bp-up(md) { bottom: rhythm(6); left: rhythm(6); padding-right: rhythm(6); max-width: 70%; @include plumber( $font-size: 5, $line-height: 6, $leading-bottom: 0 ); } @include bp-up(lg) { bottom: rhythm(7); left: rhythm(7); padding-right: 0; max-width: 60%; @include plumber( $font-size: 6, $line-height: 8, $leading-bottom: 0 ); } @include bp-up(xl) { bottom: rhythm(8); left: rhythm(8); @include plumber( $font-size: 7, $line-height: 9, $leading-bottom: 0 ); } } } } .glider-nav { transform: scale(0.7) translateY(-100%); @include bp-up(md) { transform: scale(1) translateY(-50%); } @include m(hero) { &.disabled { display: none; } &.glider-prev { left: 0; @include bp-up(md) { left: rhythm(1); } @include bp-up(lg) { left: rhythm(2); } } &.glider-next { right: 0; @include bp-up(md) { right: rhythm(1); } @include bp-up(lg) { right: rhythm(2); } } } }