Created
March 1, 2015 15:45
-
-
Save hyl/d70f593c2fb9267dc57f to your computer and use it in GitHub Desktop.
De-minified version of the CSS from http://www.htcvr.com/css/style.css?v=1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "base.css"; | |
.pace { | |
-webkit-pointer-events: none; | |
pointer-events: none; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
user-select: none; | |
} | |
.pace .pace-progress { | |
display: block; | |
position: fixed; | |
z-index: 2000; | |
top: 0; | |
left: 0; | |
height: 12px; | |
background: #a4ce4c; | |
-webkit-transition: -webkit-transform .3s, width 1s; | |
-moz-transition: width 1s; | |
-o-transform: width 1s; | |
transition: transform .3s, width 1s; | |
-webkit-transform: translateY(-50px); | |
transform: translateY(-50px); | |
pointer-events: none; | |
} | |
.pace.pace-active .pace-progress { | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
} | |
html { | |
border: 0; | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
height: auto; | |
} | |
body { | |
-webkit-font-smoothing: antialiased; | |
text-shadow: 1px 1px 1px rgba(0, 0, 0, .004); | |
font-family: Helvetica, Arial, Verdana; | |
background-color: #000; | |
color: #fff; | |
padding: 0; | |
margin: 0; | |
height: auto; | |
width: 100%} | |
#container { | |
position: relative; | |
width: 100%; | |
height: auto; | |
} | |
#content { | |
position: relative; | |
width: 100%; | |
height: auto; | |
z-index: 150; | |
} | |
.content { | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
display: table; | |
} | |
.content-inner { | |
width: 100%; | |
height: 100%; | |
display: table-cell; | |
text-align: center; | |
vertical-align: middle; | |
} | |
h1 { | |
font-family: "Futura W01 Light", Helvetica, Arial, Verdana; | |
font-size: 60px; | |
letter-spacing: 22px; | |
color: #fff; | |
text-transform: uppercase; | |
text-align: center; | |
} | |
h2 { | |
font-family: "Futura W01 Light", Helvetica, Arial, Verdana; | |
font-size: 18px; | |
letter-spacing: 5px; | |
color: #fff; | |
text-transform: uppercase; | |
margin-top: 32px; | |
padding-top: 18px; | |
padding-left: 10px; | |
border-top: 1px solid #fff; | |
display: inline-block; | |
text-align: center; | |
} | |
h3 { | |
font-family: "Futura W01 Light", Helvetica, Arial, Verdana; | |
font-size: 40px; | |
letter-spacing: 15px; | |
color: #fff; | |
text-transform: uppercase; | |
text-align: center; | |
} | |
h4 { | |
font-family: "Futura W01 Light", Helvetica, Arial, Verdana; | |
font-size: 12px; | |
letter-spacing: 2px; | |
color: #fff; | |
text-transform: uppercase; | |
margin-top: 32px; | |
text-align: center; | |
} | |
p { | |
width: 900px; | |
height: auto; | |
font-family: "Proxima N W01 Light", Helvetica, Arial, Verdana; | |
font-size: 22px; | |
line-height: 28px; | |
color: #fff; | |
margin: auto; | |
margin-top: 40px; | |
text-align: center; | |
} | |
.button { | |
position: relative; | |
margin: auto; | |
text-decoration: none; | |
display: inline-block; | |
} | |
.button .text { | |
padding: 12px 20px 12px 30px; | |
font-family: "Futura W01 Book", Helvetica, Verdana, sans-serif; | |
color: #fff; | |
letter-spacing: 5px; | |
font-size: 13px; | |
text-transform: uppercase; | |
float: left; | |
text-align: center; | |
vertical-align: middle; | |
} | |
.button .icon { | |
width: 12px; | |
height: 17px; | |
float: left; | |
overflow: hidden; | |
text-indent: -1000pt; | |
margin-left: 30px; | |
margin-right: -10px; | |
margin-top: 12px; | |
background-position: center center; | |
background-repeat: no-repeat; | |
background-size: 12px 17px; | |
} | |
.button:hover .border-button { | |
-webkit-transform: scale(1, 1); | |
-moz-transform: scale(1, 1); | |
-o-transform: scale(1, 1); | |
transform: scale(1, 1); | |
} | |
.button .border-button { | |
position: absolute; | |
background-color: #fff; | |
width: 1px; | |
height: 1px; | |
} | |
.border-anim { | |
-webkit-transition: all .3s ease-out; | |
-moz-transition: all .3s ease-out; | |
-o-transition: all .3s ease-out; | |
-ms-transition: all .3s ease-out; | |
transition: all .3s ease-out; | |
} | |
.button .border-left { | |
left: 0; | |
height: 100%; | |
-webkit-transform: scale(1, .5); | |
-moz-transform: scale(1, .5); | |
-o-transform: scale(1, .5); | |
transform: scale(1, .5); | |
} | |
.button .border-right { | |
right: 0; | |
height: 100%; | |
-webkit-transform: scale(1, .5); | |
-moz-transform: scale(1, .5); | |
-o-transform: scale(1, .5); | |
transform: scale(1, .5); | |
} | |
.button .border-top { | |
top: 0; | |
width: 100%; | |
-webkit-transform: scale(.5, 1); | |
-moz-transform: scale(.5, 1); | |
-o-transform: scale(.5, 1); | |
transform: scale(.5, 1); | |
} | |
.button .border-bottom { | |
bottom: 0; | |
width: 100%; | |
-webkit-transform: scale(.5, 1); | |
-moz-transform: scale(.5, 1); | |
-o-transform: scale(.5, 1); | |
transform: scale(.5, 1); | |
} | |
.button.button-style1 .border-left { | |
bottom: 0; | |
-webkit-transform-origin: left bottom; | |
-moz-transform-origin: left bottom; | |
-o-transform-origin: left bottom; | |
transform-origin: left bottom; | |
} | |
.button.button-style1 .border-right { | |
top: 0; | |
-webkit-transform-origin: right top; | |
-moz-transform-origin: right top; | |
-o-transform-origin: right top; | |
transform-origin: right top; | |
} | |
.button.button-style1 .border-top { | |
right: 0; | |
-webkit-transform-origin: right top; | |
-moz-transform-origin: right top; | |
-o-transform-origin: right top; | |
transform-origin: right top; | |
} | |
.button.button-style1 .border-bottom { | |
left: 0; | |
-webkit-transform-origin: left bottom; | |
-moz-transform-origin: left bottom; | |
-o-transform-origin: left bottom; | |
transform-origin: left bottom; | |
} | |
.button.button-style2 .border-left { | |
top: 0; | |
-webkit-transform-origin: left top; | |
-moz-transform-origin: left top; | |
-o-transform-origin: left top; | |
transform-origin: left top; | |
} | |
.button.button-style2 .border-right { | |
bottom: 0; | |
-webkit-transform-origin: right bottom; | |
-moz-transform-origin: right bottom; | |
-o-transform-origin: right bottom; | |
transform-origin: right bottom; | |
} | |
.button.button-style2 .border-top { | |
left: 0; | |
-webkit-transform-origin: left top; | |
-moz-transform-origin: left top; | |
-o-transform-origin: left top; | |
transform-origin: left top; | |
} | |
.button.button-style2 .border-bottom { | |
right: 0; | |
-webkit-transform-origin: right bottom; | |
-moz-transform-origin: right bottom; | |
-o-transform-origin: right bottom; | |
transform-origin: right bottom; | |
} | |
.button .border-horizontal2 { | |
-webkit-transform: scale(1, .2); | |
-moz-transform: scale(1, .2); | |
-o-transform: scale(1, .2); | |
transform: scale(1, .2); | |
} | |
.button .border-horizontal3 { | |
-webkit-transform: scale(1, .3); | |
-moz-transform: scale(1, .3); | |
-o-transform: scale(1, .3); | |
transform: scale(1, .3); | |
} | |
.button .border-horizontal4 { | |
-webkit-transform: scale(1, .4); | |
-moz-transform: scale(1, .4); | |
-o-transform: scale(1, .4); | |
transform: scale(1, .4); | |
} | |
.button .border-horizontal5 { | |
-webkit-transform: scale(1, .5); | |
-moz-transform: scale(1, .5); | |
-o-transform: scale(1, .5); | |
transform: scale(1, .5); | |
} | |
.button .border-horizontal6 { | |
-webkit-transform: scale(1, .6); | |
-moz-transform: scale(1, .6); | |
-o-transform: scale(1, .6); | |
transform: scale(1, .6); | |
} | |
.button .border-horizontal7 { | |
-webkit-transform: scale(1, .7); | |
-moz-transform: scale(1, .7); | |
-o-transform: scale(1, .7); | |
transform: scale(1, .7); | |
} | |
.button .border-horizontal8 { | |
-webkit-transform: scale(1, .8); | |
-moz-transform: scale(1, .8); | |
-o-transform: scale(1, .8); | |
transform: scale(1, .8); | |
} | |
.button .border-vertical2 { | |
-webkit-transform: scale(.2, 1); | |
-moz-transform: scale(.2, 1); | |
-o-transform: scale(.2, 1); | |
transform: scale(.2, 1); | |
} | |
.button .border-vertical3 { | |
-webkit-transform: scale(.3, 1); | |
-moz-transform: scale(.3, 1); | |
-o-transform: scale(.3, 1); | |
transform: scale(.3, 1); | |
} | |
.button .border-vertical4 { | |
-webkit-transform: scale(.4, 1); | |
-moz-transform: scale(.4, 1); | |
-o-transform: scale(.4, 1); | |
transform: scale(.4, 1); | |
} | |
.button .border-vertical5 { | |
-webkit-transform: scale(.5, 1); | |
-moz-transform: scale(.5, 1); | |
-o-transform: scale(.5, 1); | |
transform: scale(.5, 1); | |
} | |
.button .border-vertical6 { | |
-webkit-transform: scale(.6, 1); | |
-moz-transform: scale(.6, 1); | |
-o-transform: scale(.6, 1); | |
transform: scale(.6, 1); | |
} | |
.button .border-vertical7 { | |
-webkit-transform: scale(.7, 1); | |
-moz-transform: scale(.7, 1); | |
-o-transform: scale(.7, 1); | |
transform: scale(.7, 1); | |
} | |
.button .border-vertical8 { | |
-webkit-transform: scale(.8, 1); | |
-moz-transform: scale(.8, 1); | |
-o-transform: scale(.8, 1); | |
transform: scale(.8, 1); | |
} | |
#partnership p { | |
font-size: 20px; | |
line-height: 26px; | |
} | |
#interface { | |
position: fixed; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 600px; | |
z-index: 200; | |
pointer-events: none; | |
} | |
header { | |
width: 100%; | |
height: 92px; | |
} | |
#header-bkg { | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 92px; | |
background-color: #000; | |
background-color: rgba(0, 0, 0, .75); | |
display: none; | |
} | |
#interface-logo { | |
width: 149px; | |
height: 43px; | |
overflow: hidden; | |
display: block; | |
position: fixed; | |
left: 25px; | |
top: 25px; | |
z-index: 401; | |
pointer-events: auto; | |
} | |
#interface-logo img { | |
position: relative; | |
width: 100%} | |
#interface-logo span { | |
text-indent: -999999px; | |
} | |
#interface-right { | |
position: absolute; | |
right: 25px; | |
top: 37px; | |
pointer-events: auto; | |
} | |
#interface-language { | |
position: relative; | |
float: left; | |
margin-left: 40px; | |
display: none; | |
} | |
#interface-menu { | |
float: left; | |
width: auto; | |
} | |
#interface-menu ul li { | |
position: relative; | |
margin-left: 40px; | |
float: left; | |
display: block; | |
} | |
#interface-menu ul li:first-child { | |
margin-left: 0; | |
} | |
#interface-menu ul li a { | |
position: relative; | |
font-family: "Futura W01 Book", Helvetica, Arial, Verdana; | |
font-size: 14px; | |
letter-spacing: 3px; | |
color: #fff; | |
text-transform: uppercase; | |
text-decoration: none; | |
display: inline-block; | |
white-space: nowrap; | |
} | |
#interface-menu ul li a .underline { | |
position: absolute; | |
left: 0; | |
bottom: -5px; | |
width: 100%; | |
height: 1px; | |
background-color: #fff; | |
display: block; | |
-webkit-transition: all .3s ease-out; | |
-moz-transition: all .3s ease-out; | |
-o-transition: all .3s ease-out; | |
-ms-transition: all .3s ease-out; | |
transition: all .3s ease-out; | |
-webkit-transform: scale(0, 1); | |
-moz-transform: scale(0, 1); | |
-o-transform: scale(0, 1); | |
transform: scale(0, 1); | |
opacity: 0; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"} | |
#interface-menu ul li a:hover .underline { | |
opacity: 1; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
-webkit-transform: scale(1, 1); | |
-moz-transform: scale(1, 1); | |
-o-transform: scale(1, 1); | |
transform: scale(1, 1); | |
} | |
#interface-menu-icon { | |
position: absolute; | |
right: 25px; | |
top: 37px; | |
width: 25px; | |
height: 18px; | |
-webkit-transform: rotate(0deg); | |
-moz-transform: rotate(0deg); | |
-o-transform: rotate(0deg); | |
transform: rotate(0deg); | |
-webkit-transition: .5s ease-in-out; | |
-moz-transition: .5s ease-in-out; | |
-o-transition: .5s ease-in-out; | |
transition: .5s ease-in-out; | |
cursor: pointer; | |
pointer-events: auto; | |
display: none; | |
} | |
#interface-menu-icon span { | |
display: block; | |
position: absolute; | |
height: 3px; | |
width: 100%; | |
background: #fff; | |
border-radius: 3px; | |
opacity: 1; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
left: 0; | |
-webkit-transform: rotate(0deg); | |
-moz-transform: rotate(0deg); | |
-o-transform: rotate(0deg); | |
transform: rotate(0deg); | |
-webkit-transition: .25s ease-in-out; | |
-moz-transition: .25s ease-in-out; | |
-o-transition: .25s ease-in-out; | |
transition: .25s ease-in-out; | |
} | |
#interface-menu-icon span:nth-child(1) { | |
top: 0; | |
} | |
#interface-menu-icon span:nth-child(2), #interface-menu-icon span:nth-child(3) { | |
top: 7px; | |
} | |
#interface-menu-icon span:nth-child(4) { | |
top: 14px; | |
} | |
#interface-menu-icon.open span:nth-child(1) { | |
top: 7px; | |
width: 0; | |
left: 50%} | |
#interface-menu-icon.open span:nth-child(2) { | |
-webkit-transform: rotate(45deg); | |
-moz-transform: rotate(45deg); | |
-o-transform: rotate(45deg); | |
transform: rotate(45deg); | |
} | |
#interface-menu-icon.open span:nth-child(3) { | |
-webkit-transform: rotate(-45deg); | |
-moz-transform: rotate(-45deg); | |
-o-transform: rotate(-45deg); | |
transform: rotate(-45deg); | |
} | |
#interface-menu-icon.open span:nth-child(4) { | |
top: 7px; | |
width: 0; | |
left: 50%} | |
.selectbox { | |
width: 180px; | |
height: 35px; | |
overflow: hidden; | |
background-image: url(../images/languageselector_ddarrow.png); | |
background-position: 162px center; | |
background-repeat: no-repeat; | |
background-size: 8px 5px; | |
border: 1px solid #fff; | |
} | |
.selectbox select { | |
background: transparent; | |
width: 200px; | |
height: 35px; | |
padding-left: 12px; | |
padding-right: 12px; | |
padding-top: 0; | |
letter-spacing: 2pt; | |
font-family: "Futura W01 Book", Helvetica, Arial, Verdana; | |
font-size: 14px; | |
letter-spacing: 3px; | |
color: #fff; | |
text-transform: uppercase; | |
border: 0; | |
border-radius: 0; | |
-webkit-appearance: none; | |
outline: none; | |
} | |
#language-select { | |
margin-left: -12px; | |
margin-top: -10px; | |
} | |
#interface-nav { | |
position: absolute; | |
right: 14px; | |
top: 0; | |
width: 31px; | |
height: 100%; | |
display: table; | |
pointer-events: auto; | |
} | |
#interface-nav ul { | |
display: table-cell; | |
vertical-align: middle; | |
} | |
#interface-nav ul li { | |
width: 31px; | |
height: 31px; | |
margin-top: 10px; | |
} | |
#interface-nav ul li:first-child { | |
margin-top: 0; | |
} | |
#interface-nav ul li a { | |
position: relative; | |
width: 31px; | |
height: 31px; | |
display: block; | |
} | |
#interface-nav ul li a .dot { | |
width: 8px; | |
height: 8px; | |
display: block; | |
overflow: hidden; | |
position: relative; | |
top: 11px; | |
left: 11px; | |
} | |
#interface-nav ul li a .dot .light-dot { | |
width: 8px; | |
height: 8px; | |
position: relative; | |
display: block; | |
} | |
#interface-nav ul li a .dot .dark-dot { | |
width: 8px; | |
height: 8px; | |
position: relative; | |
display: none; | |
} | |
#interface-nav.dark ul li a .dot .light-dot { | |
display: none; | |
} | |
#interface-nav.dark ul li a .dot .dark-dot { | |
display: block; | |
} | |
#interface-nav ul li a .dot img { | |
height: 100%; | |
position: absolute; | |
width: 100%} | |
#interface-nav ul li a .dot .active { | |
display: none; | |
} | |
#interface-nav ul li a .dot .default, #interface-nav ul li a:hover .dot .active, #interface-nav ul li a.selected .dot .active { | |
display: block; | |
} | |
#interface-nav ul li a.selected .dot .default { | |
display: none; | |
} | |
#interface-nav ul li a .info { | |
position: absolute; | |
top: -2px; | |
right: 60px; | |
border-left: 1px solid #fff; | |
border-top: 1px solid #fff; | |
border-bottom: 1px solid #fff; | |
font-family: "Futura W01 Book", Helvetica, Arial, Verdana; | |
font-size: 12px; | |
letter-spacing: 2px; | |
color: #fff; | |
text-transform: uppercase; | |
padding: 6px 16px 4px 16px; | |
display: block; | |
white-space: nowrap; | |
opacity: 0; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
-webkit-transition: all .3s ease-out; | |
-moz-transition: all .3s ease-out; | |
-o-transition: all .3s ease-out; | |
-ms-transition: all .3s ease-out; | |
transition: all .3s ease-out; | |
pointer-events: none; | |
} | |
#interface-nav.dark ul li a .info { | |
border-left: 1px solid #1a1a1a; | |
border-top: 1px solid #1a1a1a; | |
border-bottom: 1px solid #1a1a1a; | |
color: #1a1a1a; | |
} | |
.lt-ie9 #interface-nav ul li a .info { | |
border: 1px solid #fff; | |
} | |
.lt-ie9 #interface-nav.dark ul li a .info { | |
border: 1px solid #1a1a1a; | |
} | |
#interface-nav ul li a:hover .info { | |
right: 40px; | |
opacity: 1; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
pointer-events: auto; | |
} | |
#interface-nav ul li a .triangle { | |
height: 20px; | |
width: 10px; | |
overflow: hidden; | |
display: block; | |
position: absolute; | |
right: -10px; | |
top: 7px; | |
} | |
#interface-nav ul li a .triangle-inner { | |
position: absolute; | |
left: -5px; | |
top: 3px; | |
height: 8px; | |
width: 6px; | |
border: 1px solid #fff; | |
-webkit-transform: rotate(45deg); | |
-moz-transform: rotate(45deg); | |
transform: rotate(45deg); | |
} | |
#interface-nav.dark ul li a .triangle-inner { | |
border: 1px solid #1a1a1a; | |
} | |
#interface-nav ul li a .border { | |
position: absolute; | |
right: 0; | |
width: 1px; | |
height: 10px; | |
background-color: #fff; | |
} | |
#interface-nav.dark ul li a .border { | |
background-color: #1a1a1a; | |
} | |
#interface-nav ul li a .border-top { | |
top: 0; | |
} | |
#interface-nav ul li a .border-bottom { | |
top: 19px; | |
} | |
#interface-nav ul li a.htc .info { | |
border-left: 1px solid #a4ce4c; | |
border-top: 1px solid #a4ce4c; | |
border-bottom: 1px solid #a4ce4c; | |
color: #a4ce4c; | |
} | |
#interface-nav ul li a.htc .triangle-inner { | |
border: 1px solid #a4ce4c; | |
} | |
#interface-nav ul li a.htc .border { | |
background-color: #a4ce4c; | |
} | |
.lt-ie9 #interface-nav ul li a .triangle, .lt-ie9 #interface-nav ul li a .border { | |
display: none; | |
} | |
section { | |
position: relative; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 600px; | |
background-position: center center; | |
background-repeat: no-repeat; | |
background-size: cover; | |
background-color: #000; | |
z-index: 102; | |
} | |
.light-section { | |
background-color: #eaeaea; | |
} | |
footer { | |
position: relative; | |
width: 100%; | |
height: 190px; | |
background-color: #1a1a1a; | |
display: table; | |
z-index: 103; | |
} | |
#footer-nav { | |
display: table-cell; | |
vertical-align: middle; | |
text-align: center; | |
} | |
#footer-nav ul li { | |
font-family: "Futura W01 Light", Helvetica, Arial, Verdana; | |
font-size: 12px; | |
letter-spacing: 2px; | |
color: #666; | |
text-transform: uppercase; | |
display: inline-block; | |
white-space: nowrap; | |
margin-left: 40px; | |
} | |
#footer-nav ul li:first-child { | |
margin-left: 0; | |
} | |
#footer-nav ul li a { | |
color: #666; | |
text-decoration: none; | |
padding-left: 2px; | |
padding-bottom: 2px; | |
border-bottom: 1px solid #666; | |
} | |
#footer-nav ul li a:hover { | |
border-bottom: 0; | |
} | |
.overlay { | |
position: fixed; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
background-color: #000; | |
background-color: rgba(0, 0, 0, .85); | |
z-index: 301; | |
display: none; | |
} | |
#video-player iframe { | |
z-index: 1; | |
} | |
.overlay p, .overlay .button { | |
margin-top: 60px; | |
} | |
.overlay-close { | |
position: absolute; | |
right: 25px; | |
top: 25px; | |
width: 35px; | |
height: 35px; | |
overflow: hidden; | |
text-indent: -1000pt; | |
background-position: center center; | |
background-repeat: no-repeat; | |
background-size: 35px 35px; | |
background-image: url(../images/x_2X.png); | |
z-index: 800; | |
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/x_2X.png', sizingMethod='scale'); | |
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/x_2X.png', sizingMethod='scale')"} | |
#stay-updated-form { | |
width: 580px; | |
height: 48px; | |
margin: auto; | |
margin-top: 60px; | |
} | |
#stay-updated-input { | |
width: 455px; | |
height: 48px; | |
background: none; | |
border: 1px solid #fff; | |
outline: none; | |
font-family: "Futura W01 Book", Helvetica, Arial, Verdana; | |
font-size: 14px; | |
color: #fff; | |
float: left; | |
box-sizing: border-box; | |
padding: 12px; | |
border-radius: 0; | |
} | |
#stay-updated-confirmation { | |
margin-top: 30px; | |
opacity: 0; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"} | |
#stay-updated-input.error { | |
border: 1px solid red; | |
} | |
#stay-updated-button { | |
width: 125px; | |
height: 48px; | |
float: left; | |
background-color: #fff; | |
text-decoration: none; | |
display: block; | |
} | |
#stay-updated-button .text { | |
font-family: "Futura W01 Book", Helvetica, Arial, Verdana; | |
font-size: 12px; | |
letter-spacing: 2px; | |
color: #2d2d2d; | |
text-transform: uppercase; | |
text-align: center; | |
padding-top: 16px; | |
display: inline-block; | |
} | |
#stay-updated-nav { | |
margin-top: 30px; | |
} | |
#stay-updated-nav ul li { | |
font-family: "Futura W01 Light", Helvetica, Arial, Verdana; | |
font-size: 12px; | |
letter-spacing: 2px; | |
color: #fff; | |
text-transform: uppercase; | |
display: inline-block; | |
white-space: nowrap; | |
margin-left: 40px; | |
} | |
#stay-updated-nav ul li:first-child { | |
margin-left: 0; | |
} | |
#stay-updated-nav ul li a { | |
color: #fff; | |
text-decoration: none; | |
padding-left: 2px; | |
padding-bottom: 2px; | |
border-bottom: 1px solid #fff; | |
} | |
#stay-updated-nav ul li a:hover { | |
border-bottom: 0; | |
} | |
#video { | |
position: fixed; | |
left: 0; | |
top: 0; | |
z-index: 101; | |
background-image: url(../images/teaser_bg.jpg); | |
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/teaser_bg.jpg', sizingMethod='scale'); | |
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/teaser_bg.jpg', sizingMethod='scale')"} | |
.touch #video { | |
position: relative; | |
} | |
.video-bkg { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%} | |
#video-rethink { | |
position: relative; | |
width: 900px; | |
height: 70px; | |
overflow: hidden; | |
margin: auto; | |
margin-bottom: 60px; | |
} | |
#video-rethink span { | |
width: 100%; | |
height: 100%; | |
overflow: hidden; | |
display: block; | |
text-indent: -1000pt; | |
} | |
#video-rethink img { | |
width: 100%; | |
display: none; | |
} | |
#video-rethink-anim { | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 900px; | |
height: 70px; | |
overflow: hidden; | |
background-size: 900px 6090px; | |
background-position: center top; | |
background-repeat: no-repeat; | |
background-image: url(../images/rethinkreality_anim.png); | |
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/rethinkreality_anim.png', sizingMethod='scale'); | |
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/rethinkreality_anim.png', sizingMethod='scale')"} | |
#video-rethink-anim.anim { | |
-webkit-animation: rethink-anim 3.5s steps(86) 1; | |
-moz-animation: rethink-anim 3.5s steps(86) 1; | |
-ms-animation: rethink-anim 3.5s steps(86) 1; | |
-o-animation: rethink-anim 3.5s steps(86) 1; | |
animation: rethink-anim 3.5s steps(86) 1; | |
-webkit-animation-fill-mode: forwards; | |
-moz-animation-fill-mode: forwards; | |
-ms-animation-fill-mode: forwards; | |
-o-animation-fill-mode: forwards; | |
animation-fill-mode: forwards; | |
} | |
.video-rethink-anim-letter { | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 50px; | |
height: 70px; | |
overflow: hidden; | |
background-position: center top; | |
background-repeat: no-repeat; | |
-webkit-animation: rethink-anim 3.5s steps(86) 1; | |
-moz-animation: rethink-anim 3.5s steps(86) 1; | |
-ms-animation: rethink-anim 3.5s steps(86) 1; | |
-o-animation: rethink-anim 3.5s steps(86) 1; | |
animation: rethink-anim 3.5s steps(86) 1; | |
} | |
#video-rethink-anim-letter1 { | |
left: 1px; | |
background-size: 50px 3920px; | |
background-image: url(../images/rethinkreality/rethinkreality_r.png); | |
-webkit-animation: rethink-anim 2.24s steps(55) infinite; | |
-moz-animation: rethink-anim 2.24s steps(55) 1; | |
-ms-animation: rethink-anim 2.24s steps(55) 1; | |
-o-animation: rethink-anim 2.24s steps(55) 1; | |
animation: rethink-anim 2.24s steps(55) 1; | |
} | |
#video-rethink-anim-letter2 { | |
left: 64px; | |
background-size: 50px 6860px; | |
background-image: url(../images/rethinkreality/rethinkreality_e.png); | |
-webkit-animation: rethink-anim 3.54s steps(97) infinite; | |
-moz-animation: rethink-anim 3.54s steps(97) 1; | |
-ms-animation: rethink-anim 3.54s steps(97) 1; | |
-o-animation: rethink-anim 3.54s steps(97) 1; | |
animation: rethink-anim 3.54s steps(97) 1; | |
} | |
@-webkit-keyframes rethink-anim { | |
0% { | |
background-position: center top; | |
} | |
to { | |
background-position: center bottom; | |
} | |
}@-moz-keyframes rethink-anim { | |
0% { | |
background-position: center top; | |
} | |
to { | |
background-position: center bottom; | |
} | |
}@-ms-keyframes rethink-anim { | |
0% { | |
background-position: center top; | |
} | |
to { | |
background-position: center bottom; | |
} | |
}@-o-keyframes rethink-anim { | |
0% { | |
background-position: center top; | |
} | |
to { | |
background-position: center bottom; | |
} | |
}@keyframes rethink-anim { | |
0% { | |
background-position: center top; | |
} | |
to { | |
background-position: center bottom; | |
} | |
}#video-play .icon { | |
background-image: url(../images/playicon_2X.png); | |
} | |
#video-release { | |
position: absolute; | |
left: 25px; | |
bottom: 25px; | |
} | |
#video-release .text-holder { | |
position: absolute; | |
left: 0; | |
bottom: 0; | |
} | |
#video-release .text-holder .text { | |
font-family: "Futura W01 Book", Helvetica, Arial, Verdana; | |
font-size: 14px; | |
letter-spacing: 3px; | |
color: #fff; | |
text-transform: uppercase; | |
border-bottom: 1px solid #fff; | |
display: inline-block; | |
padding-bottom: 4px; | |
white-space: nowrap; | |
} | |
#video-release2 { | |
opacity: 0; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"} | |
#video-event { | |
position: absolute; | |
right: 25px; | |
bottom: 25px; | |
display: none; | |
} | |
#video-event-date { | |
float: left; | |
} | |
#video-event-date .icon { | |
float: left; | |
width: 14px; | |
height: 15px; | |
overflow: hidden; | |
text-indent: -1000pt; | |
background-position: center center; | |
background-repeat: no-repeat; | |
background-size: 14px 15px; | |
background-image: url(../images/calendaricon_2X.png); | |
display: block; | |
} | |
#video-event-date .text { | |
float: left; | |
font-family: "Futura W01 Book", Helvetica, Arial, Verdana; | |
font-size: 14px; | |
letter-spacing: 3px; | |
color: #7adddb; | |
border-bottom: 1px solid #7adddb; | |
text-transform: uppercase; | |
display: inline-block; | |
padding-bottom: 4px; | |
white-space: nowrap; | |
margin-left: 10px; | |
} | |
#video-event-name { | |
position: relative; | |
float: left; | |
} | |
#video-event-name .text { | |
font-family: "Futura W01 Book", Helvetica, Arial, Verdana; | |
font-size: 14px; | |
letter-spacing: 3px; | |
color: #fff; | |
border-bottom: 1px solid #fff; | |
text-transform: uppercase; | |
display: inline-block; | |
padding-bottom: 4px; | |
padding-left: 10px; | |
white-space: nowrap; | |
opacity: 1; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"} | |
#video-event-name .text-default { | |
-webkit-transition: all .5s ease-out; | |
-moz-transition: all .5s ease-out; | |
-o-transition: all .5s ease-out; | |
-ms-transition: all .5s ease-out; | |
transition: all .5s ease-out; | |
} | |
#video-event-name .text-hover { | |
position: absolute; | |
left: 0; | |
top: 0; | |
color: #7adddb; | |
border-bottom: 1px solid #7adddb; | |
opacity: 0; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
-webkit-transition: all .5s ease-out; | |
-moz-transition: all .5s ease-out; | |
-o-transition: all .5s ease-out; | |
-ms-transition: all .5s ease-out; | |
transition: all .5s ease-out; | |
} | |
#video-event:hover #video-event-name .text-default { | |
opacity: 0; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"} | |
#video-event:hover #video-event-name .text-hover { | |
opacity: 1; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"} | |
#vision { | |
margin-top: 600px; | |
background-image: url(../images/vrvision_cloudbg.jpg); | |
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/vrvision_cloudbg.jpg', sizingMethod='scale'); | |
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/vrvision_cloudbg.jpg', sizingMethod='scale')"} | |
.touch #vision { | |
margin-top: 0; | |
} | |
#vision-stars { | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
background-position: 0 0; | |
background-image: url(../images/starsbg.png); | |
} | |
#htc-valve { | |
background-image: url(../images/HTCplusValve_bg.jpg); | |
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/HTCplusValve_bg.jpg', sizingMethod='scale'); | |
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/HTCplusValve_bg.jpg', sizingMethod='scale')"} | |
#htc-valve-title { | |
width: 250px; | |
height: 250px; | |
margin: auto; | |
overflow: hidden; | |
} | |
#htc-valve-title img { | |
width: 100%} | |
#htc-valve-title span { | |
text-indent: -1000pt; | |
} | |
#htc-valve-footer { | |
width: 900px; | |
height: auto; | |
margin: auto; | |
margin-top: 60px; | |
} | |
#htc-valve-footer-left { | |
width: 33%; | |
height: auto; | |
float: left; | |
} | |
#htc-valve-footer-middle { | |
width: 34%; | |
height: auto; | |
float: left; | |
display: block; | |
} | |
#htc-valve-footer-right { | |
width: 33%; | |
height: auto; | |
float: right; | |
display: block; | |
} | |
#htc-valve-valve { | |
width: 96px; | |
height: 27px; | |
overflow: hidden; | |
margin-top: 6px; | |
} | |
#htc-valve-valve img { | |
width: 100%} | |
#htc-valve-valve span { | |
text-indent: -1000pt; | |
} | |
#htc-valve-steam { | |
float: right; | |
width: 101px; | |
height: 58px; | |
overflow: hidden; | |
margin-top: -8px; | |
} | |
#htc-valve-steam img { | |
width: 100%} | |
#htc-valve-steam span { | |
text-indent: -1000pt; | |
} | |
#partnership { | |
background-image: url(../images/contentpartners_cloudbg.jpg); | |
overflow: hidden; | |
} | |
#partnership .slideshow { | |
height: 280px; | |
position: relative; | |
margin: 4% auto 0; | |
width: 900px; | |
} | |
@media screen and (min-width:991px) and (max-width:1200px) { | |
#partnership .slideshow { | |
width: 750px; | |
} | |
}@media screen and (min-width:768px) and (max-width:990px) { | |
#partnership .slideshow { | |
height: 200px; | |
margin: 7% auto 0; | |
width: 550px; | |
} | |
}@media screen and (min-width:580px) and (max-width:767px) { | |
#partnership .slideshow { | |
height: 250px; | |
margin: 7% auto 0; | |
width: 70%} | |
}@media screen and (max-width:579px) { | |
#partnership .slideshow { | |
height: 260px; | |
margin: 15% auto 0; | |
width: 60%} | |
}#partnership .slideshow .nav { | |
display: block; | |
height: 40px; | |
position: absolute; | |
top: 50%; | |
width: 40px; | |
-webkit-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
transform: translateY(-50%); | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; | |
opacity: .7; | |
-webkit-transition: all .2s ease-in-out; | |
transition: all .2s ease-in-out; | |
z-index: 100; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
#partnership .slideshow .nav:hover { | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
opacity: 1; | |
} | |
#partnership .slideshow .nav img { | |
height: 100%} | |
#partnership .slideshow .nav span { | |
display: block; | |
text-indent: -100000pt; | |
} | |
#partnership .slideshow .prev { | |
display: none; | |
left: -10%} | |
#partnership .slideshow .next { | |
right: -10%} | |
@media screen and (max-width:579px) { | |
#partnership .slideshow .prev { | |
display: none; | |
left: -50px; | |
} | |
#partnership .slideshow .next { | |
right: -50px; | |
} | |
}#partnership .viewport { | |
height: 100%; | |
z-index: 1; | |
} | |
#partnership .slideshow ul { | |
height: 100%; | |
left: 0; | |
margin: 0; | |
padding: 0; | |
position: absolute; | |
top: 0; | |
} | |
#partnership .slideshow ul li { | |
background-color: #303030; | |
float: left; | |
list-style: none; | |
height: 100%; | |
margin: 0; | |
overflow: hidden; | |
padding: 0; | |
position: relative; | |
width: 33.3333%; | |
opacity: 0; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
-webkit-transition: opacity .3s ease-in-out; | |
transition: opacity .3s ease-in-out; | |
} | |
#partnership .slideshow ul li:nth-child(3n+1) { | |
background-color: #000; | |
} | |
#partnership .slideshow ul li:nth-child(3n+2) { | |
background-color: #232323; | |
} | |
#partnership .slideshow ul li:nth-child(3n+3) { | |
background-color: #303030; | |
} | |
#partnership .slideshow ul li.visible { | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
opacity: 1; | |
} | |
#partnership .slideshow li a { | |
display: block; | |
height: 100%; | |
position: relative; | |
width: 100%} | |
#partnership .slideshow li .bg { | |
display: block; | |
height: 100%; | |
left: 0; | |
position: absolute; | |
top: 0; | |
width: 100%; | |
z-index: 1; | |
} | |
#partnership .slideshow li .bg img { | |
left: 50%; | |
min-height: 100%; | |
min-width: 100%; | |
height: auto; | |
width: 120%; | |
position: absolute; | |
top: 50%; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
-webkit-transform: translateY(-50%) translateX(-50%); | |
-ms-transform: translateY(-50%) translateX(-50%); | |
transform: translateY(-50%) translateX(-50%); | |
-webkit-transition: all .6s ease-in-out; | |
transition: all .6s ease-in-out; | |
} | |
#partnership .slideshow li a:hover .bg img { | |
-webkit-transform: translateY(-55%) translateX(-50%); | |
-ms-transform: translateY(-55%) translateX(-50%); | |
transform: translateY(-55%) translateX(-50%); | |
} | |
#partnership .slideshow li .logo { | |
display: block; | |
left: 50%; | |
position: absolute; | |
top: 50%; | |
width: 40%; | |
z-index: 2; | |
-webkit-transform: translateY(-50%) translateX(-50%); | |
-ms-transform: translateY(-50%) translateX(-50%); | |
transform: translateY(-50%) translateX(-50%); | |
-webkit-transition: all .3s ease-out; | |
transition: all .3s ease-out; | |
} | |
#partnership .slideshow li .logo.short { | |
width: 60%} | |
#partnership .slideshow li a:hover .logo { | |
top: 33%} | |
#partnership .slideshow li .logo img { | |
width: 100%} | |
#partnership .slideshow li p { | |
background: #000; | |
background: rgba(0, 0, 0, .7); | |
bottom: -100%; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
font-size: 16px; | |
line-height: 120%; | |
margin: 0; | |
padding: 30px; | |
position: absolute; | |
left: 0; | |
text-align: left; | |
width: 100%; | |
z-index: 5; | |
-webkit-transition: all .3s ease-out; | |
transition: all .3s ease-out; | |
} | |
#partnership .slideshow li a:hover p { | |
bottom: 0; | |
} | |
#dev-kit { | |
background-position: center center; | |
background-repeat: no-repeat; | |
background-size: cover; | |
background-image: url(../images/headset.jpg); | |
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/temp-dev-kit.jpg', sizingMethod='scale'); | |
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/temp-dev-kit.jpg', sizingMethod='scale')"} | |
#dev-kit h3 { | |
display: none; | |
} | |
#features-product { | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 600px; | |
background-repeat: repeat; | |
background-size: auto; | |
background-image: url(../images/inflicted_subtle.png); | |
z-index: 200; | |
} | |
#features-product.end { | |
top: auto; | |
bottom: 0; | |
} | |
#features-product.active { | |
position: fixed; | |
top: 0; | |
bottom: auto; | |
} | |
#features-header { | |
width: 100%; | |
height: auto; | |
margin: auto; | |
margin-top: 160px; | |
} | |
#features-header h1, #features-header h4 { | |
color: #1a1a1a; | |
} | |
#features-header p { | |
width: 760px; | |
color: #1a1a1a; | |
} | |
#features-content { | |
position: relative; | |
width: 90%; | |
height: auto; | |
max-width: 1500px; | |
margin: auto; | |
z-index: 300; | |
} | |
#features-content ul { | |
padding: 0; | |
margin: 0; | |
} | |
#features-content ul li { | |
width: 100%; | |
height: 600px; | |
display: table; | |
} | |
#features-content ul li:first-child { | |
margin-top: 300px; | |
} | |
#features-content ul li .content-holder { | |
display: table-cell; | |
width: 100%; | |
height: 100%; | |
vertical-align: middle; | |
} | |
#features-content ul li .content-holder .info { | |
float: left; | |
width: 175px; | |
height: auto; | |
display: block; | |
padding: 50px; | |
} | |
#features-content ul li:nth-child(even) .content-holder .info { | |
float: right; | |
} | |
#features-content ul li .content-holder .info .title { | |
font-family: "Futura W01 Book", Helvetica, Arial, Verdana; | |
font-size: 12px; | |
letter-spacing: 3px; | |
color: #1a1a1a; | |
text-transform: uppercase; | |
margin-top: 10px; | |
font-weight: 700; | |
border-bottom: 1px solid #1a1a1a; | |
padding-bottom: 5px; | |
} | |
#features-content ul li .content-holder .info .copy { | |
font-family: "Proxima N W01 Light", Helvetica, Arial, Verdana; | |
font-size: 14px; | |
color: #1a1a1a; | |
margin-top: 10px; | |
} | |
#features-headsets { | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%} | |
.features-headset { | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
background-repeat: no-repeat; | |
background-position: center center; | |
display: none; | |
} | |
#features-headset1 { | |
background-size: 760px 484px; | |
background-image: url(../images/features/features-1.png); | |
} | |
#features-headset2 { | |
background-size: 760px 640px; | |
background-image: url(../images/features/features-2.png); | |
} | |
#features-headset3 { | |
background-size: 760px 484px; | |
background-image: url(../images/features/features-3.png); | |
} | |
#features-headset4 { | |
background-size: 760px 578px; | |
background-image: url(../images/features/features-4.png); | |
} | |
#events { | |
background-color: #1a1a1a; | |
background-repeat: repeat; | |
background-size: auto; | |
background-image: url(../images/dotpattern.png); | |
} | |
#press { | |
background-color: #431472; | |
background-repeat: repeat; | |
background-size: auto; | |
background-position: 0 0; | |
background-image: url(../images/starsbg.png); | |
} | |
.htc-item { | |
width: 100%; | |
height: 100%; | |
background-position: center center; | |
background-repeat: no-repeat; | |
background-size: cover; | |
background-image: url(../images/htc-one-m9.jpg); | |
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/htc-one-m9.jpg', sizingMethod='scale'); | |
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/htc-one-m9.jpg', sizingMethod='scale')"} | |
.htc-item-content { | |
width: 900px; | |
height: 100%; | |
margin: auto; | |
} | |
.htc-item-info { | |
float: right; | |
width: 300px; | |
height: auto; | |
background-color: #fff; | |
background-color: rgba(255, 255, 255, .85); | |
margin-top: 100px; | |
} | |
.htc-item-info-copy { | |
padding: 50px; | |
} | |
.htc-item-info-title { | |
font-family: "Futura W01 Book", Helvetica, Arial, Verdana; | |
font-size: 12px; | |
letter-spacing: 3px; | |
color: #a4ce4c; | |
text-transform: uppercase; | |
margin-top: 10px; | |
font-weight: 700; | |
} | |
.htc-item-info-body { | |
font-family: "Proxima N W01 Light", Helvetica, Arial, Verdana; | |
font-size: 14px; | |
color: #1a1a1a; | |
margin-top: 10px; | |
} | |
.htc-item-info-link, .htc-item-info-link:visited { | |
font-family: "Futura W01 Book", Helvetica, Arial, Verdana; | |
font-size: 12px; | |
letter-spacing: 2px; | |
color: #a4ce4c; | |
text-transform: uppercase; | |
margin-top: 10px; | |
display: inline-block; | |
font-weight: 700; | |
text-decoration: none; | |
padding-left: 2px; | |
padding-bottom: 2px; | |
border-bottom: 1px solid #a4ce4c; | |
} | |
.htc-item-info-link:hover { | |
color: #a4ce4c; | |
text-decoration: none; | |
border-bottom: 0; | |
padding-bottom: 3px; | |
} | |
#partnership p { | |
width: 760px; | |
} | |
@media(max-width:1380px) { | |
#features-content { | |
width: 100%} | |
#features-content ul li .content-holder .info { | |
margin-left: 25px; | |
background-color: rgba(0, 0, 0, .5); | |
} | |
#features-content ul li:nth-child(even) .content-holder .info { | |
margin-left: 0; | |
margin-right: 25px; | |
} | |
#features-content ul li .content-holder .info .title { | |
color: #fff; | |
border-bottom: 1px solid #fff; | |
} | |
#features-content ul li .content-holder .info .copy { | |
color: #fff; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment