Add CPA styles

src/styles/main.scss

@@ -78,6 +78,7 @@ body {
   @import "mo-components/hero-title";
 }
 // PAGE STYLES
+@import "pages/cpa";
 @import "pages/petition";
 @import "pages/donate";
 @import "pages/donate_quickpay";

src/styles/mo-utilities/_color-classes.scss

@@ -13,6 +13,9 @@
 .bg-gray {
   background-color: $gray;
 }
+.bg-lighter-gray {
+  background-color: $lighter-gray;
+}
 .bg-light-gray {
   background-color: $light-gray;
 }
@@ -46,6 +49,12 @@
 .bg-light-blue {
   background-color: $light-blue;
 }
+.bg-lapis-blue {
+  background-color: $lapis-blue;
+}
+.bg-pale-blue {
+  background-color: $pale-blue;
+}
 .bg-red {
   background-color: $red;
 }
@@ -67,6 +76,9 @@
 .gray {
   color: $gray;
 }
+.lighter-gray {
+  color: $lighter-gray;
+}
 .light-gray {
   color: $light-gray;
 }
@@ -97,6 +109,12 @@
 .light-blue {
   color: $light-blue;
 }
+.lapis-blue {
+  color: $lapis-blue;
+}
+.pale-blue {
+  color: $pale-blue;
+}
 .red {
   color: $red;
 }

src/styles/pages/_cpa.scss

@@ -0,0 +1,33 @@
+.giraffe {
+  .cpa {
+
+    #unknown_user {
+      background-color: $lighter-gray;
+      padding:27px;
+      .input-block {
+
+        label {
+          font-size: 15px;
+        }
+
+        input {
+          width: 100%;
+          border: 0px;
+          background-color: $white;
+        }
+
+      }
+
+    }
+
+    form #survey-questions label {
+      font-size:25px;
+    }
+    button.btn {
+      background-color: $lapis-blue;
+      @include hover {
+        background-color: $lapis-blue;
+      }
+    }
+  }
+}

src/styles/settings/_colors.scss

@@ -3,6 +3,7 @@ $thin-air: #caf4ff;
 $white: #ffffff;
 $off-white: #f3f3f3;
 $gray: #cacaca;
+$lighter-gray: #eeeeee;
 $light-gray: #a7a7a7;
 $slate-gray: #696a6a;
 $dark-gray: #222222;
@@ -17,7 +18,9 @@ $paypal-blue: #ffc538;
 $paypal-blue-dark: #f5ae27;
 $azure: #00abff;
 $logo-blue: #1298FE;
+$lapis-blue: #296190;
 $light-blue: #99ddff;
+$pale-blue: #e8f4fe;
 $ice-blue: #e5f5ff;
 $red: #ea1c24;
 $muted-red: #c3645c;

src/templates/pages/styleguide/basics.twig

@@ -27,6 +27,7 @@
                             ['#ffffff', '$white'],
                             ['#f3f3f3', '$off-white'],
                             ['#cacaca', '$gray'],
+                            ['#eeeeee', '$lighter-gray'],
                             ['#a7a7a7', '$light-gray'],
                             ['#696a6a', '$slate-gray'],
                             ['rgba(34, 34, 34, 0.38)', '$dark-gray-38'],
@@ -37,7 +38,9 @@
                             ['#005680', '$deep-sea-blue'],
                             ['#0080bf', '$cerulean'],
                             ['#00abff', '$azure'],
+                            ['#296190', '$lapis-blue'],
                             ['#99ddff', '$light-blue'],
+                            ['#e8f4fe', '$pale-blue'],
                             ['#e5f5ff', '$ice-blue'],
                             ['#ea1c24', '$red']
                         ] %}