@charset "UTF-8"; @include organism(video-guide) { flex-direction: column; background-color: $color-snow; border-radius: $border-radius; overflow: hidden; @include e(inner-wrapper) { width: 100%; position: relative; } > figure { display: flex; overflow: hidden; position: relative; } @include e(video-container) { position: relative; padding-top: 70vh; width: 100%; display: flex; flex-direction: column; justify-content: center; @include bp-up(sm) { padding-top: 76.25%; } @include bp-up(md) { padding-top: 56.25%; } } @include e(timeline-item) { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; justify-content: center; transition: opacity 0.25s ease-out; margin: 0; padding: 0; &:first-child, &.is-current { opacity: 1; } &.is-current ~ & { opacity: 0; } img { border-radius: 0; object-fit: cover; object-position: 50% 25%; height: 100%; width: 100%; } @include e(text) { position: absolute; top: 50%; left: 0; right: 0; text-align: center; padding-left: rhythm(2); padding-right: rhythm(2); transform: translateY(-75%); @include bp-up(md) { transform: translateY(-50%); padding-left: rhythm(4); padding-right: rhythm(4); } @include bp-up(lg) { transform: translateY(-50%); } @include bp-up(xl) { left: rhythm(8); width: calc(100% - rhythm(16)); } @include e(headline) { font-family: $font-family-bold; color: $color-snow; text-shadow: 0 0 rem(50px) rgba($color-black, 1), 0 0 rem(10px) rgba($color-black, 1), rem(1px) rem(1px) rem(2px) rgba($color-black, 0.6); @include plumber( $font-size: 3, $line-height: 4, $leading-bottom: 1, $baseline: $headings-baseline ); @include bp-up(sm) { @include plumber( $font-size: 4.5, $line-height: 5, $leading-bottom: 1 ); } @include bp-up(lg) { @include plumber( $font-size: 7, $line-height: 8, $leading-bottom: 2 ); } } > a { font-size: $size-base * 1.3; font-family: $font-family-headings; padding: rhythm(0.5) rhythm(2); color: $color-peacock; text-decoration: none; line-height: 1; position: relative; &::after { content: ''; position: absolute; z-index: -2; width: 100%; height: 100%; background-color: rgba($color-black, 0.7); bottom: 0; left: 0; } &::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 e(video) { display: block; position: absolute; left: auto; right: auto; bottom: 0; z-index: 2; width: 150px; height: 150px; &.is-loading { background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-ring' style='background: none;'%3E%3Ccircle cx='50' cy='50' ng-attr-r='%7B%7Bconfig.radius%7D%7D' ng-attr-stroke='%7B%7Bconfig.base%7D%7D' ng-attr-stroke-width='%7B%7Bconfig.width%7D%7D' fill='none' r='43' stroke='%23a7d8fd' stroke-width='7'%3E%3C/circle%3E%3Ccircle cx='50' cy='50' ng-attr-r='%7B%7Bconfig.radius%7D%7D' ng-attr-stroke='%7B%7Bconfig.stroke%7D%7D' ng-attr-stroke-width='%7B%7Bconfig.innerWidth%7D%7D' ng-attr-stroke-linecap='%7B%7Bconfig.linecap%7D%7D' fill='none' r='43' stroke='%2350b2fc' stroke-width='7' stroke-linecap='square' transform='rotate(27.6965 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' calcMode='linear' values='0 50 50;180 50 50;720 50 50' keyTimes='0;0.5;1' dur='2.5s' begin='0s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Canimate attributeName='stroke-dasharray' calcMode='linear' values='9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182' keyTimes='0;0.5;1' dur='2.5' begin='0s' repeatCount='indefinite'%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center center; background-size: 30% 30%; } @include bp-up(sm) { left: 0; } @include bp-up(lg) { width: 200px; height: 200px; } @include bp-up(xxl) { width: 250px; height: 250px; } } @include e(controls) { background-color: $color-snow; display: flex; align-items: center; justify-content: space-between; padding: rhythm(2); flex-direction: column-reverse; overflow: hidden; @include bp-up(sm) { transform: translateX(0); } @include bp-up(md) { align-items: stretch; flex-direction: row; } } @include e(title) { line-height: 1; margin-top: rhythm(1); } @include e(chapters) { width: 100%; display: flex; flex-direction: column; @include e(list) { width: 100%; height: 100%; list-style-type: none; margin: 0; padding: 0; > li { display: flex; align-items: center; background-color: $color-snow; font-size: $size-medium; display: none; line-height: 1; @include bp-up(md) { font-size: $size-medium-plus; } &.is-current-item { display: block; } } } @include bp-up(md) { align-items: stretch; } } @include e(timelineposts) { z-index: 2; width: 250px; min-width: 250px; background-color: $color-cyberspace; position: relative; transform: translateX(100%); transition: transform 0.25s ease-out; flex-shrink: 0; position: absolute; top: 0; right: 0; bottom: 0; @include bp-up(md) { transform: translateX(0); position: relative; top: auto; right: auto; bottom: auto; } @include bp-up(xl) { width: 350px; } &.is-visible { transform: translateX(0); } @include e(list) { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; dt { color: $color-snow; font-family: $font-family-headings; padding: rhythm(1) rhythm(2); @include bp-up(md) { padding-top: rhythm(2); padding-bottom: rhythm(2); } } dd { padding: 0; margin: 0; display: block; border-top: 1px solid lighten($color-cyberspace, 10%); } } @include e(link) { display: flex; padding: rhythm(1) rhythm(2); color: $color-snow; text-decoration: none; font-size: $size-medium; position: relative; line-height: 1.5; border-left: 0 solid $color-peacock; transition: all 0.25s ease-out; &::after { content: attr(data-label); display: block; background-color: $color-lemon; color: $color-cyberspace; font-family: $font-family-headings; padding: rhythm(1); line-height: 1; align-self: flex-end; white-space: nowrap; border-radius: $border-radius; transform: translateX(rhythm(0.5)); margin-left: rhythm(1); overflow: hidden; transition: transform 0.25s ease-out; transform: scale(0); opacity: 0; } &:hover, &:focus, &.is-current { background-color: lighten($color-cyberspace, 10%); &::after { overflow: visible; transform: scale(100%); opacity: 1; } } &.is-current { font-family: $font-family-headings; border-left: rhythm(1) solid $color-peacock; &::after { background-color: $color-peacock; color: $color-snow; } } } @include e(button-navigation) { transform: translateX(-100%); background-color: $color-cyberspace; border-bottom-left-radius: $border-radius; @include bp-up(md) { display: none; } &.is-toggeled { transform: translateX(0) scaleX(-1); position: absolute; right: rhythm(2); z-index: 2; } } } @include e(buttons) { display: flex; align-items: center; } @include e(button) { display: flex; align-items: center; margin: 0 rhythm(1); padding: 0; border: 0; background-color: transparent; &:disabled, &:disabled:focus, &:not([class*="play"]):not([class*="subtitles"]):not([class*="chapter"]), &:disabled:focus-visible { pointer-events: none; cursor: not-allowed; > svg { fill: $color-concrete; } } &:hover { > svg { fill: $color-peacock; } } @include m(subtitles) { &.is-active { svg { fill: $color-peacock; } } } } @include e(countdown) { font-size: $size-medium-plus; padding-left: rhythm(1); padding-right: rhythm(1); } @include e(play-icon) { width: $icon-size-large * 1.5; height: $icon-size-large * 1.5; } @include e(rewind-icon) { width: $icon-size-large; height: $icon-size-large; } @include e(forward-icon) { width: $icon-size-large; height: $icon-size-large; } @include e(subtitles-icon) { width: $icon-size-large * 1.2; height: $icon-size-large * 1.2; } @include e(subtitles) { text-align: center; width: auto; position: absolute; bottom: rhythm(1); right: rhythm(1); z-index: 3; font-family: $font-family-headings; min-width: 200px; max-width: 300px; display: none; padding: rhythm(0.5) rhythm(1); line-height: 1.7; @include bp-up(sm) { font-size: $size-base; padding: rhythm(1) rhythm(2); min-width: 300px; max-width: 400px; } @include bp-up(md) { font-size: $size-base * 1.5; padding: rhythm(2) rhythm(4); min-width: 400px; max-width: 600px; } @include bp-up(lg) { font-size: $size-base * 1.7; min-width: 500px; max-width: 700px; bottom: rhythm(2); align-self: flex-end; right: rhythm(2); } @include bp-up(xxl) { max-width: 800px; } &.is-visible { display: inline-block; &:empty { display: none; } } > span { background-color: rgba($color-black, 0.8); color: $color-snow; } } @include e(button-abort) { position: absolute; top: rhythm(1); left: rhythm(1); flex-grow: 0; z-index: 2; font-size: $size-small; @include bp-up(md) { font-size: initial; } } }