/* No context defined for this component. */
$page-slice--octagon__size : 325px !default;
$page-slice--octagon__size\@medium : 600px !default;
$page-slice--octagon__size\@large : 600px !default;
$page-slice--octagon__size\@extra-large : 600px !default;
$page-slice--octagon__top : calc(#{$page-slice--octagon__size} * -0.1) !default;
$page-slice--octagon__top\@medium : calc(#{$page-slice--octagon__size\@medium} * -0.25) !default;
$page-slice--octagon__top\@large : calc(#{$page-slice--octagon__size\@large} * -0.25) !default;
$page-slice--octagon__top\@extra-large : calc(#{$page-slice--octagon__size\@extra-large} * -0.25) !default;
$page-slice--octagon__right : calc(#{$page-slice--octagon__size} * -0.45) !default;
$page-slice--octagon__right\@medium : calc(#{$page-slice--octagon__size\@medium} * -0.55) !default;
$page-slice--octagon__right\@large : calc(#{$page-slice--octagon__size\@large} * -0.55) !default;
$page-slice--octagon__right\@extra-large : calc(#{$page-slice--octagon__size\@extra-large} * -0.55) !default;
$page-slice--slice-nav__color : $bg-color-base !default;
$page-slice--slice-nav__color\@active : $bg-color-base !default;
$page-slice--footer-cta-max-height : 100% !default;
$page-slice--footer-cta-max-height\@medium : 55vh !default;
$page-slice--footer-cta-max-height\@large : 75vh !default;
$page-slice--footer-cta-max-height\@extra-large : 65vh !default;
.homepage-slice {
&__slider {
@include mq($screen-l) {
height: 100vh;
overflow-y: scroll;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
scrollbar-width: none; //sass-lint:disable-line no-misspelled-properties
}
}
&__item {
position: relative;
display: flex;
flex-flow: column nowrap;
height: auto;
width: 100vw;
@include mq($screen-l) {
&.scroll-snapped {
height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
overflow: hidden;
&.colorscheme {
&-light {
background: $bg-color-base;
}
&-dark {
background: $bg-color-dark;
}
}
}
}
}
&__hero {
width: 100%;
display: grid;
z-index: 1;
height: 100vh;
&--image {
grid-area: 1/-1; //sass-lint:disable-line space-around-operator
z-index: 2;
&--picture {
display: block;
height: 100vh;
}
&__asset {
border-radius: 0;
bottom: 0;
display: block;
float: none;
inset-inline-start: 0;
margin-inline-end: 0;
margin-inline-start: 0;
margin-top: 0;
max-width: none;
min-width: 0;
object-fit: cover;
object-position: center center;
opacity: 1;
position: static;
top: 0;
transform: none;
visibility: visible;
width: 100%;
height: 100vh;
}
}
&--objectfit-position {
&--center {
object-position: 100% 50%;
}
}
&--content {
align-items: flex-start;
display: flex;
flex-flow: column nowrap;
grid-area: 1/-1;
//margin: 0 auto;
text-align: center;
z-index: 3;
justify-content: center;
width: 100%;
&-end {
position: absolute;
width: 100%;
bottom: 0;
}
}
&--usps {
height: auto;
background: transparent;
ul {
height: 100%;
@include mq($screen-m) {
height: auto;
}
}
}
}
.usp {
@include mq($screen-m) {
align-items: center;
justify-content: center;
padding: 0 $spacer--5;
&:first-child {
align-items: flex-start;
justify-content: flex-start;
padding-left: 0;
}
&:last-child {
align-items: flex-end;
justify-content: flex-end;
padding-right: 0;
}
}
span small {
@include mq($screen-m) {
margin-left: -15px;
}
}
}
.fps {
&.colorscheme {
&-light {
background: $bg-color-base;
.vertical,
.horizontal {
background: $bg-color-base;
}
}
&-dark {
background: $bg-color-base;
}
}
display: grid;
grid-template-rows: 1fr auto;
width: 100vw;
grid-template-areas:
"image"
"text";
@include mq($screen-m) {
height: 100vh;
}
&__asset {
overflow: hidden;
position: relative;
grid-area: image;
}
&__image {
position: relative;
height: 100%;
width: 100%;
&--picture {
display: block;
height: 100%;
}
}
&__objectfit-position {
&__center {
object-position: 50% 50%;
object-fit: cover;
height: 100%;
}
}
}
.text {
&-flying {
.flying {
display: none;
@include mq($screen-xl) {
display: block;
}
}
.vertical {
display: none;
}
.horizontal {
@include mq($screen-xl) {
display: none;
}
}
}
&-horizontal {
&.align-top {
.fps {
@include mq($screen-xl) {
grid-template-areas: "text" "image";
}
}
}
.flying {
display: none;
}
.vertical {
display: none;
}
.horizontal {
display: block;
grid-area: text;
padding: 1.5rem 0;
}
}
&-vertical {
.fps {
@include mq($screen-xl) {
grid-template: "image text"/auto 416px;
}
}
&.align-right {
.fps {
@include mq($screen-xl) {
grid-template: "text image"/416px auto;
}
}
}
.flying {
display: none;
}
.horizontal {
@include mq($screen-xl) {
display: none;
}
}
.vertical {
display: none;
grid-area: text;
@include mq($screen-xl) {
display: block;
}
}
}
}
.banner--footer {
display: grid;
z-index: 1;
overflow: hidden;
@include mq($screen-m) {
max-height: $page-slice--footer-cta-max-height\@medium;
}
@include mq($screen-l) {
max-height: $page-slice--footer-cta-max-height\@large;
}
@include mq($screen-xl) {
max-height: $page-slice--footer-cta-max-height\@extra-large;
}
&__background {
grid-area: 1/-1;
z-index: 2;
.image {
display: block;
min-height: 60vh;
@include mq($screen-l) {
max-height: 100%;
}
}
}
&__wrapper {
align-items: flex-start;
display: flex;
flex-flow: column nowrap;
grid-area: 1/-1;
margin: 0 auto;
text-align: center;
width: 100%;
z-index: 3;
justify-content: center;
@include mq($screen-m) {
max-height: $page-slice--footer-cta-max-height\@medium;
}
@include mq($screen-l) {
max-height: $page-slice--footer-cta-max-height\@large;
}
@include mq($screen-xl) {
max-height: $page-slice--footer-cta-max-height\@extra-large;
}
}
}
.footer_logo {
&--image {
max-width: 60%;
margin: 0 auto;
}
}
.slice-nav {
display: none;
position: absolute;
bottom: 0;
color: $white;
list-style: none;
overflow: hidden;
&.left-corner-transparent {
z-index: 2;
}
&.left-side-white-background {
background: $bg-color-base;
color: $color-primary;
}
@include mq($screen-m) {
display: block;
}
ul.left-corner-transparent {
z-index: 2;
position: sticky;
overflow: hidden;
min-height: 394px;
min-width: 272px;
padding: 2rem 2rem 0;
list-style: none;
display: none;
}
li {
padding-bottom: $spacer;
}
a {
color: $page-slice--slice-nav__color;
&:hover {
text-decoration: none;
font-weight: 400;
transition: none;
}
}
&--number {
font-size: $font-size-extra-large;
}
&--text {
font-size: $font-size-medium;
}
&:hover,
&.active {
color: $page-slice--slice-nav__color\@active;
}
.octagon {
display: none;
position: absolute;
width: $page-slice--octagon__size;
height: $page-slice--octagon__size;
bottom: $page-slice--octagon__top;
right: $page-slice--octagon__right;
z-index: 1;
transform: rotate(10deg);
@include mq($screen-m) {
display: block;
width: $page-slice--octagon__size\@medium;
height: $page-slice--octagon__size\@medium;
bottom: $page-slice--octagon__top\@medium;
left: $page-slice--octagon__right\@medium;
}
@include mq($screen-l) {
width: $page-slice--octagon__size\@large;
height: $page-slice--octagon__size\@large;
bottom: $page-slice--octagon__top\@large;
left: $page-slice--octagon__right\@large;
}
@include mq($screen-xxxl) {
width: $page-slice--octagon__size\@extra-large;
height: $page-slice--octagon__size\@extra-large;
bottom: $page-slice--octagon__top\@extra-large;
left: $page-slice--octagon__right\@extra-large;
}
@media screen and (max-height: 820px) {
display: none;
}
}
}
}
There are no notes for this item.