diff options
Diffstat (limited to 'public/stylesheets/style.css')
| -rw-r--r-- | public/stylesheets/style.css | 429 |
1 files changed, 429 insertions, 0 deletions
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 30e047d..5f1e9a9 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -5,4 +5,433 @@ body { a { color: #00B7FF; +} + +@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One); + +@-webkit-keyframes a { + 0% { + opacity: 0; + -o-transform: translate3d(0, -60px, 0); + -ms-transform: translate3d(0, -60px, 0); + -moz-transform: translate3d(0, -60px, 0); + -webkit-transform: translate3d(0, -60px, 0); + transform: translate3d(0, -60px, 0); + color:transparent; + + } + + 30% { + opacity: 1; + -o-transform: translate3d(0, 5px, 0); + -ms-transform: translate3d(0, 5px, 0); + -moz-transform: translate3d(0, 5px, 0); + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + text-shadow:0 0 30px #888; + color:transparent; + } + + 60% { + -o-transform: translate3d(0, -2px, 0); + -ms-transform: translate3d(0, -2px, 0); + -moz-transform: translate3d(0, -2px, 0); + -webkit-transform: translate3d(0, -2px, 0); + transform: translate3d(0, -2px, 0); + + + } + + 100% { + -o-transform: translate3d(0, 0px, 0); + -ms-transform: translate3d(0, 0px, 0); + -moz-transform: translate3d(0, 0px, 0); + -webkit-transform: translate3d(0, 0px, 0); + transform: translate3d(0, 0px, 0); + } + +} +@-webkit-keyframes b { + 0% { + opacity: 0; + -o-transform: translate3d(0, -40px, 0); + -ms-transform: translate3d(0, -40px, 0); + -moz-transform: translate3d(0, -40px, 0); + -webkit-transform: translate3d(0, -40px, 0); + transform: translate3d(0, -40px, 0); + color:transparent; + + } + + 30% { + opacity: 1; + -o-transform: translate3d(0, 5px, 0); + -ms-transform: translate3d(0, 5px, 0); + -moz-transform: translate3d(0, 5px, 0); + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + text-shadow:0 0 30px #888; + color:transparent; + } + + 60%{ + color:transparent; + } + + 100% { + opacity: 1; + -o-transform: translate3d(0, 0px, 0); + -ms-transform: translate3d(0, 0px, 0); + -moz-transform: translate3d(0, 0px, 0); + -webkit-transform: translate3d(0, 0px, 0); + transform: translate3d(0, 0px, 0); + + } + +} + +@-webkit-keyframes c { + 0% { + opacity: 0; + -o-transform: translate3d(0, 40px, 0); + -ms-transform: translate3d(0, 40px, 0); + -moz-transform: translate3d(0, 40px, 0); + -webkit-transform: translate3d(0, 40px, 0); + transform: translate3d(0, 40px, 0); + } + + 30% { + opacity: 1; + -o-transform: translate3d(0, 45px, 0); + -ms-transform: translate3d(0, 45px, 0); + -moz-transform: translate3d(0, 45px, 0); + -webkit-transform: translate3d(0, 45px, 0); + transform: translate3d(0, 45px, 0); + } + + 100% { + opacity: 1; + -o-transform: translate3d(0, 0px, 0); + -ms-transform: translate3d(0, 0px, 0); + -moz-transform: translate3d(0, 0px, 0); + -webkit-transform: translate3d(0, 0px, 0); + transform: translate3d(0, 0px, 0); + } + +} + + +@-moz-keyframes a { + 0% { + opacity: 0; + -o-transform: translate3d(0, -60px, 0); + -ms-transform: translate3d(0, -60px, 0); + -moz-transform: translate3d(0, -60px, 0); + -webkit-transform: translate3d(0, -60px, 0); + transform: translate3d(0, -60px, 0); + } + + 30% { + opacity: 1; + -o-transform: translate3d(0, 5px, 0); + -ms-transform: translate3d(0, 5px, 0); + -moz-transform: translate3d(0, 5px, 0); + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + + 60% { + -o-transform: translate3d(0, -2px, 0); + -ms-transform: translate3d(0, -2px, 0); + -moz-transform: translate3d(0, -2px, 0); + -webkit-transform: translate3d(0, -2px, 0); + transform: translate3d(0, -2px, 0); + } + + 100% { + -o-transform: translate3d(0, 0px, 0); + -ms-transform: translate3d(0, 0px, 0); + -moz-transform: translate3d(0, 0px, 0); + -webkit-transform: translate3d(0, 0px, 0); + transform: translate3d(0, 0px, 0); + } + +} +@-moz-keyframes b { + 0% { + opacity: 0; + -o-transform: translate3d(0, -40px, 0); + -ms-transform: translate3d(0, -40px, 0); + -moz-transform: translate3d(0, -40px, 0); + -webkit-transform: translate3d(0, -40px, 0); + transform: translate3d(0, -40px, 0); + } + + 30% { + opacity: 1; + -o-transform: translate3d(0, 5px, 0); + -ms-transform: translate3d(0, 5px, 0); + -moz-transform: translate3d(0, 5px, 0); + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + + 100% { + opacity: 1; + -o-transform: translate3d(0, 0px, 0); + -ms-transform: translate3d(0, 0px, 0); + -moz-transform: translate3d(0, 0px, 0); + -webkit-transform: translate3d(0, 0px, 0); + transform: translate3d(0, 0px, 0); + } + +} + +@-webkit-keyframes c { + 0% { + opacity: 0; + + } + + 60% { + opacity:0.2; + } + + 90% { + opacity: 1; + + } + +} + +@-webkit-keyframes d { + 40% { + opacity: 0.4; + + } + + 60% { + color: #999; + + } + +} + +ol li:nth-child(1){ + -webkit-animation-name: b; + -webkit-animation-duration: 2.2s; + -webkit-animation-iteration-count: 1; + -webkit-animation-delay: 0s; +} +ol li:nth-child(2){ + -webkit-animation-name: b; + -webkit-animation-duration: 2.4s; + -webkit-animation-iteration-count: 1; + -webkit-animation-delay: 0s; +} +ol li:nth-child(3){ + -webkit-animation-name: b; + -webkit-animation-duration: 2.6s; + -webkit-animation-iteration-count: 1; + -webkit-animation-delay: 0s; +} +ol li:nth-child(4){ + -webkit-animation-name: b; + -webkit-animation-duration: 2.8s; + -webkit-animation-iteration-count: 1; + -webkit-animation-delay: 0s; +} +ol li:nth-child(5){ + -webkit-animation-name: b; + -webkit-animation-duration: 3s; + -webkit-animation-iteration-count: 1; + -webkit-animation-delay: 0s; +} +ol li:nth-child(6){ + -webkit-animation-name: b; + -webkit-animation-duration: 3.2s; + -webkit-animation-iteration-count: 1; + -webkit-animation-delay: 0s; +} +ol li:nth-child(7){ + -webkit-animation-name: b; + -webkit-animation-duration: 3.4s; + -webkit-animation-iteration-count: 1; + -webkit-animation-delay: 0s; +} +ol li:nth-child(8){ + -webkit-animation-name: b; + -webkit-animation-duration: 3.6s; + -webkit-animation-iteration-count: 1; + -webkit-animation-delay: 0s; +} +ol li:nth-child(9){ + -webkit-animation-name: b; + -webkit-animation-duration: 3.8s; + -webkit-animation-iteration-count: 1; + -webkit-animation-delay: 0s; +} +ol li:nth-child(10){ + -webkit-animation-name: b; + -webkit-animation-duration: 4s; + -webkit-animation-iteration-count: 1; + -webkit-animation-delay: 0s; +} + +h1 { + font-family: 'Julius Sans One', sans-serif; + -webkit-animation-name: a; + -webkit-animation-duration: 2s; + -webkit-animation-iteration-count: 1; + -webkit-animation-delay: 0s; + -moz-animation-name: a; + -moz-animation-duration: 2s; + -moz-animation-iteration-count: 1; + -moz-animation-delay: 0s; + font-weight:500; + font-size:50px; + margin:20px 0 0 0; + letter-spacing: 12px; + +} + +h2 { + font-family: 'Julius Sans One', sans-serif; + -webkit-animation-name: b; + -webkit-animation-duration: 2s; + -webkit-animation-iteration-count: 1; + -webkit-animation-delay: 0s; + -moz-animation-name: b; + -moz-animation-duration: 2s; + -moz-animation-iteration-count: 1; + -moz-animation-delay: 0s; + font-weight:500; + margin:7px 0 0 0; + letter-spacing: 8px; + font-size:18px; +} + +h3 { + font-family: 'Julius Sans One', sans-serif; + -webkit-animation-name: b; + -webkit-animation-duration: 2s; + -webkit-animation-iteration-count: 1; + -webkit-animation-delay: 0s; + -moz-animation-name: b; + -moz-animation-duration: 2s; + -moz-animation-iteration-count: 1; + -moz-animation-delay: 0s; + font-weight: 500; + margin: 0; + font-size: 33px; + border-bottom: 1px solid; + padding: 7px 0; + margin-bottom: 10px; + letter-spacing: 12px; + display: inline-block; +} + +html,body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: hidden; + text-align: center; + background-attachment: fixed; + background-size: cover; +} +header { + position:relative; + z-index:2; + +} +.cursor { + position: absolute; + bottom: 50%; + right: 50%; + width: 32px; + height: 32px; + margin-bottom: -9999px; + margin-right: -9999px; + z-index:0; + -webkit-transform: translateZ(0); + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: all .1s ease-out; + -moz-transition: all .1s ease-out; + -ms-transition: all .1s ease-out; + -o-transition: all .1s ease-out; + transition: all .1s ease-out; +} +.cursor.idle { + background-image: url(/images/cursor-gray.png) !important; + text-shadow: 0 0 2px #333; + color: transparent; + opacity:0.8; +} + +.cursor span { + position: relative; + left: 25px; + top: 0; + font-size: 12px; + color: #333; + font-family: 'Julius Sans One', sans-serif; + z-index:2; +} +.cursor span:after { + content: "15:33"; + margin-left: 25px; + color: black; + display: block; + float: left; +} +.cursor.idle span { + color: transparent; +} +.cursor.idle span:after { + color: transparent; +} + +ol { + list-style:none; + padding:0; + margin:0; +} + +.fbutton { + background: url('https://s3.amazonaws.com/luckyplop/cf8dc6647202296b7c84c906dbf43c6d46e04958.png') no-repeat -2px -53px; + display:inline-block; + width: 223px; + height: 34px; + margin:10px 0; + -webkit-animation-name: c; + -webkit-animation-duration: 4s; + -webkit-animation-iteration-count: 1; + opacity:1; + -webkit-animation-delay: 0s; +} + +.fbutton:hover { + background-position: -2px -97px; +} + +.fbutton:focus { + background: url(https://s3.amazonaws.com/luckyplop/cf8dc6647202296b7c84c906dbf43c6d46e04958.png) no-repeat -2px -97px; +} +.okfocus { + text-align:center; + position:fixed; + bottom:10px; + left:0; + width:100%; + +} +.okfocus img { + width:100px; }
\ No newline at end of file |