@charset 'UTF-8'; @include organism(hero) { position: relative; z-index: z_index(background); margin-bottom: rhythm(4); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; .supersize { + [class*='buttons'] { margin-top: rhythm(2); @include bp-up(lg) { margin-top: rhythm(3); } } } @include bp-up(sm) { overflow: hidden; background-color: transparent; } @include e(image) { display: block; object-fit: cover; object-position: 50% 25%; width: 100%; @include bp-up(sm) { min-height: rem(500px); max-height: 50vh; } } @include e(caption) { display: flex; align-items: flex-end; padding: rhythm(2) 0; background-image: none; @include bp-up(sm) { position: absolute; z-index: z_index(middlegroundImportant); top: 0; right: 0; bottom: 0; left: 0; padding: rhythm(4); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-black, 0) 35%, rgba($color-black, 1) 100%); text-shadow: $text-shadow; } @include bp-up(md) { padding: rhythm(6); } @include bp-up(lg) { padding: rhythm(8); } } @include e(paragraph) { color: $color-cyberspace; @include plumber( $font-size: 2.5, $line-height: 3 ); @include bp-up(sm) { color: $color-snow; } } @include e(tags) { margin-top: rhythm(2); @include bp-up(lg) { margin-top: rhythm(3); } @include bp-down(sm-xs) { [class*="tag--light"] { [class*="tag__text"] { color: $color-cyberspace; } } } } @include e(buttons) { display: flex; flex-direction: row; flex-wrap: wrap; margin: -#{rhythm(1)} 0 0 -#{rhythm(3)}; @include atom(button) { margin: rhythm(1) 0 0 rhythm(3); } @include bp-up(sm) { flex-direction: row; } } @include e(text) { :last-child { margin-bottom: 0; } @include bp-up(sm) { color: $color-snow; } @include bp-up(md) { max-width: 100%; } @include bp-up(lg) { max-width: 70%; } @include bp-up(xxl) { max-width: 60%; } } @include b(a-tag) { @include tag; @include bp-up(sm) { @include tag-light; } } @include e(link) { color: $color-cyberspace; text-decoration: none; &:hover, &:focus { text-decoration: underline; } &::after { content: ''; display: block; position: absolute; top: 0; right: 0,; bottom: 0; left: 0; cursor: pointer; } > p { @include plumber( $font-size: 2.5, $line-height: 3 ); } + [class*='buttons'] { margin-top: rhythm(2); @include bp-up(lg) { margin-top: rhythm(3); } } @include bp-up(sm) { color: $color-snow; } } // Hero without image @include m(no-image) { background-color: transparent; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; @include e(caption) { position: static; background-image: none; text-shadow: none; .wrapper { padding-right: 0; padding-left: 0; @include bp-up(sm) { padding-right: $grid-gutter-width; padding-left: $grid-gutter-width; } } @include bp-down(md) { padding-right: 0; padding-left: 0; } } @include e(paragraph) { color: $color-cyberspace; } &.alignfull { @include e(caption) { .wrapper { padding-right: rhythm(2); padding-left: rhythm(2); } } } @include e(link) { color: $color-cyberspace; } @include e(text) { color: $color-cyberspace; } @include e(paragraph) { @extend %preamble; } @include b(a-tag) { @include tag; [class*=text] { color: $color-cyberspace; } } @include bp-up(md) { @include e(text) { max-width: 85%; } } @include bp-up(lg) { @include e(text) { max-width: 67%; } } } @include m(timeline) { @include e(caption) { background-color: $color-snow; @include bp-up(sm) { background-color: transparent; } } } // Hero with earlier mobile breakpoint @include m(break-early) { @include e(caption) { @include bp-up(sm) { position: static; padding: rhythm(2) 0; } @include bp-up(md) { padding: rhythm(3) rhythm(1); } @include bp-up(lg) { position: absolute; z-index: z_index(middlegroundImportant); top: 50%; right: 0; bottom: auto; left: 0; padding: rhythm(4); transform: translateY(-50%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-black, 0) 55%, rgba($color-black, 1) 100%); text-shadow: 0 0 rhythm(2) rgba($color-black, 0.5); } @include bp-down(md) { [class*="tag--light"] { [class*="tag__text"] { color: $color-cyberspace; } } } } @include e(text) { max-width: 100%; @include bp-up(lg) { max-width: 70%; } @include bp-only(lg) { .supersize { @include plumber( $font-size: 6, $line-height: 7, $leading-bottom: 2 ); } } @include bp-up(xl) { max-width: 50%; } } @include e(link) { color: $color-cyberspace; text-shadow: none; @include bp-up(lg) { color: $color-snow; text-shadow: 0 0 rhythm(2) rgba($color-black, 0.5); } } @include b(a-tag) { @include tag; @include bp-up(lg) { @include tag-light; } } } @include m(no-break) { @include e(image) { aspect-ratio: 1 / 1; object-position: 100% 25%; @include bp-up(sm-xs) { aspect-ratio: 4 / 3; } @include bp-up(sm) { aspect-ratio: 16 / 9; } @include bp-up(md) { object-position: 50% 25%; } } @include e(caption) { position: absolute; z-index: z_index(middlegroundImportant); top: 0; right: 0; bottom: 0; left: 0; padding: rhythm(1) rhythm(1) rhythm(4) rhythm(1); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-black, 0) 35%, rgba($color-black, 1) 100%); text-shadow: $text-shadow; @include bp-up(sm) { padding: rhythm(2) rhythm(2) rhythm(4) rhythm(2); } @include bp-up(md) { padding: rhythm(4); } } @include e(text) { color: $color-snow; } @include e(link) { color: $color-snow; } } // Hero without darkened caption @include m(clean) { @include e(caption) { background: none; } } // Hero with border-radius @include m(border-radius) { border-radius: $border-radius; @include e(image) { border-radius: $border-radius; } @include bp-up(md) { @include e(text) { max-width: 100%; .supersize { @include plumber( $font-size: 4.5, $line-height: 5, $leading-bottom: 1 ); } } } @include bp-up(lg) { @include e(text) { max-width: 90%; } } @include bp-up(xxl) { @include e(text) { max-width: 80%; .supersize { @include plumber( $font-size: 7, $line-height: 8, $leading-bottom: 2 ); } } } @include bp-only(xs) { .wrapper { padding-left: 0; padding-right: 0; } } } // Hero with video @include m(video) { margin-top: rem(20px); //padding-top: 56.25%; iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } @include bp-up(lg) { margin-top: rhythm(4); } } @include m(video-wide) { width: 100%; @include e(video) { width: 100%; object-fit: cover; object-position: 50% center; @include bp-up(sm) { min-height: rem(500px); max-height: 50vh; } } } // Event @include m(event) { width: 100%; [class*='share'] { a { > svg { &[class*='facebook'], &[class*='linkedin'] { border-radius: $border-radius; background-color: $color-snow; } } } } @include e(content) { padding: rhythm(2) 0; @include bp-up(sm) { padding: rhythm(4); } @include e(icon) { position: relative; width: $icon-size-medium; height: $icon-size-medium; margin-left: rhythm(0.5); transform: translateY(rem(1px)); fill: currentColor; @include m(external) { width: $icon-size-smallest; height: $icon-size-smallest; } } } @include e(text) { margin-bottom: 0; color: $color-cyberspace; } @include e(spacer) { display: inline-flex; margin-right: rhythm(1); } } // Geometric @include m(geometric) { position: relative; overflow: hidden; &::after { content: ''; position: absolute; z-index: z_index(background); top: 25%; left: -25%; width: rem(250px); height: rem(250px); transform: translate(calc(-150% - #{rem(20px)}), -50%) rotate(-20deg); transform-origin: center left; animation: spin 240s linear infinite; animation-direction: alternate; background-color: $color-lemon; @include bp-up(sm) { left: -15%; } @include bp-up(xl) { left: 0; animation-duration: 120s; } } &::before { content: ''; position: absolute; top: 75%; right: -25%; width: rem(250px); height: rem(80px); transform: translate(calc(120% + #{rem(20px)}), 50%) rotate(20deg); transform-origin: center center; animation: spin 240s linear infinite; animation-direction: alternate-reverse; background-color: $color-lemon; @include bp-up(sm) { right: -15%; } @include bp-up(xl) { right: 0; animation-duration: 120s; } } @include bp-up(xl) { h1 { max-width: 60%; } } @include e(content) { position: relative; z-index: z_index(middleground); } @keyframes spin { from { transform: rotate(20deg); } to { transform: rotate(379deg); } } } }