terraform/website/source/assets/stylesheets/_jumbotron.scss

//
// Jumbotron
// --------------------------------------------------

#jumbotron-mask{
  position:relative;
  z-index:0;
  height:700px;
  margin-top: $negative-hero-margin;
  background-color: black;
}

#jumbotron {
  position: relative;
  height:700px;
  padding-top: 0;
  padding-bottom: 0;
  color: $jumbotron-color;

  &.static {
    background-image:image-url("bg-galaxy.jpg");
    background-position:50% 50%;
    background-repeat:no-repeat;

    .jumbotron-content {
      background-image:image-url("bg-static.png");
      background-size:cover;
      background-position:50% 50%;
      background-repeat:no-repeat;
    }

    .jumbotron-content:after {
      content:'';
      display:block;
      position:absolute;
      top:50%;
      left:50%;
      background:image-url("logo-static.png");

      -webkit-background-size:100% 100%;
         -moz-background-size:100% 100%;
          -ms-background-size:100% 100%;
           -o-background-size:100% 100%;
              background-size:100% 100%;

      width:360px;
      height:360px;
      margin:-204px 0 0 -180px;
    }
  }

  .terraform-canvas {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;

    -webkit-transition:opacity 2s ease-out;
       -moz-transition:opacity 2s ease-out;
        -ms-transition:opacity 2s ease-out;
         -o-transition:opacity 2s ease-out;
            transition:opacity 2s ease-out;

    -webkit-transform:translate3d(0,0,0);
       -moz-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
         -o-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
  }

  .jumbotron-content {
    position:absolute;
    z-index:999;
    top:0;
    left:0;
    right:0;
    bottom:0;

    -webkit-transform:translate3d(0,0,0);
       -moz-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
         -o-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
  }

  .galaxy-bg {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;

    background-image:image-url("bg-galaxy.jpg");
    /* background-size:cover; */
    background-position:50% 50%;
    background-repeat: no-repeat;
    opacity:0;

    -webkit-transition:opacity 2s ease-out;
       -moz-transition:opacity 2s ease-out;
        -ms-transition:opacity 2s ease-out;
         -o-transition:opacity 2s ease-out;
            transition:opacity 2s ease-out;

    -webkit-transform:translate3d(0,0,0);
       -moz-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
         -o-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);

    &.show {
      opacity:1;
    }
  }
}

.tag-line {
  position:absolute;
  width:100%;
  top:540px;
  color:#fff;
  text-align:center;
  visibility:hidden;

  font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;

  -webkit-transform:translate3d(0,0,0);
     -moz-transform:translate3d(0,0,0);
      -ms-transform:translate3d(0,0,0);
       -o-transform:translate3d(0,0,0);
          transform:translate3d(0,0,0);
}


.animated-logo {
  position:absolute;
  z-index:200;
  top:50%;
  left:50%;
  width:140px;
  height:140px;
  margin:-60px 0 0 -115px;
  opacity:1;

  -webkit-transition:-webkit-transform 300ms ease-in-out;
     -moz-transition:   -moz-transform 300ms ease-in-out;
      -ms-transition:    -ms-transform 300ms ease-in-out;
       -o-transition:     -o-transform 300ms ease-in-out;
          transition:        transform 300ms ease-in-out;

  -webkit-transform-origin:50% 50%;
     -moz-transform-origin:50% 50%;
      -ms-transform-origin:50% 50%;
       -o-transform-origin:50% 50%;
          transform-origin:50% 50%;

  -webkit-transform-style:preserve-3d;
     -moz-transform-style:preserve-3d;
      -ms-transform-style:preserve-3d;
       -o-transform-style:preserve-3d;
          transform-style:preserve-3d;

  -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
     -moz-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
      -ms-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
       -o-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
          transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
}

.state-one .animated-logo {
  -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
     -moz-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
      -ms-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
       -o-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
          transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
}

.state-one.state-two.state-three.state-four .animated-logo {
  -webkit-transform-origin:100% 0;
     -moz-transform-origin:100% 0;
      -ms-transform-origin:100% 0;
       -o-transform-origin:100% 0;
          transform-origin:100% 0;

  -webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
     -moz-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
      -ms-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
       -o-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
          transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
}

.state-one.state-two.state-three.state-four .white-block {
  background-color:rgba(255,255,255,1);
}

.white-block {
  position:absolute;
  width:68px;
  height:68px;

  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;

  /* background-color:rgba(255,0,0,0.3); */
  background-color:#fff;
  background-color:rgba(255,255,255,0);

  border:1px solid #fff;

  -webkit-transition:
    opacity           300ms ease-out,
    -webkit-transform 300ms ease-out,
    background-color  300ms ease-out;
  -moz-transition:
    opacity           300ms ease-out,
    -moz-transform    300ms ease-out,
    background-color  300ms ease-out;
  -ms-transition:
    opacity           300ms ease-out,
    -ms-transform     300ms ease-out,
    background-color  300ms ease-out;
  -o-transition:
    opacity           300ms ease-out,
    -o-transform      300ms ease-out,
    background-color  300ms ease-out;
  transition:
    opacity           300ms ease-out,
    transform         300ms ease-out,
    background-color  300ms ease-out;
}

