vendure/docs/assets/styles/intro/intro.scss

@import "../variables";
@import "variables";
@import "terminal";
@import "storefront";
@import "admin-ui";
@import "cube";
@import "data-flow";

.vendure-intro {
    --color-top: #17c1ff;
    --color-left: #30c6fd;
    --color-right: #13b7f3;
    --color-shadow: rgba(94, 94, 94, 0);
    --width-unit: 9vw;
    --border-width: calc(.0 * var(--width-unit));
    --border-style: dashed;
    --front-border-width: 0;
    --border-color: rgb(95, 95, 95);

    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 56%, #d7d8d1 100%);
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
    height: 100vh;
    padding-top: 10vh;
    transition: padding-top 0.2s;

    @media all and (max-width: $sm-breakpoint) {
        padding-top: 10vh;
    }
    @media all and (min-height: 1000px) {
        padding-top: 5vh;
    }
    @media all and (min-width: $lg-breakpoint) {
        // --width-unit: 10vh;
    }
}

.intro-container {
    max-width: $container-max-width;
    margin: auto;
    position: relative;
    transition: opacity 1s;
    opacity: 0;

    &.visible {
        opacity: 1;
    }
}

.scene {
    perspective: calc(10 * var(--width-unit));
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40vw;
    transform: rotateX(-45deg);
    transition: transform $transition-duration, perspective $transition-duration;
    font-family: sans-serif;
    @media all and (min-height: 1000px) {
        height: 50vw;
    }

}

.intro-title {
    top: 18vw;
    right: 36px;
    position: absolute;
    text-align: right;
    max-width: $lg-breakpoint;
    margin: auto;
    opacity: 0;
    transform: translateY(-20px);
    visibility: hidden;
    transition: visibility 0s, opacity 2s, transform 2.5s ease-out;

    &.visible {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }

    a:link, a:visited {
        color: $color-link;
        text-decoration: none;
    }

    a:hover {
        color: $color-link;
    }

    h1 {
        color: $brand-color;
        font-size: calc(0.9 * var(--width-unit));
        margin: 0 0 15px;
        font-family: $brand-font-face;
    }

    .subhead {
        max-width: calc(4 * var(--width-unit));
        font-size: calc(0.3 * var(--width-unit));
        color: desaturate($brand-color, 50%);
        margin: auto;
    }
    .more-icon {
        width: calc(1 * var(--width-unit));
        transform: rotateZ(180deg);
        opacity: 0.1;
    }
    @media all and (min-width: $lg-breakpoint) {
        h1 {
            font-size: 6em;
        }
        .subhead {
            font-size: 2em;
        }
        .more-icon {
            width: 7em;
        };
    }
    @media all and (min-height: 1000px) {
        top: 26vw;
    }
    @media all and (max-width: $sm-breakpoint) {
        top: 60vw;
        right: 0;
        text-align: center;
        padding: 0 24px;
        h1 {
            font-size: 4em;
        }
        .subhead {
            font-size: 1.5em;
            max-width: 100%;
        }
    }
}

.intro-controls {
    z-index: 1;
    text-align: center;

    .jump {

        button {
            border-radius: 50%;
            border: 1px;
            padding: 0;
            background-color: $gray-100;
            width: 16px;
            height: 16px;
            transition: background-color 0.8s;
            &.active {
                background-color: $gray-200;
            }
        }
    }

    button#replay {
        border: none;
        background: none;
        opacity: 0;
        transition: opacity 4s;
        &.visible {
            opacity: 0.3;
        }
    }
}

.intro-gql-logo {
    filter: saturate(0%);
}

/*
 * Makes the cubes aligned in a row
 */
@mixin aligned {
    &.scene {
        transform: rotateX(0);
    }
    .cube {
        transform: rotateY(0);
        margin: calc(0.5 * var(--width-unit));
    }
    .cube__face {
        background-color: transparent;
    }
    .cube__face--front {
        background-color: $terminal-color;
        box-shadow: $shadow;
    }
}

@mixin focus-terminal {
    .cube1, .cube3 {
        max-width: 0px;
        .cube__face {
            background-color: transparent;
            box-shadow: 0px 6px 15px -2px transparent;
        }
    }
    .cube2 {
        .cube__face {
            background-color: transparent;
            box-shadow: 0px 6px 15px -2px transparent;
        }
    }
    .intro-terminal {
        font-size: calc(0.24 * var(--width-unit));
        width: calc(4 * var(--width-unit));
        height: calc(4 * var(--width-unit));
        top: calc(-1 * var(--width-unit));
        left: calc(-1 * var(--width-unit));
        box-shadow: $shadow;
    }
    .intro-text-area {
        padding: calc(0.4 * var(--width-unit)) calc(0.18 * var(--width-unit));
    }
    .intro-terminal-controls {
        position: relative;
        margin-left: calc(0.21 * var(--width-unit));
        margin-top: calc(0.07 * var(--width-unit));
        width: calc(0.1 * var(--width-unit));
        height: calc(0.1 * var(--width-unit));
        &:before {
            left: calc(-0.15 * var(--width-unit));
            width: calc(0.1 * var(--width-unit));
            height: calc(0.1 * var(--width-unit));
        }
        &:after {
            left: calc(0.15 * var(--width-unit));
            width: calc(0.1 * var(--width-unit));
            height: calc(0.1 * var(--width-unit));
        }
    }
}

@mixin dataFlowing {
    .data-flow-left {
        width: calc(1 * var(--width-unit));
        left: calc(-1 * var(--width-unit));
        transition: width 0.5s 0.3s, left 0.5s 0.3s;
    }
    .data-flow-right {
        width: calc(1 * var(--width-unit));
        right: calc(-1 * var(--width-unit));
        transition: width 0.5s 0.6s, right 0.5s 0.6s;
    }
    .cube1 {
        .cube__face--front {
            background-color: $brand-color;
            transition: background-color 0.3s 0.8s;
        }
    }
    .cube3 {
        .cube__face--front {
            background-color: $brand-color;
            transition: background-color 0.3s 1.1s;
        }
    }
    .intro-gql-logo {
        opacity: 1;
        transition: opacity 4.6s;
        img {
            transform: translateY(0);
        }
    }
}

.scene-0 {
    @include aligned;
    @include focus-terminal;
    .intro-admin-ui, .intro-storefront {
        opacity: 0;
    }
}

.scene-1 {
    @include aligned;
    @include focus-terminal;
    .intro-admin-ui, .intro-storefront {
        opacity: 0;
    }
}

.scene-2 {
    @include aligned;
    .intro-admin-ui, .intro-storefront {
        opacity: 0;
    }
    .cube__face--front {
        background-color: $terminal-color;
    }
    .cube1 {
        .cube__face {
            transition: background-color 0.8s 0s, box-shadow 0.5s 0s;
        }
    }
    .cube2 {
        .cube__face {
            transition: background-color 0.8s 1s, box-shadow 0.5s 0.4s;
        }
    }
    .cube3 {
        .cube__face {
            transition: background-color 0.8s 0.3s, box-shadow 0.5s 0.3s;
        }
    }
}

.scene-3 {
    @include aligned;
    @include dataFlowing;
    .intro-admin-ui, .intro-storefront {
        opacity: 0;
    }
}

.scene-4 {
    @include aligned;
    @include dataFlowing;
    .intro-admin-ui {
        opacity: 1;
        transition: opacity 0.8s 0.3s;
    }
    .intro-storefront {
        opacity: 1;
        transition: opacity 0.8s 0.5s;
    }
}

