.cover__container { position: relative; min-height: 50rem; } .cover__back { position: absolute; height: 100%; width: 100%; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position-x: center; background-position-y: center; z-index: 1; // to center the video text-align: center; display: flex; justify-content: center; video { width: 100%; height: 100%; background-color: gray; object-fit: cover; position: relative; } } .cover__content { z-index: 10; position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; } .cover__overlay { position: absolute; width: 100%; height: 100%; position: absolute; z-index: 2; background-color: rgba(14, 14, 14, 0.2); } .dark-section { background-color: #025E73; color: white; box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.2); h2 { color: white; } } .trailer-section { @extend .dark-section; .video { z-index: 3; position: relative; } } .landing-section { @extend .dark-section; position: relative; .side-icon { position: absolute; z-index: 1; left: 20px; bottom: -100px; opacity: 0.4; svg { width: 300px; } } .section-title { padding-top: 2rem; } .landing-section__content { z-index: 2; position: relative; } } .news-section { .side-icon { left: -50px; bottom: -75px; svg { width: 500px; opacity: 0.3; } } .separator { width: 100%; border: 1px solid rgba(255, 255, 255, 0.2); margin: 1rem 0; } .article-cards { margin-bottom: 1rem; } } @keyframes cover_title_in { 0% { left: -10rem; } 100% { left: 0; } } .cover__title-container { position: relative; padding-top: 1rem; padding-bottom: 1rem; animation: cover_title_in 0.5s cubic-bezier(.39,.58,.57,1); background-color: rgba(1, 1, 1, 0.5); } .cover__title { font-weight: bold; color: white; font-size: 3em; margin: 0; margin-bottom: 0; z-index: 2; // position: absolute; display: block; } .cover__backdrop { } .landing__title { font-weight: 2rem; } .accent-separator { width: 100%; height: 0; border-bottom: .3rem solid $accent; } @import 'landing/timeline.scss'; @media (max-width: $lg-breakpoint) { .cover__back { } } @media (min-width: $lg-breakpoint) { .cover__back { background-position-x: center; // background-position-y: -1.5rem; } } .compare-section { .compare-items { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1rem; figure { margin: 0; } } .compare-item { display: block; margin-bottom: 1rem; img { display: block; width: 100%; object-fit: contain; } } @keyframes compare-anim { 0% { } 100% { } } .compare-items-dynamic { .compare-duet { border-radius: 4px; overflow: hidden; position: relative; .compare-hidden { position: absolute; top: 0; left: 0; overflow: hidden; clip-path: inset(100% 100% 100% 0%); } .compare-hidden { clip-path: inset(100% 100% 100% 0%); transition: clip-path 2s cubic-bezier(.86,0,.07,1); animation-fill-mode: forwards; } } .compare-duet:hover { .compare-hidden { clip-path: inset(100% 100% 100% 100%); } } } } @media (max-width: $sm-breakpoint) { .compare-section { .compare-items { grid-template-columns: 1fr; } } } .history-summary { display: grid; grid-template-columns: 3fr 1fr; grid-column-gap: 2rem; } .history-summary__image { display: flex; align-items: center; } .landing-main { section:first-of-type { border-top: 1px solid rgba(1, 1, 1, 0.2); } section { border-bottom: 1px solid rgba(1, 1, 1, 0.2); } } .partners-container .carousel { border-top: 1px solid #eee; } .partner-comment__container { height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(1, 1, 1, 0.05); .partner-comment { padding-bottom: 1rem; display: flex; flex-direction: column; align-items: center; } .partner-comment__quote-container { display: flex; width: 80%; margin: 0 auto; p { text-align: center; margin: 2.5rem auto; position: relative; display: block; font-style: italic; font-weight: 300; } .quote-decoration { display: flex; flex-direction: column; svg { fill: rgba(0, 0, 0, 0.2); width: 3rem; height: 3rem; } } .quote-before { justify-content: flex-start; } .quote-after { justify-content: flex-end; svg { transform: rotate(180deg) } } } .partner-comment__author { margin-top: .5rem; display: flex; flex-direction: column; align-items: center; } .partner-comment__author-picture { width: 10rem; aspect-ratio: 1; // border-radius: 50%; } .partner-comment__author-name { margin-top: .5rem; } .partner-comment__author-link:hover { opacity: 0.6; } } .history-component__content { } .history-carousel { background: rgba(1, 1, 1, 0.05); } .history-container { .double-horizontal-image-container { display: grid; grid-template-columns: 1fr 1fr; img { width: 100%; height: 17rem; object-fit: cover; } } } @media (max-width: $md-breakpoint) { .history-container { } .side-icon { display: none; } }