github.com/ns1/terraform@v0.7.10-0.20161109153551-8949419bef40/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    visibility:hidden;
   125  
   126    font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
   127    font-weight: 500;
   128  
   129    -webkit-transform:translate3d(0,0,0);
   130       -moz-transform:translate3d(0,0,0);
   131        -ms-transform:translate3d(0,0,0);
   132         -o-transform:translate3d(0,0,0);
   133            transform:translate3d(0,0,0);
   134  }
   135  
   136  
   137  .animated-logo {
   138    position:absolute;
   139    z-index:200;
   140    top:50%;
   141    left:50%;
   142    width:140px;
   143    height:140px;
   144    margin:-60px 0 0 -115px;
   145    opacity:1;
   146  
   147    -webkit-transition:-webkit-transform 300ms ease-in-out;
   148       -moz-transition:   -moz-transform 300ms ease-in-out;
   149        -ms-transition:    -ms-transform 300ms ease-in-out;
   150         -o-transition:     -o-transform 300ms ease-in-out;
   151            transition:        transform 300ms ease-in-out;
   152  
   153    -webkit-transform-origin:50% 50%;
   154       -moz-transform-origin:50% 50%;
   155        -ms-transform-origin:50% 50%;
   156         -o-transform-origin:50% 50%;
   157            transform-origin:50% 50%;
   158  
   159    -webkit-transform-style:preserve-3d;
   160       -moz-transform-style:preserve-3d;
   161        -ms-transform-style:preserve-3d;
   162         -o-transform-style:preserve-3d;
   163            transform-style:preserve-3d;
   164  
   165    -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   166       -moz-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   167        -ms-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   168         -o-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   169            transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   170  }
   171  
   172  .state-one .animated-logo {
   173    -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   174       -moz-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   175        -ms-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   176         -o-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   177            transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
   178  }
   179  
   180  .state-one.state-two.state-three.state-four .animated-logo {
   181    -webkit-transform-origin:100% 0;
   182       -moz-transform-origin:100% 0;
   183        -ms-transform-origin:100% 0;
   184         -o-transform-origin:100% 0;
   185            transform-origin:100% 0;
   186  
   187    -webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
   188       -moz-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
   189        -ms-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
   190         -o-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
   191            transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
   192  }
   193  
   194  .state-one.state-two.state-three.state-four .white-block {
   195    background-color:rgba(255,255,255,1);
   196  }
   197  
   198  .white-block {
   199    position:absolute;
   200    width:68px;
   201    height:68px;
   202  
   203    -webkit-box-sizing:border-box;
   204       -moz-box-sizing:border-box;
   205            box-sizing:border-box;
   206  
   207    /* background-color:rgba(255,0,0,0.3); */
   208    background-color:#fff;
   209    background-color:rgba(255,255,255,0);
   210  
   211    border:1px solid #fff;
   212  
   213    -webkit-transition:
   214      opacity           300ms ease-out,
   215      -webkit-transform 300ms ease-out,
   216      background-color  300ms ease-out;
   217    -moz-transition:
   218      opacity           300ms ease-out,
   219      -moz-transform    300ms ease-out,
   220      background-color  300ms ease-out;
   221    -ms-transition:
   222      opacity           300ms ease-out,
   223      -ms-transform     300ms ease-out,
   224      background-color  300ms ease-out;
   225    -o-transition:
   226      opacity           300ms ease-out,
   227      -o-transform      300ms ease-out,
   228      background-color  300ms ease-out;
   229    transition:
   230      opacity           300ms ease-out,
   231      transform         300ms ease-out,
   232      background-color  300ms ease-out;
   233  }
   234  
   235  .block-1,
   236  .block-2,
   237  .block-3,
   238  .block-4 {
   239    top:0;
   240    left:72px;
   241  
   242    -webkit-transform-origin:50% 50%;
   243       -moz-transform-origin:50% 50%;
   244        -ms-transform-origin:50% 50%;
   245         -o-transform-origin:50% 50%;
   246            transform-origin:50% 50%;
   247  
   248    -webkit-transform:translate3d(0,0,0);
   249       -moz-transform:translate3d(0,0,0);
   250        -ms-transform:translate3d(0,0,0);
   251         -o-transform:translate3d(0,0,0);
   252            transform:translate3d(0,0,0);
   253  }
   254  
   255  .block-1 {
   256    opacity:0;
   257  
   258    -webkit-transform:translate3d(0,0,0) scale(0,0);
   259       -moz-transform:translate3d(0,0,0) scale(0,0);
   260        -ms-transform:translate3d(0,0,0) scale(0,0);
   261         -o-transform:translate3d(0,0,0) scale(0,0);
   262            transform:translate3d(0,0,0) scale(0,0);
   263  }
   264  
   265  .block-2 {
   266    opacity:0;
   267    top:0;
   268    left:0;
   269  
   270    -webkit-transform:translate3d(0,0,0) scale(0,0);
   271       -moz-transform:translate3d(0,0,0) scale(0,0);
   272        -ms-transform:translate3d(0,0,0) scale(0,0);
   273         -o-transform:translate3d(0,0,0) scale(0,0);
   274            transform:translate3d(0,0,0) scale(0,0);
   275  }
   276  
   277  .block-3 {
   278    opacity:0;
   279    top:72px;
   280  
   281    -webkit-transform:translate3d(0,0,0) scale(0,0);
   282       -moz-transform:translate3d(0,0,0) scale(0,0);
   283        -ms-transform:translate3d(0,0,0) scale(0,0);
   284         -o-transform:translate3d(0,0,0) scale(0,0);
   285            transform:translate3d(0,0,0) scale(0,0);
   286  }
   287  
   288  .block-4 {
   289    -webkit-transform-origin:0 0;
   290       -moz-transform-origin:0 0;
   291        -ms-transform-origin:0 0;
   292         -o-transform-origin:0 0;
   293            transform-origin:0 0;
   294  
   295    -webkit-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
   296       -moz-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
   297        -ms-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
   298         -o-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
   299            transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
   300  }
   301  
   302  .state-one.state-two .block-1 {
   303    opacity:1;
   304  
   305    -webkit-transform:translate3d(0,0,0) scale(1,1);
   306       -moz-transform:translate3d(0,0,0) scale(1,1);
   307        -ms-transform:translate3d(0,0,0) scale(1,1);
   308         -o-transform:translate3d(0,0,0) scale(1,1);
   309            transform:translate3d(0,0,0) scale(1,1);
   310  }
   311  
   312  .state-one .block-2 {
   313    opacity:1;
   314  
   315    -webkit-transform:translate3d(0,0,0) scale(1,1);
   316       -moz-transform:translate3d(0,0,0) scale(1,1);
   317        -ms-transform:translate3d(0,0,0) scale(1,1);
   318         -o-transform:translate3d(0,0,0) scale(1,1);
   319            transform:translate3d(0,0,0) scale(1,1);
   320  }
   321  
   322  .state-one.state-two.state-three .block-3 {
   323    opacity:1;
   324  
   325    -webkit-transform:translate3d(0,0,0) scale(1,1);
   326       -moz-transform:translate3d(0,0,0) scale(1,1);
   327        -ms-transform:translate3d(0,0,0) scale(1,1);
   328         -o-transform:translate3d(0,0,0) scale(1,1);
   329            transform:translate3d(0,0,0) scale(1,1);
   330  }
   331  
   332  .cursor {
   333    font-weight:bold;
   334  
   335    -webkit-animation:Blink 800ms infinite;
   336       -moz-animation:Blink 800ms infinite;
   337        -ms-animation:Blink 800ms infinite;
   338         -o-animation:Blink 800ms infinite;
   339            animation:Blink 800ms infinite;
   340  }
   341  
   342  @-webkit-keyframes Blink {
   343  	0% {
   344  		opacity:1;
   345  	}
   346  	50% {
   347  		opacity:1;
   348  
   349  	}
   350  	51% {
   351  		opacity:0;
   352  	}
   353  	100% {
   354  		opacity:0;
   355  	}
   356  }
   357  
   358  @-moz-keyframes Blink {
   359  	0% {
   360  		opacity:1;
   361  	}
   362  	50% {
   363  		opacity:1;
   364  	}
   365  	51% {
   366  		opacity:0;
   367  	}
   368  	100% {
   369  		opacity:0;
   370  	}
   371  }
   372  
   373  @-ms-keyframes Blink {
   374  	0% {
   375  		opacity:1;
   376  
   377  	}
   378  	50% {
   379  		opacity:1;
   380  	}
   381  	51% {
   382  		opacity:0;
   383  	}
   384  	100% {
   385  		opacity:0;
   386  	}
   387  }
   388  
   389  @-o-keyframes Blink {
   390  	0% {
   391  		opacity:1;
   392  
   393  	}
   394  	50% {
   395  		opacity:1;
   396  	}
   397  	51% {
   398  		opacity:0;
   399  	}
   400  	100% {
   401  		opacity:0;
   402  	}
   403  }
   404  
   405  @keyframes Blink {
   406  	0% {
   407  		opacity:1;
   408  
   409  	}
   410  	50% {
   411  		opacity:1;
   412  	}
   413  	51% {
   414  		opacity:0;
   415  	}
   416  	100% {
   417  		opacity:0;
   418  	}
   419  }
   420  
   421  @media (max-width: 570px) {
   422    .tag-line {
   423      display:none;
   424    }
   425  
   426    #jumbotron .jumbotron-content {
   427      -webkit-transform:translate3d(0, 0, 0) scale(0.8);
   428         -moz-transform:translate3d(0, 0, 0) scale(0.8);
   429          -ms-transform:translate3d(0, 0, 0) scale(0.8);
   430           -o-transform:translate3d(0, 0, 0) scale(0.8);
   431              transform:translate3d(0, 0, 0) scale(0.8);
   432    }
   433  
   434    .animated-logo {
   435      margin:-15px 0 0 -113px;
   436    }
   437  
   438    #jumbotron-mask,
   439    #jumbotron {
   440      height:560px;
   441    }
   442  }