mirror of
https://github.com/BeamMP/BeamMP-Website.git
synced 2026-02-16 10:40:51 +00:00
632 lines
12 KiB
CSS
632 lines
12 KiB
CSS
/* --------- NAVBAR // GLOBAL --------- */
|
|
|
|
* {
|
|
font-family: "Fira Sans", "Helvetica", Arial, sans-serif, serif;
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.container {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.mobile-container {
|
|
width: 250px;
|
|
max-width: 480px;
|
|
margin: auto;
|
|
background-color: rgb(236, 188, 132);
|
|
max-height: 500px;
|
|
color: white;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/*.topnav {*/
|
|
/* overflow: hidden;*/
|
|
/* position: relative;*/
|
|
/*}*/
|
|
|
|
/*.topnav #links {*/
|
|
/* display: none;*/
|
|
/*}*/
|
|
|
|
/*.topnav a {*/
|
|
/* color: white;*/
|
|
/* padding: 14px 16px;*/
|
|
/* text-decoration: none;*/
|
|
/* font-size: 17px;*/
|
|
/* display: hidden;*/
|
|
/*}*/
|
|
|
|
/*.topnav a.icon {*/
|
|
/* display: hidden;*/
|
|
/* position: absolute;*/
|
|
/* right: 0;*/
|
|
/* top: 0;*/
|
|
/*}*/
|
|
|
|
.nav {
|
|
position: fixed;
|
|
z-index: 100;
|
|
height: 80px;
|
|
font-weight: 400px;
|
|
overflow: visable;
|
|
background-color: rgb(236, 188, 132);
|
|
width: 100%;
|
|
line-height: 1;
|
|
transition: box-shadow .2s ease;
|
|
}
|
|
|
|
.nav .links{
|
|
display: flex;
|
|
height: 100%;
|
|
float: right;
|
|
}
|
|
|
|
.nav a {
|
|
color: #161923;
|
|
text-decoration: none;
|
|
transition: background-color .2s ease;
|
|
}
|
|
|
|
.nav .links li {
|
|
height: 100%;
|
|
padding-top: 20px;
|
|
list-style: none;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* li{
|
|
display: list-item;
|
|
text-align: -webkit-match-parent;
|
|
padding: 10px;
|
|
} */
|
|
|
|
nav li {
|
|
display: list-item;
|
|
text-align: -webkit-match-parent;
|
|
margin-block-start: 1em;
|
|
margin-block-end: 1em;
|
|
margin-inline-start: 0px;
|
|
margin-inline-end: 0px;
|
|
padding-inline-start: 40px;
|
|
}
|
|
|
|
.logo-link {
|
|
display: flex;
|
|
height: 100%;
|
|
margin-left: -15px;
|
|
padding: 20px 15px;
|
|
align-items: center;
|
|
align-content: center;
|
|
}
|
|
|
|
.topnav {
|
|
display: none;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.topnav #burger-links {
|
|
display: hidden;
|
|
}
|
|
|
|
.topnav a {
|
|
padding: 14px 16px;
|
|
text-decoration: none;
|
|
font-size: 17px;
|
|
display: hidden;
|
|
}
|
|
|
|
.topnav a.icon {
|
|
display: hidden;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 20px;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.logo-image {
|
|
width: 200px;
|
|
height: 200px;
|
|
/*border-radius: 50%;*/
|
|
margin-top: -57px;
|
|
}
|
|
|
|
.burger-menu {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (max-width: 990px) {
|
|
.navbar-links {
|
|
display: none;
|
|
}
|
|
|
|
.burger-menu {
|
|
display: block;
|
|
margin-top: 25px;
|
|
float: right;
|
|
}
|
|
/*.topnav {*/
|
|
/* display: block;*/
|
|
/* overflow: hidden;*/
|
|
/* position: relative;*/
|
|
/*}*/
|
|
|
|
/*.topnav #myLinks {*/
|
|
/* display: hidden;*/
|
|
/*}*/
|
|
|
|
/*.topnav a {*/
|
|
/* padding: 14px 16px;*/
|
|
/* text-decoration: none;*/
|
|
/* font-size: 17px;*/
|
|
/* display: block;*/
|
|
/*}*/
|
|
|
|
/*.topnav a.icon {*/
|
|
/* display: block;*/
|
|
/* position: absolute;*/
|
|
/* right: 0;*/
|
|
/* top: 0;*/
|
|
/*}*/
|
|
}
|
|
|
|
@media screen and (max-width: 575px) {
|
|
.burger-menu {
|
|
display: block;
|
|
margin-top: -25px;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 360px) {
|
|
.burger-menu {
|
|
display: block;
|
|
margin-top: -43%;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 411px) {
|
|
.burger-menu {
|
|
display: block;
|
|
margin-top: -38%;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 320px) {
|
|
.burger-menu {
|
|
display: block;
|
|
margin-top: -50%;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 375px) {
|
|
.burger-menu {
|
|
display: block;
|
|
margin-top: -42%;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 414px) {
|
|
.burger-menu {
|
|
display: block;
|
|
margin-top: -37%;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 375px) {
|
|
.burger-menu {
|
|
display: block;
|
|
margin-top: -41%;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.text {
|
|
display: none;
|
|
}
|
|
|
|
.logo-link {
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
align-content: center;
|
|
}
|
|
|
|
.logo-text {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
|
|
/* ----------- IMAGE AND DOWNLOAD ----------- */
|
|
|
|
.main-content {
|
|
display: flex;
|
|
position: relative;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: calc(100vh - 80px);
|
|
overflow: hidden;
|
|
background: linear-gradient(-45deg, rgba(22, 25, 35, 0.35) 0%, rgba(22, 25, 35, 0.95) 100%) center center/100%, url(../img/beamng-mp-landing.png) center top/cover;
|
|
color: #fefee1;
|
|
}
|
|
|
|
.main-content .introduction {
|
|
width: 100%;
|
|
position: absolute;
|
|
transition: transform .2s ease;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
p {
|
|
display: block;
|
|
margin-block-start: 1em;
|
|
margin-block-end: 1em;
|
|
margin-inline-start: 0px;
|
|
margin-inline-end: 0px;
|
|
color: #c8cdbb;
|
|
}
|
|
|
|
.main-content .lead {
|
|
font-size: 30px;
|
|
font-weight: 300;
|
|
font-family: verdana;
|
|
}
|
|
|
|
.middle-xs {
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.center-xs {
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.main-content .buttons-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
align-content: flex-end;
|
|
}
|
|
|
|
.main-content .buttons-wrapper .buttons .download-client {
|
|
display: block;
|
|
position: relative;
|
|
padding: 15px 25px 15px 25px;
|
|
cursor: pointer;
|
|
color: #fefee1;
|
|
border: none;
|
|
text-shadow: 0 0 1px rgba(22, 25, 35, 0.5);
|
|
background: radial-gradient(circle, rgba(150, 204, 0, 0.8), rgba(150, 204, 0, 0.65)) center/100%;
|
|
transition: box-shadow .2s ease;
|
|
font-size: 27px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
border-radius: 3px;
|
|
text-decoration: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
min-width: 260px;
|
|
}
|
|
|
|
.description {
|
|
display: block;
|
|
font-size: 12px;
|
|
font-weight: 200;
|
|
opacity: .9;
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
#button {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* --------- Features ---------*/
|
|
|
|
.features article.col-lg-3 {
|
|
padding: 0 35px;
|
|
}
|
|
|
|
.features article {
|
|
margin-top: 50px;
|
|
font-size: 15px;
|
|
color: #c8cdbb;
|
|
}
|
|
|
|
section {
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
/* @media only screen and {min-width: 75em}
|
|
.col-lg-3 {
|
|
-ms-flex-preferred-size: 25%;
|
|
flex-basis: 25%;
|
|
max-width: 25%;
|
|
}
|
|
@media only screen and {min-width: 75em}
|
|
.col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-offset-0, .col-lg-offset-1, .col-lg-offset-2, .col-lg-offset-3, .col-lg-offset-4, .col-lg-offset-5, .col-lg-offset-6, .col-lg-offset-7, .col-lg-offset-8, .col-lg-offset-9, .col-lg-offset-10, .col-lg-offset-11, .col-lg-offset-12 {
|
|
box-sizing: border-box;
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
padding-right: 0.5rem;
|
|
padding-left: 0.5rem;
|
|
}
|
|
@media only screen and {min-width: 64em}
|
|
.col-md-6 {
|
|
-ms-flex-preferred-size: 50%;
|
|
flex-basis: 50%;
|
|
max-width: 50%;
|
|
}
|
|
@media only screen and {min-width: 64em}
|
|
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-offset-0, .col-md-offset-1, .col-md-offset-2, .col-md-offset-3, .col-md-offset-4, .col-md-offset-5, .col-md-offset-6, .col-md-offset-7, .col-md-offset-8, .col-md-offset-9, .col-md-offset-10, .col-md-offset-11, .col-md-offset-12 {
|
|
box-sizing: border-box;
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
padding-right: 0.5rem;
|
|
padding-left: 0.5rem;
|
|
}
|
|
@media only screen and {min-width: 48em}
|
|
.col-sm-6 {
|
|
-ms-flex-preferred-size: 50%;
|
|
flex-basis: 50%;
|
|
max-width: 50%;
|
|
}
|
|
@media only screen and {min-width: 48em}
|
|
.col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-offset-0, .col-sm-offset-1, .col-sm-offset-2, .col-sm-offset-3, .col-sm-offset-4, .col-sm-offset-5, .col-sm-offset-6, .col-sm-offset-7, .col-sm-offset-8, .col-sm-offset-9, .col-sm-offset-10, .col-sm-offset-11, .col-sm-offset-12 {
|
|
box-sizing: border-box;
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
padding-right: 0.5rem;
|
|
padding-left: 0.5rem;
|
|
} */
|
|
|
|
/* #features {
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
color: #fefee1;
|
|
background-color: #161923;
|
|
} */
|
|
|
|
body {
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
color: #fefee1;
|
|
background-color: #161923 !important;
|
|
}
|
|
|
|
|
|
/* --------- Bridge ---------- */
|
|
|
|
.container-fluid, .container {
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
hr {
|
|
margin-top: 50px;
|
|
border-top: 1px solid rgba(250, 255, 225, 0.15);
|
|
}
|
|
|
|
|
|
figure {
|
|
max-width: 100%;
|
|
}
|
|
|
|
img {
|
|
margin-left: 40%;
|
|
width: 572px;
|
|
height: 332px;
|
|
}
|
|
|
|
figure img {
|
|
max-width: 100%;
|
|
border-radius: 3px;
|
|
filter: contrast(0.75);
|
|
transition: filter .2s ease;
|
|
width: 572px;
|
|
height: 332px;
|
|
}
|
|
|
|
figure {
|
|
display: block;
|
|
margin-block-start: 1em;
|
|
margin-block-end: 1em;
|
|
margin-inline-start: 40px;
|
|
margin-inline-end: 40px;
|
|
}
|
|
|
|
@media only screen and (min-width: 75em)
|
|
.middle-lg {
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@media screen and (max-width: 600px) { /* Phones */
|
|
figure img {
|
|
width: 336px;
|
|
height: 189px;
|
|
}
|
|
|
|
img {
|
|
margin-left: 6%;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 768px) { /* Ipad */
|
|
img {
|
|
margin-left: 10%;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 1024px) { /* Ipad Pro */
|
|
img {
|
|
margin-left: 6%;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 1444px) { /* Responsive help */
|
|
img {
|
|
margin-left: 6%;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
@media only screen and (min-width: 75em)
|
|
.col-lg-6 {
|
|
-ms-flex-preferred-size: 50%;
|
|
flex-basis: 50%;
|
|
max-width: 50%;
|
|
}
|
|
|
|
.user-features-list {
|
|
display: inline-block;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
@media screen and (max-width: 500px) {
|
|
.user-features-list {
|
|
display: inline-block;
|
|
margin-top: 50px;
|
|
padding-left: 50px;
|
|
}
|
|
}
|
|
|
|
.user-features-list li {
|
|
text-align: left;
|
|
font-size: 30px;
|
|
font-weight: 200;
|
|
}
|
|
|
|
section ul li {
|
|
margin-bottom: 9.80392px;
|
|
color: #c8cdbb;
|
|
}
|
|
|
|
|
|
/* --------- FAQ ---------- */
|
|
|
|
#faq h1 {
|
|
text-align: center;
|
|
margin-top: 50px;
|
|
font-size: 40px;
|
|
font-weight: 100;
|
|
line-height: 1;
|
|
color: #fefee1;
|
|
}
|
|
|
|
.faq h3 {
|
|
position: relative;
|
|
margin: 25px 0 0 0;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
color: #fefee1;
|
|
}
|
|
|
|
h3 {
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* -------- FOOTER -------- */
|
|
|
|
footer {
|
|
min-height: 150px;
|
|
background-color: #403F4C;
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.text-white {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.row {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* .row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-right: -15px;
|
|
margin-left: -15px;
|
|
} */
|
|
|
|
.text-right {
|
|
text-align: right !important;
|
|
}
|
|
|
|
.list-inline {
|
|
padding-left: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.py-5 {
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-right: -15px;
|
|
margin-left: -15px;
|
|
}
|
|
|
|
footer .container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
footer .row {
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.row i {
|
|
font-size: 22px;
|
|
margin: 0 3px;
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.container {
|
|
width: 100%;
|
|
}
|
|
|
|
footer .container {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
|