Viewing File: /usr/local/cpanel/whostmgr/docroot/templates/gsw/initial_setup/intro.less

@import (reference) "../../libraries/base-styles/variables.less";

#intro-section {
    text-align: center;
    cursor: pointer;

    .product-logo {
        position: relative;
        margin: 0 0 20px 0;

        margin-bottom: 12px;
    }

    .platform-of-choice {
        text-align: center;
        animation: 3s ease 0.5s 1 forwards fade-in;
        opacity: 0;
        position: relative;
        z-index: 2;
        color: white;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        will-change: opacity;
    }

    .animated-line {
        box-sizing: border-box;
        position: relative;
        height: 2px;
        width: 100%;
        margin: 4px auto;
        min-width: 20em;
        max-width: 470px;

        // This is the main line
        &::before {
            content: "";
            width: 0;
            height: 100%;
            top: 0;
            left: -7%;
            position: absolute;
            background: linear-gradient(
                270deg,
                rgba(255, 108, 44, 1) 0%,
                rgba(255, 108, 44, 1) 40%,
                rgba(255, 108, 44, 0) 100%
            );
            will-change: width;
            animation: 400ms ease 2s 1 forwards expand,
                30s linear 2.4s forwards expand-beyond;
        }

        // This is the blinking dot
        &::after {
            content: "";
            position: absolute;
            top: 1px;
            left: -7%;

            width: 0;
            height: 0;

            // Keep the dot centered as it grows
            transform: translate(-50%, -50%);

            box-sizing: border-box;
            border: 0 solid #ff6c2c;
            border-radius: 50%;
            animation: 2000ms infinite 2.4s forwards blink,
                30s linear 2.4s 1 forwards track-expand-beyond;
        }
    }
}

#content {
    position: relative;
    overflow: hidden;
    min-height: 50vh;
}

#intro-section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 100%;

    opacity: 1;
    z-index: 20;

    will-change: transform, opacity;

    &.fade-out {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        transition: opacity 300ms, transform 800ms ease-in;
    }
}
#main-section {
    opacity: 0;

    will-change: transform, opacity;

    &.fade-in {
        opacity: 1;
        transition: opacity ease-in 500ms 300ms;
    }
}

// The initial, fast expansion of the line
@keyframes expand {
    from {
        width: 0;
    }
    to {
        width: 95%;
    }
}

// The additional expansion past the first initial burst
@keyframes expand-beyond {
    0% {
        width: 95%;
    }
    10% {
        width: 105%;
    }
    50% {
        width: 115%;
    }
    100% {
        width: 125%;
    }
}

// The dot tracking the expansion past the first initial burst
@keyframes track-expand-beyond {
    0% {
        left: (95% - 7%);
    }
    10% {
        left: (105% - 7%);
    }
    50% {
        left: (115% - 7%);
    }
    100% {
        left: (125% - 7%);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

// The blinking dot
@keyframes blink {
    0%,
    30%,
    100% {
        border-width: 0;
    }
    15% {
        border-width: 3px;
    }
}