// ============================================================================ // :: Home // ============================================================================ /** * The styling applied to the tag on the page containing the 'p-home' * class */ // ============================================================================ // :: Root // ============================================================================ .p-home { // hero .m-hero { position: relative; height: 130vw; @include respond-at($screen-1x-small) { height: 75vw; } @include respond-at($screen-medium-base) { height: 45vw; max-height: 80rem; } &::after { display: none; } .m-hero__content-container { position: relative; bottom: 25vw; display: flex; justify-content: flex-end; align-items: flex-start; max-width: $container-width; height: 100%; @include respond-at($screen-small-base) { bottom: 20vw; } @include respond-at($screen-large-base) { bottom: 12vw; } } .m-hero__content { transition: opacity 1s ease-in-out, transform 2.8s cubic-bezier(0.23, 1, 0.32, 1); } .m-hero__title { font-family: $font-family-beausans; font-weight: $font-weight-normal; font-size: $font-size-3x-large; line-height: $line-height-4x-large; text-align: left; text-shadow: $text-shadow-dark; opacity: 0.9; @include respond-at($screen-small-base) { font-size: 6.4rem; line-height: $line-height-6x-large; text-align: left; } } } .m-doormat { z-index: $z-index-high; margin-top: -4.3rem; @include respond-at($screen-small-base) { margin-top: -4rem; } @include respond-at($screen-medium-base) { margin-top: -15rem; } } } .p-home__batteries-at-home { .m-section__container { background-color: $background-color-grey-extra-light; } } .p-home__split { display: flex; width: calc(100% + 2rem); } .p-home__intro { background-color: $background-color-grey-extra-light; }