github.com/jmbataller/terraform@v0.6.8-0.20151125192640-b7a12e3a580c/website/source/assets/stylesheets/_jumbotron.scss (about)

     1  //
     2  // Jumbotron
     3  // --------------------------------------------------
     4  
     5  #jumbotron-mask{
     6    position:relative;
     7    z-index:0;
     8    height:700px;
     9    margin-top: $negative-hero-margin;
    10    background-color: black;
    11  }
    12  
    13  #jumbotron {
    14    position: relative;
    15    height:700px;
    16    padding-top: 0;
    17    padding-bottom: 0;
    18    color: $jumbotron-color;
    19  
    20    &.static {
    21      background-image:image-url("bg-galaxy.jpg");
    22      background-position:50% 50%;
    23      background-repeat:no-repeat;
    24  
    25      .jumbotron-content {
    26        background-image:image-url("bg-static.png");
    27        background-size:cover;
    28        background-position:50% 50%;
    29        background-repeat:no-repeat;
    30      }
    31  
    32      .jumbotron-content:after {
    33        content:'';
    34        display:block;
    35        position:absolute;
    36        top:50%;
    37        left:50%;
    38        background:image-url("logo-static.png");
    39  
    40        -webkit-background-size:100% 100%;
    41           -moz-background-size:100% 100%;
    42            -ms-background-size:100% 100%;
    43             -o-background-size:100% 100%;
    44                background-size:100% 100%;
    45  
    46        width:360px;
    47        height:360px;
    48        margin:-204px 0 0 -180px;
    49      }
    50    }
    51  
    52    .terraform-canvas {
    53      position:absolute;
    54      top:0;
    55      left:0;
    56      width:100%;
    57      height:100%;
    58      opacity:0;
    59  
    60      -webkit-transition:opacity 2s ease-out;
    61         -moz-transition:opacity 2s ease-out;
    62          -ms-transition:opacity 2s ease-out;
    63           -o-transition:opacity 2s ease-out;
    64              transition:opacity 2s ease-out;
    65  
    66      -webkit-transform:translate3d(0,0,0);
    67         -moz-transform:translate3d(0,0,0);
    68          -ms-transform:translate3d(0,0,0);
    69           -o-transform:translate3d(0,0,0);
    70              transform:translate3d(0,0,0);
    71    }
    72  
    73    .jumbotron-content {
    74      position:absolute;
    75      z-index:999;
    76      top:0;
    77      left:0;
    78      right:0;
    79      bottom:0;
    80  
    81      -webkit-transform:translate3d(0,0,0);
    82         -moz-transform:translate3d(0,0,0);
    83          -ms-transform:translate3d(0,0,0);
    84           -o-transform:translate3d(0,0,0);
    85              transform:translate3d(0,0,0);
    86    }
    87  
    88    .galaxy-bg {
    89      position:absolute;
    90      width:100%;
    91      height:100%;
    92      top:0;
    93      left:0;
    94  
    95      background-image:image-url("bg-galaxy.jpg");
    96      /* background-size:cover; */
    97      background-position:50% 50%;
    98      background-repeat: no-repeat;
    99      opacity:0;
   100  
   101      -webkit-transition:opacity 2s ease-out;
   102         -moz-transition:opacity 2s ease-out;
   103          -ms-transition:opacity 2s ease-out;
   104           -o-transition:opacity 2s ease-out;
   105              transition:opacity 2s ease-out;
   106  
   107      -webkit-transform:translate3d(0,0,0);
   108         -moz-transform:translate3d(0,0,0);
   109          -ms-transform:translate3d(0,0,0);
   110           -o-transform:translate3d(0,0,0);
   111              transform:translate3d(0,0,0);
   112  
   113      &.show {
   114        opacity:1;
   115      }
   116    }
   117  }
   118  
   119  .tag-line {
   120    position:absolute;
   121    width:100%;
   122    top:540px;
   123    color:#fff;
   124    text-align:center;
   125    visibility:hidden;
   126  
   127    font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
   128    font-weight: 300;
   129  
   130    -webkit-transform:translate3d(0,0,0);
   131       -moz-transform:translate3d(0,0,0);
   132        -ms-transform:translate3d(0,0,0);
   133         -o-transform:translate3d(0,0,0);
   134            transform:translate3d(0,0,0);
   135  }
   136  
   137  
   138  .animated-logo {
   139    position:absolute;
   140    z-index:200;
   141    top:50%;
   142    left:50%;
   143    width:140px;
   144    height:140px;
   145    margin:-60px 0 0 -115px;
   146    opacity:1;
   147  
   148    -webkit-transition:-webkit-transform 300ms ease-in-out;
   149       -moz-transition:   -moz-transform 300ms ease-in-out;
   150        -ms-transition:    -ms-transform 300ms ease-in-out;
   151         -o-transition:     -o-transform 300ms ease-in-out;
   152            transition:        transform 300ms ease-in-out;
   153  
   154    -webkit-transform-origin:50% 50%;
   155       -moz-transform-origin:50% 50%;
   156        -ms-transform-origin:50% 50%;
   157         -o-transform-origin:50% 50%;
   158            transform-origin:50% 50%;
   159  
   160    -webkit-transform-style:preserve-3d;
   161       -moz-transform-style:preserve-3d;
   162        -ms-transform-style:preserve-3d;
   163         -o-transform-style:preserve-3d;
   164            transform-style:preserve-3d;
   165  
   166    -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   167       -moz-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   168        -ms-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   169         -o-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   170            transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   171  }
   172  
   173  .state-one .animated-logo {
   174    -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   175       -moz-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   176        -ms-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   177         -o-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   178            transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   179  }
   180  
   181  .state-one.state-two.state-three.state-four .animated-logo {
   182    -webkit-transform-origin:100% 0;
   183       -moz-transform-origin:100% 0;
   184        -ms-transform-origin:100% 0;
   185         -o-transform-origin:100% 0;
   186            transform-origin:100% 0;
   187  
   188    -webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
   189       -moz-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
   190        -ms-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
   191         -o-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
   192            transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
   193  }
   194  
   195  .state-one.state-two.state-three.state-four .white-block {
   196    background-color:rgba(255,255,255,1);
   197  }
   198  
   199  .white-block {
   200    position:absolute;
   201    width:68px;
   202    height:68px;
   203  
   204    -webkit-box-sizing:border-box;
   205       -moz-box-sizing:border-box;
   206            box-sizing:border-box;
   207  
   208    /* background-color:rgba(255,0,0,0.3); */
   209    background-color:#fff;
   210    background-color:rgba(255,255,255,0);
   211  
   212    border:1px solid #fff;
   213  
   214    -webkit-transition:
   215      opacity           300ms ease-out,
   216      -webkit-transform 300ms ease-out,
   217      background-color  300ms ease-out;
   218    -moz-transition:
   219      opacity           300ms ease-out,
   220      -moz-transform    300ms ease-out,
   221      background-color  300ms ease-out;
   222    -ms-transition:
   223      opacity           300ms ease-out,
   224      -ms-transform     300ms ease-out,
   225      background-color  300ms ease-out;
   226    -o-transition:
   227      opacity           300ms ease-out,
   228      -o-transform      300ms ease-out,
   229      background-color  300ms ease-out;
   230    transition:
   231      opacity           300ms ease-out,
   232      transform         300ms ease-out,
   233      background-color  300ms ease-out;
   234  }
   235  
   236  .block-1,
   237  .block-2,
   238  .block-3,
   239  .block-4 {
   240    top:0;
   241    left:72px;
   242  
   243    -webkit-transform-origin:50% 50%;
   244       -moz-transform-origin:50% 50%;
   245        -ms-transform-origin:50% 50%;
   246         -o-transform-origin:50% 50%;
   247            transform-origin:50% 50%;
   248  
   249    -webkit-transform:translate3d(0,0,0);
   250       -moz-transform:translate3d(0,0,0);
   251        -ms-transform:translate3d(0,0,0);
   252         -o-transform:translate3d(0,0,0);
   253            transform:translate3d(0,0,0);
   254  }
   255  
   256  .block-1 {
   257    opacity:0;
   258  
   259    -webkit-transform:translate3d(0,0,0) scale(0,0);
   260       -moz-transform:translate3d(0,0,0) scale(0,0);
   261        -ms-transform:translate3d(0,0,0) scale(0,0);
   262         -o-transform:translate3d(0,0,0) scale(0,0);
   263            transform:translate3d(0,0,0) scale(0,0);
   264  }
   265  
   266  .block-2 {
   267    opacity:0;
   268    top:0;
   269    left:0;
   270  
   271    -webkit-transform:translate3d(0,0,0) scale(0,0);
   272       -moz-transform:translate3d(0,0,0) scale(0,0);
   273        -ms-transform:translate3d(0,0,0) scale(0,0);
   274         -o-transform:translate3d(0,0,0) scale(0,0);
   275            transform:translate3d(0,0,0) scale(0,0);
   276  }
   277  
   278  .block-3 {
   279    opacity:0;
   280    top:72px;
   281  
   282    -webkit-transform:translate3d(0,0,0) scale(0,0);
   283       -moz-transform:translate3d(0,0,0) scale(0,0);
   284        -ms-transform:translate3d(0,0,0) scale(0,0);
   285         -o-transform:translate3d(0,0,0) scale(0,0);
   286            transform:translate3d(0,0,0) scale(0,0);
   287  }
   288  
   289  .block-4 {
   290    -webkit-transform-origin:0 0;
   291       -moz-transform-origin:0 0;
   292        -ms-transform-origin:0 0;
   293         -o-transform-origin:0 0;
   294            transform-origin:0 0;
   295  
   296    -webkit-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
   297       -moz-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
   298        -ms-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
   299         -o-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
   300            transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
   301  }
   302  
   303  .state-one.state-two .block-1 {
   304    opacity:1;
   305  
   306    -webkit-transform:translate3d(0,0,0) scale(1,1);
   307       -moz-transform:translate3d(0,0,0) scale(1,1);
   308        -ms-transform:translate3d(0,0,0) scale(1,1);
   309         -o-transform:translate3d(0,0,0) scale(1,1);
   310            transform:translate3d(0,0,0) scale(1,1);
   311  }
   312  
   313  .state-one .block-2 {
   314    opacity:1;
   315  
   316    -webkit-transform:translate3d(0,0,0) scale(1,1);
   317       -moz-transform:translate3d(0,0,0) scale(1,1);
   318        -ms-transform:translate3d(0,0,0) scale(1,1);
   319         -o-transform:translate3d(0,0,0) scale(1,1);
   320            transform:translate3d(0,0,0) scale(1,1);
   321  }
   322  
   323  .state-one.state-two.state-three .block-3 {
   324    opacity:1;
   325  
   326    -webkit-transform:translate3d(0,0,0) scale(1,1);
   327       -moz-transform:translate3d(0,0,0) scale(1,1);
   328        -ms-transform:translate3d(0,0,0) scale(1,1);
   329         -o-transform:translate3d(0,0,0) scale(1,1);
   330            transform:translate3d(0,0,0) scale(1,1);
   331  }
   332  
   333  .cursor {
   334    font-weight:bold;
   335  
   336    -webkit-animation:Blink 800ms infinite;
   337       -moz-animation:Blink 800ms infinite;
   338        -ms-animation:Blink 800ms infinite;
   339         -o-animation:Blink 800ms infinite;
   340            animation:Blink 800ms infinite;
   341  }
   342  
   343  @-webkit-keyframes Blink {
   344  	0% {
   345  		opacity:1;
   346  	}
   347  	50% {
   348  		opacity:1;
   349  
   350  	}
   351  	51% {
   352  		opacity:0;
   353  	}
   354  	100% {
   355  		opacity:0;
   356  	}
   357  }
   358  
   359  @-moz-keyframes Blink {
   360  	0% {
   361  		opacity:1;
   362  	}
   363  	50% {
   364  		opacity:1;
   365  	}
   366  	51% {
   367  		opacity:0;
   368  	}
   369  	100% {
   370  		opacity:0;
   371  	}
   372  }
   373  
   374  @-ms-keyframes Blink {
   375  	0% {
   376  		opacity:1;
   377  
   378  	}
   379  	50% {
   380  		opacity:1;
   381  	}
   382  	51% {
   383  		opacity:0;
   384  	}
   385  	100% {
   386  		opacity:0;
   387  	}
   388  }
   389  
   390  @-o-keyframes Blink {
   391  	0% {
   392  		opacity:1;
   393  
   394  	}
   395  	50% {
   396  		opacity:1;
   397  	}
   398  	51% {
   399  		opacity:0;
   400  	}
   401  	100% {
   402  		opacity:0;
   403  	}
   404  }
   405  
   406  @keyframes Blink {
   407  	0% {
   408  		opacity:1;
   409  
   410  	}
   411  	50% {
   412  		opacity:1;
   413  	}
   414  	51% {
   415  		opacity:0;
   416  	}
   417  	100% {
   418  		opacity:0;
   419  	}
   420  }
   421  
   422  @media (max-width: 570px) {
   423    .tag-line {
   424      display:none;
   425    }
   426  
   427    #jumbotron .jumbotron-content {
   428      -webkit-transform:translate3d(0, 0, 0) scale(0.8);
   429         -moz-transform:translate3d(0, 0, 0) scale(0.8);
   430          -ms-transform:translate3d(0, 0, 0) scale(0.8);
   431           -o-transform:translate3d(0, 0, 0) scale(0.8);
   432              transform:translate3d(0, 0, 0) scale(0.8);
   433    }
   434  
   435    .animated-logo {
   436      margin:-15px 0 0 -113px;
   437    }
   438  
   439    #jumbotron-mask,
   440    #jumbotron {
   441      height:560px;
   442    }
   443  }