site/_src/_assets/styles/_page-getstarted.scss

//
// Page: Get started
// ---
// bigchaindb.com
//

.driver {
    padding: $spacer;
    background: rgba($brand-main-blue-light, .15);
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    &:hover,
    &:focus {
        .driver__title {
            color: #fff;
        }

        .driver__logo {
            background: #fff;
        }
    }
}

.driver,
.driver__logo,
.driver__title {
    @include transition;
}

.driver__logo {
    width: 3rem;
    height: 3rem;
    background: $brand-primary;
}

.driver__title {
    color: $brand-primary;
    margin: 0;
    font-size: $font-size-h3;
}

.driver__meta {
    @include text-small;
    width: 100%;
    align-self: flex-end;
    margin: 0;

    span {
        display: block;
    }
}

.driver__version {
    opacity: .75;
}

.section--community {
    text-align: center;
    position: relative;
    // make room for wrigely
    padding-bottom: 200px;

    @media ($screen-lg) {
        padding-bottom: 0;
    }

    .section-header {
        .section-description { margin-bottom: ($spacer * 2); }
    }

    .grid h1 {
        @extend .h3;
        margin-top: 0;
    }

    .social-link {
        &,
        .icon {
            @include transition;
        }
        display: inline-block;
        box-shadow: none;
        padding: $btn-padding-y-sm $btn-padding-x-sm;

        &:hover,
        &:focus {
            background: none;

            .icon {
                fill: lighten($brand-primary, 10%);
                filter: drop-shadow(0 1px 4px rgba($brand-main-blue-dark, .4));
                transform: translateY(-1px);

                &.icon--gitter {
                    stroke: lighten($brand-primary, 10%);
                }
            }
        }

        &:active {
            outline: 0;

            .icon {
                fill: $brand-primary;
                filter: drop-shadow(0 1px 2px rgba($brand-main-blue-dark, .3));
                transform: translateY(0);
            }
        }

        .icon {
            fill: $brand-primary;
            width: 1.5rem;
            height: 1.5rem;

            &.icon--gitter {
                stroke: $brand-primary;
            }
        }
    }

    .social-link__title {
        @include text-small;
        color: $brand-primary;
        display: block;
        text-align: center;
    }
}

.text-milestones {
    margin-top: ($spacer * 2);
}


//
// wrigley: positioned and animated
//
#wrigley {
    @extend .img--responsive;
    vertical-align: bottom;
    width: 400px;
    height: 220px;
    position: absolute;
    bottom: 0;
    right: 0;

    #arm {
        transform-origin: right;
    }

    #head {
        transform-origin: center;
    }

    #eye {
        transform-origin: center;
    }

    #arm,
    #head,
    #eye {
        animation: none;
    }

    &:hover,
    &.is-ready {
        #arm,
        #head,
        #eye {
            &.paused { animation: none; }
        }

        #arm {
            animation: wrigley-wink 1s ease-in-out;
        }

        #head {
            animation: wrigley-head-nod 1s ease-in-out;
        }

        #eye {
            &.is-ready {
                animation: wrigley-blink .3s ease-in-out forwards;
                animation-iteration-count: 2;
            }
        }
    }
}

@keyframes wrigley-wink {
    0% { transform: rotate(0); }

    25%,
    50% { transform: rotate(-20deg); }

    30%,
    100% { transform: rotate(0); }
}

@keyframes wrigley-head-nod {
    0% { transform: rotate(0); }

    25%,
    50% { transform: rotate(-2deg); }

    30%,
    100% { transform: rotate(0); }
}

@keyframes wrigley-blink {
    0% { transform: scaleY(1); }
    50% { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}