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