515 lines
9.8 KiB
CSS
515 lines
9.8 KiB
CSS
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
font-weight: 300;
|
|
}
|
|
|
|
a {
|
|
position: relative;
|
|
color: inherit;
|
|
}
|
|
a:link, a:visited, *[onclick] {
|
|
color: #08c;
|
|
cursor: pointer;
|
|
}
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
a:link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
a .popup {
|
|
display: none;
|
|
border-radius: 5px;
|
|
color: #AAA;
|
|
|
|
position: absolute;
|
|
z-index: 99;
|
|
right: 0;
|
|
bottom: 100%;
|
|
max-width: inherit;
|
|
max-height: 400px;
|
|
margin-right: -100px;
|
|
padding: 8px;
|
|
}
|
|
a:hover .popup {
|
|
display: block;
|
|
}
|
|
|
|
nav, h4 {
|
|
font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
|
|
}
|
|
|
|
nav {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
margin-top: 1em;
|
|
}
|
|
/*
|
|
*[id]::before {
|
|
position: relative;
|
|
content: "";
|
|
display: block;
|
|
height: 60px;
|
|
width: 5px;
|
|
background: red;
|
|
margin-top: -60px;
|
|
}
|
|
*/
|
|
|
|
section {
|
|
padding: 1ex 0;
|
|
|
|
text-align: center;
|
|
}
|
|
.content {
|
|
padding-top: 100px;
|
|
width: 940px;
|
|
margin: auto;
|
|
|
|
text-align: left;
|
|
text-align: initial;
|
|
}
|
|
.hlvl {
|
|
border-left: 5px solid #EEE;
|
|
padding-left: 1em;
|
|
}
|
|
.hlvl .hlvl {
|
|
border-color: #CCC;
|
|
margin-left: -1em;
|
|
padding-left: 2em;
|
|
}
|
|
.hlvl .hlvl .hlvl {
|
|
border-color: #AAA;
|
|
margin-left: -2em;
|
|
padding-left: 3em;
|
|
}
|
|
h2.inline, h3.inline, h4.inline {
|
|
display: inline-block;
|
|
line-height: inherit;
|
|
}
|
|
.box {
|
|
display: inline-block;
|
|
position: relative;
|
|
font-size: 0;
|
|
}
|
|
.box img {
|
|
border: 1px solid white;
|
|
}
|
|
img.block {
|
|
display: block;
|
|
border: 1px solid black;
|
|
padding: 4px;
|
|
margin: auto 1em;
|
|
width: 640px;
|
|
}
|
|
|
|
.thumb {
|
|
clear: both;
|
|
border-bottom: 2px ridge white;
|
|
margin-bottom: 4em;
|
|
}
|
|
.thumb img.pull-right, img.pull-left {
|
|
width: 400px;
|
|
}
|
|
.thumb .pull-right {
|
|
margin-left: 5ex;
|
|
}
|
|
.thumb .pull-left {
|
|
margin-right: 5ex;
|
|
}
|
|
.fit-height {
|
|
height: 100%;
|
|
max-height: 100%;
|
|
}
|
|
.middle {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
.middle::before {
|
|
display: inline-block;
|
|
content: "";
|
|
width: 0;
|
|
height: 100%;
|
|
margin-left: -2px;
|
|
vertical-align: middle;
|
|
}
|
|
.middle.play::after {
|
|
content: "▶";
|
|
display: inline-block;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
box-shadow: 0 0 1px white;
|
|
border-radius: 50%;
|
|
padding: 1ex;
|
|
font-size: 200%;
|
|
vertical-align: middle;
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
.middle.play:hover::after {
|
|
box-shadow: 0 0 10px white;
|
|
}
|
|
|
|
.column {
|
|
display: inline-block;
|
|
margin: 0 2em;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.navbar .nav .img {
|
|
padding: 4px;
|
|
}
|
|
|
|
.navbar .nav .img img {
|
|
display: block;
|
|
height: 32px;
|
|
}
|
|
ul.pictures {
|
|
list-style: none;
|
|
}
|
|
ul.pictures li {
|
|
display: inline-block;
|
|
padding: 1ex;
|
|
}
|
|
|
|
header {
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
color: white;
|
|
background: black;
|
|
text-shadow: black 0 1px 50px;
|
|
box-shadow: 0 1px 5px #000;
|
|
|
|
transition: height 0.3s;
|
|
}
|
|
header .container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
|
|
background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%);
|
|
background: gradient(radial, center center, 0px, center center, 100%, color-stop(50%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0.8)));
|
|
background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%);
|
|
background: radial-gradient(70% 50% at 30% 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.8) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44000000', endColorstr='#cc000000',GradientType=1 );
|
|
}
|
|
header a:link, header a:visited, header *[onclick] {
|
|
color: white;
|
|
}
|
|
header .background {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
header .box {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
transition: all 0.5s;
|
|
|
|
position: absolute;
|
|
right: 1em;
|
|
bottom: 1em;
|
|
width: 160px;
|
|
height: 100px;
|
|
|
|
text-align: center;
|
|
}
|
|
header .box.active {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
header .box::before {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 0;
|
|
height: 100%;
|
|
content: "";
|
|
margin-left: -2px;
|
|
}
|
|
header .box .minimized,
|
|
header .box .maximized {
|
|
position: relative;
|
|
vertical-align: middle;
|
|
font-size: 12pt;
|
|
}
|
|
header .box .minimized,
|
|
header .box.active .maximized {
|
|
display: inline-block;
|
|
}
|
|
header .box.active .minimized,
|
|
header .box .maximized {
|
|
display: none;
|
|
}
|
|
#scrollDown {
|
|
position: fixed;
|
|
z-index: -1;
|
|
left: 0;
|
|
width: 100%;
|
|
bottom: 0;
|
|
height: 1ex;
|
|
text-align: center;
|
|
|
|
color: #DDD;
|
|
font-size: 7em;
|
|
}
|
|
#app header {
|
|
height: 80%;
|
|
}
|
|
#app header .background {
|
|
background: url('../img/shot-laptop-leaning-iphone.jpg') center center;
|
|
background-size: cover;
|
|
}
|
|
#what header,
|
|
#security header,
|
|
#algorithm header,
|
|
#support header {
|
|
height: 40%;
|
|
|
|
background: #272727;
|
|
}
|
|
#what header .background,
|
|
#security header .background,
|
|
#algorithm header .background,
|
|
#support header .background {
|
|
width: 940px;
|
|
height: auto;
|
|
left: 50%;
|
|
top: -10%;
|
|
margin-left: -470px;
|
|
}
|
|
#what header .container,
|
|
#security header .container,
|
|
#algorithm header .container,
|
|
#support header .container {
|
|
background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%);
|
|
background: gradient(radial, center center, 0px, center center, 100%, color-stop(50%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0.8)));
|
|
background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%);
|
|
background: radial-gradient(50% 50% at 50% 30%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.8) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44000000', endColorstr='#cc000000',GradientType=1 );
|
|
}
|
|
#tender_toggler {
|
|
z-index: 2;
|
|
}
|
|
header .content {
|
|
position: absolute;
|
|
bottom: 5px;
|
|
left: 50%;
|
|
margin-left: -470px;
|
|
|
|
text-align: right;
|
|
|
|
/*background: linear-gradient(to bottom, rgba(0,0,0,0) 85%, rgba(0,0,0,0.7) 85%);*/
|
|
/*background: black url("../img/shot-laptop-leaning-iphone.png") center top / cover no-repeat;*/
|
|
}
|
|
h1, h2 {
|
|
font-weight: 100;
|
|
}
|
|
h1 {
|
|
font-size: 3em;
|
|
margin: 0 0 1ex;
|
|
}
|
|
header h1 {
|
|
font-size: 6em;
|
|
margin: 0;
|
|
}
|
|
header h2 {
|
|
font-size: 2em;
|
|
font-style: oblique;
|
|
}
|
|
header .movie {
|
|
display: none;
|
|
background: url('../img/about.png') no-repeat scroll 50% 40px/cover black;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top: 40px;
|
|
}
|
|
header .movie::after {
|
|
display: block;
|
|
content: " ";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url('../img/loading-spin.svg') no-repeat scroll center center transparent;
|
|
}
|
|
header.play {
|
|
height: auto !important;
|
|
max-height: 94%;
|
|
}
|
|
header.play .movie {
|
|
display: block;
|
|
}
|
|
header.play .movie video {
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
header.play h1, header.play h2, header.play .box {
|
|
display: none;
|
|
}
|
|
header .moviecontrol {
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 9;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -.5em;
|
|
margin-left: -.5em;
|
|
|
|
font-size: 400%;
|
|
vertical-align: middle;
|
|
}
|
|
header .moviecontrol::before {
|
|
content: "▶";
|
|
}
|
|
header .moviecontrol:hover {
|
|
text-decoration: none;
|
|
}
|
|
header.play .moviecontrol {
|
|
right: 1em;
|
|
bottom: 1em;
|
|
left: auto;
|
|
top: auto;
|
|
}
|
|
header.play .moviecontrol::before {
|
|
content: "❙❙";
|
|
}
|
|
header .movie::before {
|
|
display: block;
|
|
content: " ";
|
|
position: absolute;
|
|
z-index: 4;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url('../img/video-pattern.png') repeat;
|
|
background: url('../img/video-bg.png') no-repeat scroll 50% 100%/cover transparent;
|
|
}
|
|
header .movie video {
|
|
width: 100%;
|
|
height: 100%;
|
|
height: calc(100% - 40px);
|
|
height: auto;
|
|
}
|
|
header .movie .fallback {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 60px;
|
|
text-align: center;
|
|
z-index: 5;
|
|
color: #BBB;
|
|
}
|
|
footer {
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
footer h1 {
|
|
background: #EEE;
|
|
|
|
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
font-size: 170%;
|
|
font-weight: 100;
|
|
}
|
|
footer .content {
|
|
margin: 1em auto;
|
|
padding: 0;
|
|
}
|
|
footer .column {
|
|
text-align: left;
|
|
}
|
|
q::before {
|
|
content: open-quote;
|
|
}
|
|
q {
|
|
font-style: italic;
|
|
}
|
|
q::after {
|
|
content: close-quote;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
}
|
|
thead {
|
|
background: #DDD;
|
|
}
|
|
tbody {
|
|
background: #EEE;
|
|
}
|
|
th {
|
|
background: #E9E9E9;
|
|
}
|
|
td, th {
|
|
padding: 1ex;
|
|
}
|
|
thead {
|
|
border: 1px solid #DDD;
|
|
}
|
|
tbody td, tbody th {
|
|
border: 1px solid #DDD;
|
|
}
|
|
caption {
|
|
font-weight: bold;
|
|
font-size: 120%;
|
|
}
|
|
table .box {
|
|
display: block;
|
|
width: 15px;
|
|
height: 15px;
|
|
float: right;
|
|
border-radius: 5px;
|
|
}
|
|
table .box.red {
|
|
background: #A66;
|
|
border: 1px solid #C33;
|
|
}
|
|
table .box.orange {
|
|
background: #AA6;
|
|
border: 1px solid #CC3;
|
|
}
|
|
table .box.green {
|
|
background: #6A6;
|
|
border: 1px solid #3C3;
|
|
}
|
|
|
|
@media (max-width: 979px) {
|
|
.content {
|
|
width: auto;
|
|
}
|
|
header .content {
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
.pull-right, .pull-left {
|
|
float: none;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
header h1 {
|
|
font-size: 4em;
|
|
}
|
|
header h2 {
|
|
font-size: 2em;
|
|
}
|
|
header .moviecontrol {
|
|
top: 1em;
|
|
}
|
|
}
|