Merge from git

styles/sass/components/_cookie-banner.scss

@@ -1,27 +1,27 @@
 .app-cookie-banner {
-  @include govuk-font(16);
-  @include govuk-text-colour;
+    box-sizing: border-box;
+    width: 100%;
 
-  box-sizing: border-box;
-  width: 100%;
+    padding-right: govuk-spacing(3);
+    padding-bottom: govuk-spacing(3);
+    padding-left: govuk-spacing(3);
+    background-color: lighten(
+        desaturate(govuk-colour("light-blue"), 8.46),
+        42.55
+    );
+}
 
-  padding-top: govuk-spacing(3);
-  padding-right: govuk-spacing(3);
-  padding-bottom: govuk-spacing(3);
-  padding-left: govuk-spacing(3);
-  background-color: lighten(
-    desaturate(govuk-colour("light-blue"), 8.46),
-    42.55
-  );
+.app-cookie-banner {
+    background-color: transparent;
 }
 
 .app-cookie-banner__message {
-  margin: 0;
-  @include govuk-width-container;
+    margin: 0;
+    @include govuk-width-container;
 }
 
 @include govuk-media-query($media-type: print) {
-  .app-cookie-banner {
-    display: none !important;
-  }
+    .app-cookie-banner {
+        display: none !important;
+    }
 }

styles/sass/patterns/_card.scss

@@ -68,9 +68,9 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
 }
 
 .card {
-    border: 1px solid $govuk-border-colour; //$panel-colour;
+    border: none;
     font-size: 16px;
-    background-color: govuk-colour("light-grey", $legacy: "grey-4");
+    background-color: $lightgrey_offwhite;
 
     &.inactive {
         color: $govuk-secondary-text-colour;
@@ -82,11 +82,32 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
 
     .card-body {
         //border-bottom: 1px solid $govuk-border-colour; //$panel-colour;
-        padding: 12px;
+        padding: 40px 20px;
 
         *:last-child {
             margin-bottom: 0;
         }
+        a,
+        a:active,
+        a:visited {
+            color: $blue;
+            font-weight: bold;
+            &:hover {
+                color: $lightblue;
+            }
+            &.govuk-button {
+                color: $white;
+                &:focus {
+                    color: $black;
+                    background-image: url(https://gov.wales/themes/custom/govwales/storage/smartsurvey/arrow-right--black.svg);
+                }
+            }
+        }
+
+        a:focus {
+            border: $yellow solid 3px;
+            outline: 3px solid transparent;
+        }
 
         &.active {
             background-color: govuk-colour("light-grey", $legacy: "grey-4");
@@ -210,9 +231,9 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
     }
 }
 
-.card-body {
-    width: 93%;
-}
+// .card-body {
+//     width: 93%;
+// }
 
 div.cardModuleItem:last-of-type {
     margin-bottom: 20px !important;

styles/sass/styles.scss

@@ -3,6 +3,7 @@
 // Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you
 @import "welshgov/_variables";
 @import "welshgov/_application";
+@import "welshgov/_application_errors";
 // @import "welshgov/application_old";
 
 // global styles for <a> and <p> tags

styles/sass/welshgov/_application_errors.scss

@@ -0,0 +1,28 @@
+.govuk-error-message.govuk-form-group--error-summary {
+    background: $whitered;
+    border-left: 10px solid $red;
+    font-size: 18px;
+    color: $black;
+    font-weight: normal;
+    padding: 20px;
+
+    .govuk-error-exclamation {
+        background-image: url(/assets/images/exclamation.svg);
+        background-repeat: no-repeat;
+        padding-left: 46px;
+        display: block;
+        padding-top: 2px;
+        background-position: left center;
+    }
+}
+
+.govuk-error-message.govuk-form-group--error {
+    background: $whitered;
+    border-left: 3px solid $red;
+    font-size: 18px;
+    color: $black;
+    font-weight: normal;
+    padding: 20px;
+    margin-top: 20px;
+    max-width: 41ex;
+}

styles/sass/welshgov/_variables.scss

@@ -9,3 +9,45 @@ $lightgrey_mid: #dddddd;
 $lightgrey_semi: #e5e5e5;
 $lightgrey_light: #eeeeee;
 $lightgrey_offwhite: #f1f1f1;
+
+$darkgrey: #666666;
+$midgrey: #999999;
+$lightgrey: #b5b5b5;
+
+$black: #1f1f1f;
+$charcoal: #323232;
+
+$lightgrey_dark: #cccccc;
+$lightgrey_mid: #dddddd;
+$lightgrey_semi: #e5e5e5;
+$lightgrey_light: #eeeeee;
+$lightgrey_offwhite: #f1f1f1;
+
+$darkred: #7e0a0e;
+$red: #aa1111;
+$brightred: #d81f1f;
+$darkpalered: #d87777;
+$palered: #fea8a9;
+$whitered: #ffe4e5;
+
+$darkblue: #1f446d;
+$blue: #0360a6;
+$lightblue: #3b7dc5;
+$brightblue: #4c93ff;
+$paleblue: #99ccff;
+$whiteblue: #c2e0fc;
+
+$darkgreen: #3b510d;
+$green: #019e1e;
+$lightgreen: #01b723;
+$whitegreen: #cdf7d4;
+
+$darkpurple: #772cfe;
+$plum: #632a5d;
+$purple: #a82b71;
+
+$orange: #ff8000;
+$paleorange: #ffdab5;
+
+$yellow: #ffd530;
+$paleyellow: #fff5ce;