552 lines
7.7 KiB
Plaintext
552 lines
7.7 KiB
Plaintext
// VARIABLES
|
|
|
|
|
|
// 1. Variables
|
|
|
|
@color--primary:#5C99F6;
|
|
@color--primary-1:#5C9AF7;
|
|
@color--primary-2:#F4A606;
|
|
@color--primary-3:#46CDAB;
|
|
@color--primary-4:#5C9AF7;
|
|
|
|
@color--white:#FCFCFC;
|
|
@color--white-1:#F9F9F9;
|
|
|
|
@onDark:#ffffff;
|
|
@transition--speed:200ms;
|
|
|
|
// Typography
|
|
|
|
h2{
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
color: #383838;
|
|
letter-spacing: -0.23px;
|
|
}
|
|
h4{
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
color: #4D80CF;
|
|
letter-spacing: -0.7px;
|
|
}
|
|
// FONT
|
|
|
|
.text--default{
|
|
|
|
font-family: "Open Sans";
|
|
font-weight: 300;
|
|
font-size: 14px;
|
|
color: #383838;
|
|
letter-spacing: -0.06px;
|
|
}
|
|
.text--bold{
|
|
font-weight:700 !important;
|
|
}
|
|
.text--tiny{
|
|
|
|
font-size: 9px;
|
|
color: #D2D2D2;
|
|
letter-spacing: -0.23px;
|
|
}
|
|
.text--uppercase{
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
color: #FFFFFF;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
|
|
// MISC
|
|
|
|
hr{
|
|
width: 70%;
|
|
|
|
border-top:1px solid #F8F8F8;
|
|
}
|
|
|
|
.logo{
|
|
|
|
width: 220px;
|
|
height: 25px;
|
|
cursor: pointer;
|
|
background: url('../images/logo.svg');
|
|
background-repeat: no-repeat;
|
|
display: block;
|
|
-webkit-transition: all @transition--speed ease-out;
|
|
-moz-transition: all @transition--speed ease-out;
|
|
-ms-transition: all @transition--speed ease-out;
|
|
-o-transition: all @transition--speed ease-out;
|
|
transition: all @transition--speed ease-out
|
|
}
|
|
.logo:hover{
|
|
|
|
transform:scale(1.1);
|
|
|
|
}
|
|
|
|
.lazy-form{
|
|
|
|
label{
|
|
opacity:.6 !important;
|
|
-webkit-transition: all @transition--speed ease-out;
|
|
-moz-transition: all @transition--speed ease-out;
|
|
-ms-transition: all @transition--speed ease-out;
|
|
-o-transition: all @transition--speed ease-out;
|
|
transition: all @transition--speed ease-out
|
|
}
|
|
|
|
}
|
|
|
|
.lazy-form:hover{
|
|
label{
|
|
opacity:1 !important;
|
|
}
|
|
}
|
|
|
|
input[type=text]{
|
|
background: #FAFAFA;
|
|
border: 1px solid #F4F4F4;
|
|
border-radius: 3px;
|
|
display: block;
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
label{
|
|
display: block;
|
|
font-weight: 100;
|
|
color: #383838;
|
|
letter-spacing: -0.03px;
|
|
}
|
|
.radio-group {
|
|
text-align: center;
|
|
|
|
label{
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
display: inline;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
|
|
}
|
|
input[type=radio]{
|
|
|
|
|
|
}
|
|
}
|
|
|
|
table{
|
|
color:#5D5A5A !important;
|
|
thead{
|
|
background: @color--primary;
|
|
color: white;
|
|
font-weight: normal !important;
|
|
height:50px;
|
|
vertical-align: center !important;
|
|
th{
|
|
padding: 15px !important;
|
|
text-align: left;
|
|
}
|
|
}
|
|
td{
|
|
height: 50px;
|
|
vertical-align: center !important;
|
|
font-weight: bold;
|
|
padding: 10px 15px !important;
|
|
border-top: 0px solid #fff !important;
|
|
}
|
|
}
|
|
|
|
table.sell{
|
|
td{
|
|
font-weight: bold;
|
|
background: #EEFFEE !important;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
table.buy{
|
|
td{ font-weight: bold;
|
|
background: #FFF3F3 !important;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
// BUTTON
|
|
.btn--primary-2{
|
|
|
|
background: @color--primary-2 !important;
|
|
box-shadow: 0 4px 0 0 #CC8A00 !important;
|
|
|
|
}
|
|
.btn--primary-1{
|
|
|
|
background: @color--primary-1 !important;
|
|
box-shadow: 0 4px 0 0 #4987E4 !important;
|
|
|
|
}
|
|
|
|
.btn--primary-3{
|
|
|
|
background: @color--primary-3 !important;
|
|
box-shadow: 0 4px 0 0 #29A586 !important;
|
|
|
|
}
|
|
|
|
.btn-white{
|
|
color: white;
|
|
}
|
|
.btn-white:hover{
|
|
color:white;
|
|
}
|
|
.btn{
|
|
|
|
box-shadow: 0 4px 0 0 ;
|
|
border-radius: 5px;
|
|
height: 45px;
|
|
width: 100%;
|
|
display: block;
|
|
font-weight: bold;
|
|
padding-top: 10px;
|
|
|
|
}
|
|
|
|
.btn.btn--facebook{
|
|
|
|
background: #FFFFFF;
|
|
box-shadow: 5px 5px 0 0 #3b5998;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #3b5998;
|
|
letter-spacing: -0.3px;
|
|
border-radius: 0px;
|
|
width: 360px;
|
|
display: inline-block;
|
|
padding-top: 9px;
|
|
|
|
}
|
|
.btn.btn--facebook-2{
|
|
display: block;
|
|
background: #3b5998;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
letter-spacing: -0.3px;
|
|
border-radius: 0px;
|
|
width: 320px;
|
|
|
|
margin: 0 auto;
|
|
}
|
|
.modal-content {
|
|
|
|
border-radius: 2px !important;
|
|
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 15px;
|
|
border-bottom: 0px solid #e5e5e5;
|
|
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 15px;
|
|
text-align: right;
|
|
border-top: 0px solid #e5e5e5;
|
|
}
|
|
|
|
|
|
// Radius
|
|
|
|
.radius--0{
|
|
|
|
border-radius: 0px;
|
|
}
|
|
// MARGIN
|
|
.mmt--15{
|
|
margin-top: -15px !important;
|
|
}
|
|
.mt--1{
|
|
margin-top: 10px !important;
|
|
}
|
|
.mt--2{
|
|
margin-top: 20px !important;
|
|
}
|
|
.mt--3{
|
|
margin-top: 30px !important;
|
|
}
|
|
.mt--4{
|
|
margin-top: 40px !important;
|
|
}
|
|
.mt--5{
|
|
margin-top: 50px !important;
|
|
}
|
|
.mt--6{
|
|
margin-top: 60px !important;
|
|
}
|
|
.mt--7{
|
|
margin-top: 70px !important;
|
|
}
|
|
.mt--8{
|
|
margin-top: 80px !important;
|
|
}
|
|
.mt--9{
|
|
margin-top: 90px !important;
|
|
}
|
|
.mt--10{
|
|
margin-top: 100px !important;
|
|
}
|
|
.mb--1{
|
|
margin-bottom: 10px !important;
|
|
}
|
|
.mb--2{
|
|
margin-bottom: 20px !important;
|
|
}
|
|
.mb--3{
|
|
margin-bottom: 30px !important;
|
|
}
|
|
.mb--4{
|
|
margin-bottom: 40px !important;
|
|
}
|
|
.mb--5{
|
|
margin-bottom: 50px !important;
|
|
}
|
|
.mb--6{
|
|
margin-bottom: 60px !important;
|
|
}
|
|
.mb--7{
|
|
margin-bottom: 70px !important;
|
|
}
|
|
.mb--8{
|
|
margin-bottom: 80px !important;
|
|
}
|
|
.mb--9{
|
|
margin-bottom: 90px !important;
|
|
}
|
|
.mb--10{
|
|
margin-bottom: 100px !important;
|
|
}
|
|
.m--1{
|
|
margin: 10px !important;
|
|
}
|
|
.m--2{
|
|
margin: 20px !important;
|
|
}
|
|
.m--3{
|
|
margin: 30px !important;
|
|
}
|
|
.m--4{
|
|
margin: 40px !important;
|
|
}
|
|
.m--5{
|
|
margin: 50px !important;
|
|
}
|
|
.m--6{
|
|
margin: 60px !important;
|
|
}
|
|
.m--7{
|
|
margin: 70px !important;
|
|
}
|
|
.m--8{
|
|
margin: 80px !important;
|
|
}
|
|
.m--9{
|
|
margin: 90px !important;
|
|
}
|
|
.m--10{
|
|
margin: 100px !important;
|
|
}
|
|
|
|
// PADDING
|
|
|
|
|
|
.pt--1{
|
|
padding-top: 10px !important;
|
|
}
|
|
.pt--2{
|
|
padding-top: 20px !important;
|
|
}
|
|
.pt--3{
|
|
padding-top: 30px !important;
|
|
}
|
|
.pt--4{
|
|
padding-top: 40px !important;
|
|
}
|
|
.pt--5{
|
|
padding-top: 50px !important;
|
|
}
|
|
.pt--6{
|
|
padding-top: 60px !important;
|
|
}
|
|
.pt--7{
|
|
padding-top: 70px !important;
|
|
}
|
|
.pt--8{
|
|
padding-top: 80px !important;
|
|
}
|
|
.pt--9{
|
|
padding-top: 90px !important;
|
|
}
|
|
.pt--10{
|
|
padding-top: 100px !important;
|
|
}
|
|
.pb--1{
|
|
padding-bottom: 10px !important;
|
|
}
|
|
.pb--2{
|
|
padding-bottom: 20px !important;
|
|
}
|
|
.pb--3{
|
|
padding-bottom: 30px !important;
|
|
}
|
|
.pb--4{
|
|
padding-bottom: 40px !important;
|
|
}
|
|
.pb--5{
|
|
padding-bottom: 50px !important;
|
|
}
|
|
.pb--6{
|
|
padding-bottom: 60px !important;
|
|
}
|
|
.pb--7{
|
|
padding-bottom: 70px !important;
|
|
}
|
|
.pb--8{
|
|
padding-bottom: 80px !important;
|
|
}
|
|
.pb--9{
|
|
padding-bottom: 90px !important;
|
|
}
|
|
.pb--10{
|
|
padding-bottom: 100px !important;
|
|
}
|
|
|
|
.p--1{
|
|
padding: 10px !important;
|
|
}
|
|
.p--2{
|
|
padding: 20px !important;
|
|
}
|
|
.p--3{
|
|
padding: 30px !important;
|
|
}
|
|
.p--4{
|
|
padding: 40px !important;
|
|
}
|
|
.p--5{
|
|
padding: 50px !important;
|
|
}
|
|
.p--6{
|
|
padding: 60px !important;
|
|
}
|
|
.p--7{
|
|
padding: 70px !important;
|
|
}
|
|
.p--8{
|
|
padding: 80px !important;
|
|
}
|
|
.p--9{
|
|
padding: 90px !important;
|
|
}
|
|
.p--10{
|
|
padding: 100px !important;
|
|
}
|
|
|
|
// BACKGROUND
|
|
|
|
.background--primary{
|
|
background: @color--primary;
|
|
color: @onDark !important;
|
|
}
|
|
.background--primary-1{
|
|
background: @color--primary-1;
|
|
color: @onDark !important;
|
|
}
|
|
.background--primary-2{
|
|
background: @color--primary-2;
|
|
color: @onDark !important;
|
|
}
|
|
.background--primary-3{
|
|
background: @color--primary-3;
|
|
color: @onDark !important;
|
|
}
|
|
.background--primary-4{
|
|
background: @color--primary-4;
|
|
color: @onDark !important;
|
|
}
|
|
.background-white{
|
|
background: @color--white !important;
|
|
|
|
}
|
|
.background-white-1{
|
|
background: @color--white-1 !important;
|
|
|
|
}
|
|
|
|
// BOX
|
|
|
|
.box{
|
|
background: #FFFFFF;
|
|
box-shadow: 0 2px 10px 0 #E5E5E5;
|
|
overflow: hidden;
|
|
display: block;
|
|
-webkit-transition: all @transition--speed ease-out;
|
|
-moz-transition: all @transition--speed ease-out;
|
|
-ms-transition: all @transition--speed ease-out;
|
|
-o-transition: all @transition--speed ease-out;
|
|
transition: all @transition--speed ease-out;
|
|
}
|
|
.box:hover{
|
|
|
|
box-shadow: 0 2px 50px 0 #E5E5E5;
|
|
}
|
|
|
|
// MEDIA QUERY
|
|
|
|
|
|
@media screen and (max-width: 768px){
|
|
.container-fluid{
|
|
padding: 0px;
|
|
}
|
|
.container{
|
|
padding: 0px;
|
|
}
|
|
.btn.btn--facebook{
|
|
|
|
/* Rectangle 16: */
|
|
background: #FFFFFF;
|
|
box-shadow: 5px 5px 0 0 #3b5998 ;
|
|
font-size: 12px;
|
|
padding-top:12px;
|
|
font-weight: bold;
|
|
color: #3b5998;
|
|
letter-spacing: -0.3px;
|
|
border-radius: 0px;
|
|
width: 100%;
|
|
// padding-top: 10px;
|
|
display: block;
|
|
}
|
|
.logo{
|
|
margin:0 auto;
|
|
}
|
|
.mt--1-m{
|
|
|
|
margin-top: 20px;
|
|
}
|
|
.text--center--mobile{
|
|
text-align: center;
|
|
font-size: 18px;
|
|
|
|
h6{
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
label{
|
|
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
|