mirror of https://github.com/rusefi/rusefi-1.git
639 lines
13 KiB
CSS
639 lines
13 KiB
CSS
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
overflow-y: hidden;
|
|
}
|
|
.header {
|
|
/* margin-top: 6rem; */
|
|
background-image: linear-gradient( 180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.25) 100%),url('../images/site/bg.jpg');
|
|
background-attachment:fixed;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
/* padding-top: 6rem; */
|
|
padding-top: 40vh;
|
|
height: 60vh;
|
|
text-align: center; }
|
|
.value-prop {
|
|
margin-top: 1rem; }
|
|
.value-props {
|
|
margin-top: 4rem;
|
|
margin-bottom: 4rem; }
|
|
.docs-header {
|
|
text-transform: uppercase;
|
|
font-size: 1.4rem;
|
|
letter-spacing: .2rem;
|
|
font-weight: 600; }
|
|
.docs-section {
|
|
/* border-top: 1px solid #eee; */
|
|
padding: 4rem 0;
|
|
margin-bottom: 0;}
|
|
.value-img {
|
|
display: block;
|
|
text-align: center;
|
|
margin: 2.5rem auto 0; }
|
|
.example-grid .column,
|
|
.example-grid .columns {
|
|
background: #EEE;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
text-transform: uppercase;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
margin-bottom: .75rem;
|
|
font-weight: 600;
|
|
letter-spacing: .1rem; }
|
|
.docs-example .row,
|
|
.docs-example.row,
|
|
.docs-example form {
|
|
margin-bottom: 0; }
|
|
.docs-example h1,
|
|
.docs-example h2,
|
|
.docs-example h3,
|
|
.docs-example h4,
|
|
.docs-example h5,
|
|
.docs-example h6 {
|
|
margin-bottom: 1rem; }
|
|
.heading-font-size {
|
|
font-size: 1.2rem;
|
|
color: #999;
|
|
letter-spacing: normal; }
|
|
.code-example {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0; }
|
|
.code-example-body {
|
|
white-space: pre;
|
|
word-wrap: break-word }
|
|
.example {
|
|
position: relative;
|
|
margin-top: 4rem; }
|
|
.example-header {
|
|
font-weight: 600;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: .5rem; }
|
|
.example-description {
|
|
margin-bottom: 1.5rem; }
|
|
.example-screenshot-wrapper {
|
|
display: block;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 6px;
|
|
/* border: 1px solid #eee; */
|
|
height: 250px; }
|
|
|
|
.example-screenshot {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.example-screenshot.coming-soon {
|
|
width: auto;
|
|
position: absolute;
|
|
background: #eee;
|
|
top: 5px;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
left: 5px; }
|
|
|
|
.navbar {
|
|
display: none;
|
|
height: 70px;
|
|
background: #3a3a3a;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.nav-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Mobile navigation */
|
|
.nav-mobile {
|
|
z-index: 2000;
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
height: 70px;
|
|
width: 70px;
|
|
}
|
|
|
|
nav ul li a:not(:only-child):after,
|
|
nav ul li a:visited:not(:only-child):after {
|
|
padding-left: 4px;
|
|
/* content: " ▾"; */
|
|
}
|
|
nav ul li ul li {
|
|
min-width: 190px;
|
|
}
|
|
nav ul li ul li a {
|
|
padding: 15px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.nav-dropdown {
|
|
position: absolute;
|
|
display: none;
|
|
z-index: 1;
|
|
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
#nav-toggle {
|
|
position: absolute;
|
|
left: 18px;
|
|
top: 22px;
|
|
cursor: pointer;
|
|
padding: 10px 35px 16px 0px;
|
|
}
|
|
#nav-toggle span,
|
|
#nav-toggle span:before,
|
|
#nav-toggle span:after {
|
|
cursor: pointer;
|
|
border-radius: 1px;
|
|
height: 5px;
|
|
width: 35px;
|
|
background: #f15a24;
|
|
position: absolute;
|
|
display: block;
|
|
content: "";
|
|
transition: all 300ms ease-in-out;
|
|
}
|
|
#nav-toggle span:before {
|
|
top: -10px;
|
|
}
|
|
#nav-toggle span:after {
|
|
bottom: -10px;
|
|
}
|
|
#nav-toggle.active span {
|
|
background-color: transparent;
|
|
}
|
|
#nav-toggle.active span:before, #nav-toggle.active span:after {
|
|
top: 0;
|
|
}
|
|
#nav-toggle.active span:before {
|
|
transform: rotate(45deg);
|
|
}
|
|
#nav-toggle.active span:after {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
topnav {
|
|
/* display: none; */
|
|
position: fixed;
|
|
top: 0;
|
|
left:0;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
background-color: rgb(31, 31, 31);
|
|
text-transform: uppercase;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
letter-spacing: .2rem;
|
|
text-decoration: none;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
topnav ul {
|
|
/* margin-top: 2.5rem; */
|
|
display: none;
|
|
border-bottom: 1px solid #3b3b3b;
|
|
}
|
|
|
|
topnav li {
|
|
margin-top: 2.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
topnav a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
topnav .menuentry {
|
|
color:#999;
|
|
text-decoration: none;
|
|
list-style: none;
|
|
}
|
|
|
|
.arrow {
|
|
position: absolute;
|
|
padding-top: 85vh;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.arrow span {
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-bottom: 2px solid #a5a5a5;
|
|
border-right: 2px solid #a5a5a5;
|
|
transform: rotate(45deg);
|
|
margin: -10px;
|
|
animation: animate 2s infinite;
|
|
}
|
|
.arrow span:nth-child(2) {
|
|
animation-delay: -0.2s;
|
|
}
|
|
.arrow span:nth-child(3) {
|
|
animation-delay: -0.4s;
|
|
}
|
|
@keyframes animate {
|
|
0%{
|
|
opacity: 0;
|
|
transform: rotate(45deg) translate(-20px,-20px);
|
|
}
|
|
50%{
|
|
opacity: 1;
|
|
}
|
|
100%{
|
|
opacity: 0;
|
|
transform: rotate(45deg) translate(20px,20px);
|
|
}
|
|
}
|
|
|
|
.mre {
|
|
display: table;
|
|
background-image: linear-gradient( 180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%),url('../images/site/mre_bg.jpg');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.mre-left {
|
|
position: relative;
|
|
width: 50%;
|
|
height: 100%;
|
|
align-items: center;
|
|
z-index: 1;
|
|
display: table-cell;
|
|
display: none;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.mre-right {
|
|
position: relative;
|
|
width: 50%;
|
|
height: 100%;
|
|
background-color: #252a2b;
|
|
z-index: 1;
|
|
color: #ffffff;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.mre-content {
|
|
padding: 20%;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.mre-content h2 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.proteus {
|
|
display: table;
|
|
background-image: linear-gradient( 180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%),url('../images/site/proteus_bg.jpg');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
color: #252a2b;
|
|
width: 100%;
|
|
}
|
|
|
|
.proteus-left {
|
|
position: relative;
|
|
width: 50%;
|
|
height: 100%;
|
|
align-items: center;
|
|
z-index: 1;
|
|
display: table-cell;
|
|
background-color: #a5a5a5;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.proteus-right {
|
|
position: relative;
|
|
width: 50%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
color: #ffffff;
|
|
vertical-align: middle;
|
|
font-weight: bolder;
|
|
display: none;
|
|
}
|
|
|
|
.proteus-left h1 {
|
|
background-color: #33C3F0;
|
|
font-family: 'Work Sans', sans-serif; /* text-shadow: 0px 3px, 3px 0px,3px 3px; */
|
|
font-size: 5rem;
|
|
}
|
|
|
|
.proteus-content {
|
|
padding: 20%;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.blinking {
|
|
/* font-weight: 1300; */
|
|
/* font-size: 2rem; */
|
|
font-size: 10rem;
|
|
background-color: #33C3F0;
|
|
-webkit-animation: 1s blink step-end infinite;
|
|
-moz-animation: 1s blink step-end infinite;
|
|
-ms-animation: 1s blink step-end infinite;
|
|
-o-animation: 1s blink step-end infinite;
|
|
animation: 1s blink step-end infinite;
|
|
}
|
|
|
|
@keyframes "blink" {
|
|
from, to {
|
|
color: transparent;
|
|
}
|
|
50% {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes blink {
|
|
from, to {
|
|
color: transparent;
|
|
}
|
|
50% {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes "blink" {
|
|
from, to {
|
|
color: transparent;
|
|
}
|
|
50% {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes "blink" {
|
|
from, to {
|
|
color: transparent;
|
|
}
|
|
50% {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes "blink" {
|
|
from, to {
|
|
color: transparent;
|
|
}
|
|
50% {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.glossary {
|
|
font-style: italic;
|
|
margin-left: 2rem;
|
|
}
|
|
.footer {
|
|
background-color: #252a2b;
|
|
padding-top: 2rem;
|
|
padding-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer a{
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
/* Larger than phone */
|
|
@media (min-width: 550px) {
|
|
.container {
|
|
overflow-y: visible;
|
|
}
|
|
.nav-container {
|
|
overflow-y: visible;
|
|
}
|
|
.nav-mobile {
|
|
display: block;
|
|
}
|
|
.nav-dropdown {
|
|
position: static;
|
|
}
|
|
nav ul {
|
|
display: none;
|
|
/* position: relative; */
|
|
}
|
|
nav ul li {
|
|
float: none;
|
|
}
|
|
|
|
/* topnav {
|
|
display: none;
|
|
} */
|
|
|
|
.header {
|
|
/* margin-top: 18rem; */
|
|
/* padding-top: 18rem; */
|
|
/* padding-top: 40vh; */
|
|
}
|
|
.value-props {
|
|
margin-top: 9rem;
|
|
margin-bottom: 7rem; }
|
|
.value-img {
|
|
margin-bottom: 1rem; }
|
|
.example-grid .column,
|
|
.example-grid .columns {
|
|
margin-bottom: 1.5rem; }
|
|
.docs-section {
|
|
padding: 6rem 0; }
|
|
.example-send-yourself-copy {
|
|
float: right;
|
|
margin-top: 12px; }
|
|
.example-screenshot-wrapper {
|
|
position: absolute;
|
|
width: 48%;
|
|
height: 100%;
|
|
left: 0;
|
|
max-height: none; }
|
|
}
|
|
|
|
/* Larger than tablet */
|
|
@media (min-width: 1024px) {
|
|
.container {
|
|
overflow-y: visible;
|
|
}
|
|
/* Navbar */
|
|
.nav-container {
|
|
overflow-y: visible;
|
|
}
|
|
.nav-mobile {
|
|
display: none;
|
|
position: fixed;
|
|
}
|
|
.nav-dropdown {
|
|
position: static;
|
|
}
|
|
nav ul {
|
|
display: block;
|
|
/* position: relative; */
|
|
}
|
|
nav ul li {
|
|
float: none;
|
|
}
|
|
.navbar + .docs-section {
|
|
border-top-width: 0; }
|
|
.navbar,
|
|
.navbar-spacer {
|
|
display: block;
|
|
width: 100%;
|
|
height: 5.5rem;
|
|
background: #fff;
|
|
z-index: 99;
|
|
position: absolute;
|
|
/* border-top: 1px solid #eee;
|
|
border-bottom: 1px solid #eee; */
|
|
}
|
|
.navbar-spacer {
|
|
display: none; }
|
|
.navbar > .container {
|
|
width: 80%; }
|
|
.navbar-list {
|
|
list-style: none;
|
|
margin-bottom: 0; }
|
|
.navbar-item {
|
|
position: relative;
|
|
float: left;
|
|
margin-bottom: 0; }
|
|
.navbar-link {
|
|
text-transform: uppercase;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: .2rem;
|
|
margin-right: 35px;
|
|
text-decoration: none;
|
|
line-height: 6.5rem;
|
|
color: #222; }
|
|
.navbar-link.active {
|
|
color: #33C3F0; }
|
|
.has-docked-nav .navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0; }
|
|
.has-docked-nav .navbar-spacer {
|
|
display: block; }
|
|
/* Re-overiding the width 100% declaration to match size of % based container */
|
|
.has-docked-nav .navbar > .container {
|
|
width: 80%; }
|
|
|
|
/* Popover */
|
|
.popover.open {
|
|
display: block;
|
|
white-space: nowrap;
|
|
}
|
|
.popover {
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: #fff;
|
|
/* border: 1px solid #eee; */
|
|
border-radius: 4px;
|
|
top: 92%;
|
|
left: -25%;
|
|
-webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
|
|
-moz-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
|
|
filter: drop-shadow(0 0 6px rgba(0,0,0,.1)); }
|
|
.popover-item:first-child .popover-link:after,
|
|
.popover-item:first-child .popover-link:before {
|
|
bottom: 100%;
|
|
left: 50%;
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none; }
|
|
.popover-item:first-child .popover-link:after {
|
|
border-color: rgba(255, 255, 255, 0);
|
|
border-bottom-color: #fff;
|
|
border-width: 10px;
|
|
margin-left: -10px; }
|
|
.popover-item:first-child .popover-link:before {
|
|
border-color: rgba(238, 238, 238, 0);
|
|
border-bottom-color: #eee;
|
|
border-width: 11px;
|
|
margin-left: -11px; }
|
|
.popover-list {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none; }
|
|
.popover-item {
|
|
padding: 0;
|
|
margin: 0; }
|
|
.popover-link {
|
|
position: relative;
|
|
color: #222;
|
|
display: block;
|
|
padding: 8px 20px;
|
|
border-bottom: 1px solid #eee;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
font-size: 1.0rem;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
letter-spacing: .1rem; }
|
|
.popover-item:first-child .popover-link {
|
|
border-radius: 4px 4px 0 0; }
|
|
.popover-item:last-child .popover-link {
|
|
border-radius: 0 0 4px 4px;
|
|
border-bottom-width: 0; }
|
|
.popover-link:hover {
|
|
color: #fff;
|
|
background: #f15a24; }
|
|
.popover-link:hover,
|
|
.popover-item:first-child .popover-link:hover:after {
|
|
border-bottom-color: #f15a24; }
|
|
.mre-left {
|
|
display: table-cell;
|
|
}
|
|
.proteus-right {
|
|
display: table-cell;
|
|
}
|
|
.proteus-left h1 {
|
|
padding: 1rem;
|
|
font-size: 8rem;
|
|
}
|
|
}
|
|
|
|
|
|
.title,
|
|
.value-props {
|
|
color: rgb(230, 230, 230);
|
|
}
|
|
|
|
#intro,
|
|
#proteus,
|
|
#links {
|
|
background-color: rgb(250, 250, 250);
|
|
}
|
|
|
|
.dl-link {
|
|
/* margin-left: 25rem; */
|
|
float: right;}
|
|
|
|
td.oddrow {
|
|
background-color: rgb(230, 230, 230);
|
|
}
|
|
|
|
td.evenrow {
|
|
background-color: #91919100;
|
|
} |