.block-1,
.block-2,
.block-3,
.block-4 {
  top:0;
  left:72px;

  -webkit-transform-origin:50% 50%;
     -moz-transform-origin:50% 50%;
      -ms-transform-origin:50% 50%;
       -o-transform-origin:50% 50%;
          transform-origin:50% 50%;

  -webkit-transform:translate3d(0,0,0);
     -moz-transform:translate3d(0,0,0);
      -ms-transform:translate3d(0,0,0);
       -o-transform:translate3d(0,0,0);
          transform:translate3d(0,0,0);
}

.block-1 {
  opacity:0;

  -webkit-transform:translate3d(0,0,0) scale(0,0);
     -moz-transform:translate3d(0,0,0) scale(0,0);
      -ms-transform:translate3d(0,0,0) scale(0,0);
       -o-transform:translate3d(0,0,0) scale(0,0);
          transform:translate3d(0,0,0) scale(0,0);
}

.block-2 {
  opacity:0;
  top:0;
  left:0;

  -webkit-transform:translate3d(0,0,0) scale(0,0);
     -moz-transform:translate3d(0,0,0) scale(0,0);
      -ms-transform:translate3d(0,0,0) scale(0,0);
       -o-transform:translate3d(0,0,0) scale(0,0);
          transform:translate3d(0,0,0) scale(0,0);
}

.block-3 {
  opacity:0;
  top:72px;

  -webkit-transform:translate3d(0,0,0) scale(0,0);
     -moz-transform:translate3d(0,0,0) scale(0,0);
      -ms-transform:translate3d(0,0,0) scale(0,0);
       -o-transform:translate3d(0,0,0) scale(0,0);
          transform:translate3d(0,0,0) scale(0,0);
}

.block-4 {
  -webkit-transform-origin:0 0;
     -moz-transform-origin:0 0;
      -ms-transform-origin:0 0;
       -o-transform-origin:0 0;
          transform-origin:0 0;

  -webkit-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
     -moz-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
      -ms-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
       -o-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
          transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
}

.state-one.state-two .block-1 {
  opacity:1;

  -webkit-transform:translate3d(0,0,0) scale(1,1);
     -moz-transform:translate3d(0,0,0) scale(1,1);
      -ms-transform:translate3d(0,0,0) scale(1,1);
       -o-transform:translate3d(0,0,0) scale(1,1);
          transform:translate3d(0,0,0) scale(1,1);
}

.state-one .block-2 {
  opacity:1;

  -webkit-transform:translate3d(0,0,0) scale(1,1);
     -moz-transform:translate3d(0,0,0) scale(1,1);
      -ms-transform:translate3d(0,0,0) scale(1,1);
       -o-transform:translate3d(0,0,0) scale(1,1);
          transform:translate3d(0,0,0) scale(1,1);
}

.state-one.state-two.state-three .block-3 {
  opacity:1;

  -webkit-transform:translate3d(0,0,0) scale(1,1);
     -moz-transform:translate3d(0,0,0) scale(1,1);
      -ms-transform:translate3d(0,0,0) scale(1,1);
       -o-transform:translate3d(0,0,0) scale(1,1);
          transform:translate3d(0,0,0) scale(1,1);
}

.cursor {
  font-weight:bold;

  -webkit-animation:Blink 800ms infinite;
     -moz-animation:Blink 800ms infinite;
      -ms-animation:Blink 800ms infinite;
       -o-animation:Blink 800ms infinite;
          animation:Blink 800ms infinite;
}

@-webkit-keyframes Blink {
	0% {
		opacity:1;
	}
	50% {
		opacity:1;

	}
	51% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}

@-moz-keyframes Blink {
	0% {
		opacity:1;
	}
	50% {
		opacity:1;
	}
	51% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}

@-ms-keyframes Blink {
	0% {
		opacity:1;

	}
	50% {
		opacity:1;
	}
	51% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}

@-o-keyframes Blink {
	0% {
		opacity:1;

	}
	50% {
		opacity:1;
	}
	51% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}

@keyframes Blink {
	0% {
		opacity:1;

	}
	50% {
		opacity:1;
	}
	51% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}

@media (max-width: 570px) {
  .tag-line {
    display:none;
  }

  #jumbotron .jumbotron-content {
    -webkit-transform:translate3d(0, 0, 0) scale(0.8);
       -moz-transform:translate3d(0, 0, 0) scale(0.8);
        -ms-transform:translate3d(0, 0, 0) scale(0.8);
         -o-transform:translate3d(0, 0, 0) scale(0.8);
            transform:translate3d(0, 0, 0) scale(0.8);
  }

  .animated-logo {
    margin:-15px 0 0 -113px;
  }

  #jumbotron-mask,
  #jumbotron {
    height:560px;
  }
}