Updated visuals and expanded website.

static/css/nouislider.css

@@ -104,7 +104,7 @@
   border: 1px solid transparent;
 }
 .noUi-connect {
-  background: #26A69A;
+  background: #a6a6a6;
   -webkit-transition: background 450ms;
   transition: background 450ms;
 }
@@ -308,7 +308,7 @@
   height: 15px;
   border-radius: 50%;
   box-shadow: none;
-  background-color: #26A69A;
+  background-color: #a6a6a6;
   border: none;
   left: -5px;
   top: -6px;
@@ -337,7 +337,7 @@
   width: 30px;
   top: -17px;
   left: -2px;
-  background-color: #26A69A;
+  background-color: #a6a6a6;
   border-radius: 50%;
   transition: border-radius .25s cubic-bezier(0.215, 0.610, 0.355, 1.000),
   transform .25s cubic-bezier(0.215, 0.610, 0.355, 1.000);
@@ -376,7 +376,7 @@
   width: 30px;
   top: -17px;
   left: -2px;
-  background-color: #26A69A;
+  background-color: #a6a6a6;
   border-radius: 50%;
   transition: border-radius .25s cubic-bezier(0.215, 0.610, 0.355, 1.000),
   transform .25s cubic-bezier(0.215, 0.610, 0.355, 1.000);

static/css/style.css

@@ -22,6 +22,11 @@
     transform: scale(1) rotate(-45deg) translate(0px, 4px);
 }
 
+body {
+    font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
+    font-size: 16px;
+}
+
 h4 {
     font-size: 1.8rem;
 }
@@ -110,3 +115,96 @@ td {
 .wider-container {
     width: 80%;
 }
+
+.redcjvt {
+  background-color: #e12a26;
+}
+
+.blackcjvt {
+  background-color: #161616;
+}
+
+input:focus {
+  border-bottom: 1px solid #212121 !important;
+  box-shadow: 0 1px 0 0 #212121 !important;
+}
+
+label.active {
+  color: #212121 !important;
+}
+
+.backgroundcolorcjvt {
+  background-color: #f5f5f5;
+}
+
+.btn:active {
+    background: #393939;
+}
+.btn:hover {
+    background: #212121;
+}
+
+.btn.btn-round {
+    border-radius: 1.5rem;
+}
+
+.btn, .btn-large, .btn-small {
+    display: inline-block;
+    line-height: 3rem;
+    padding: 0 1.5rem;
+    background-color: #161616;
+    color: white;
+    font-weight: 600;
+    margin-top: 1.5rem;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.3s ease-out;
+    font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
+    text-transform: none;
+}
+
+.insidebutton {
+  color: #161616;
+  background-color: #fff;
+  display: inline-block;
+  float: left;
+  line-height: 2.5rem;
+  padding: 0 1rem;
+  border-radius: 2px;
+  border: solid 1px #161616;
+  font-weight: 600;
+  font-size: 0.875rem;
+  margin-right: 1rem;
+  transition: opacity 0.3s ease-out;
+  cursor: pointer;
+  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
+  text-transform: none;
+}
+
+.insidebutton:hover {
+  background-color: #fff;
+}
+
+.switch label .lever {
+   background-color: #e0e0e0;
+}
+.switch label input[type=checkbox]:checked+.lever {
+   background-color: #a6a6a6;
+}
+.switch label input[type=checkbox]:checked+.lever:after {
+   background-color: #737373;
+}
+
+input.valid[type=text]:not(.browser-default) {
+    border-bottom: 1px solid #9e9e9e;
+    box-shadow: none;
+}
+
+input[type=text]:not(.browser-default).validate + label {
+    color: #9e9e9e !important;
+}
+
+[type="checkbox"].filled-in:checked + span:not(.lever):after {
+     border: 2px solid #212121;
+     background-color: #212121;
+}