.scene-5 {
    .intro-admin-ui {
        opacity: 0;
        transition: opacity 0.2s;
    }
    .intro-storefront {
        opacity: 0;
        transition: opacity 0.2s;
    }
    .intro-gql-logo {
        opacity: 1;
    }
    .intro-terminal {
        opacity: 0;
    }
    .cube2, .cube3 {
        .cube__face--front {
            background-color: var(--color-right);
        }
    }
    $cube-easing: cubic-bezier(.11,.73,.84,.55);
    $cube-duration: 0.5s;
    .cube1 {
        .cube__face {
            transition: transform $cube-duration, background-color 0.1s 0.1s;
        }
    }
    .cube2 {
        .cube__face {
            transition: transform $cube-duration, background-color 0.3s 0.1s;
        }
    }
    .cube3 {
        .cube__face {
            transition: transform $cube-duration, background-color 0.1s 0.1s;
        }
    }
    .cube__face {
        --projection: 1.3;
        &.cube__face--front {
            animation: projectFront;
            animation-duration: $cube-duration;
            animation-fill-mode: both;
            animation-timing-function: $cube-easing;
        }

        &.cube__face--right {
            transform: rotateY( 90deg) translateZ(calc(1 * var(--width-unit)));
        }

        &.cube__face--back {
            transform: rotateY(180deg) translateZ(calc(1 * var(--width-unit)));
        }

        &.cube__face--left {
            animation: projectLeft;
            animation-duration: $cube-duration;
            animation-fill-mode: both;
            animation-timing-function: $cube-easing;
        }

        &.cube__face--top {
            animation: projectTop;
            animation-duration: $cube-duration;
            animation-fill-mode: both;
            animation-timing-function: $cube-easing;
        }

        &.cube__face--bottom {
            transform: rotateX(-90deg) translateZ(calc(1 * var(--width-unit)));
        }
    }
}

.scene-6 {
    @media all and (min-width: $sm-breakpoint) {
        transform: rotateX(-45deg) translateX(calc(-2 * var(--width-unit)));
    }
    .cube {
        transition: none;
    }
    .intro-admin-ui {
        opacity: 0;
        transition: opacity 0.2s;
    }
    .intro-storefront {
        opacity: 0;
        transition: opacity 0.2s;
    }
    .intro-gql-logo {
        opacity: 1;
    }
    .intro-terminal {
        opacity: 0;
    }
    .cube2, .cube3 {
        .cube__face--front {
            background-color: var(--color-right);
        }
    }
    .cube__face {
        transition: none;
    }
    $shimmerDuration: 8s;
    $shimmerTiming: ease-in-out;
    .cube1 {
        .cube__face--top { animation: shimmerTop $shimmerDuration $shimmerTiming $shimmerDuration * 0.02 infinite; }
        .cube__face--left { animation: shimmerLeft $shimmerDuration $shimmerTiming infinite; }
    }
    .cube2 {
        .cube__face--top { animation: shimmerTop $shimmerDuration $shimmerTiming $shimmerDuration * 0.05 infinite; }
        .cube__face--left { animation: shimmerLeft $shimmerDuration $shimmerTiming $shimmerDuration * 0.05 infinite; }
        .cube__face--front { animation: shimmerRight $shimmerDuration $shimmerTiming $shimmerDuration * 0.082 infinite; }
    }
    .cube3 {
        .cube__face--top { animation: shimmerTop $shimmerDuration $shimmerTiming $shimmerDuration * 0.1 infinite; }
        .cube__face--front { animation: shimmerRight $shimmerDuration $shimmerTiming $shimmerDuration * 0.12 infinite; }
    }
}

@keyframes projectFront {
    0% {
        transform: rotateY(0deg) translateZ(calc(1 * var(--width-unit)));
    }
    20% {
        transform: rotateY(0deg) translateZ(calc(var(--projection) * var(--width-unit)));
    }
    100% {
        transform: rotateY(0deg) translateZ(calc(1 * var(--width-unit)));
    }
}

@keyframes projectLeft {
    0% {
        transform: rotateY(-90deg) translateZ(calc(1 * var(--width-unit)));
    }
    20% {
        transform: rotateY(-90deg) translateZ(calc(var(--projection) * var(--width-unit)));
    }
    100% {
        transform: rotateY(-90deg) translateZ(calc(1 * var(--width-unit)));
    }
}

@keyframes projectTop {
    0% {
        transform: rotateX( 90deg) translateZ(calc(1 * var(--width-unit)));
    }
    20% {
        transform: rotateX( 90deg) translateZ(calc(var(--projection) * var(--width-unit)));
    }
    100% {
        transform: rotateX( 90deg) translateZ(calc(1 * var(--width-unit)));
    }
}

@keyframes shimmerTop {
    10% {
        background-color: #99e9ff;
    }
    20% {
        background-color: var(--color-top);
    }

}

@keyframes shimmerLeft {
    10% {
        background-color: #99e4ff;;
    }
    20% {
        background-color: var(--color-left);
    }
}

@keyframes shimmerRight {
    10% {
        background-color: #40ccff;;
    }
    20% {
        background-color: var(--color-right);
    }
}