applied variables and buttons styles

styles/sass/patterns/_card.scss

@@ -1,210 +1,210 @@
 .flex-container {
-  display: flex;
-  flex-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .card {
-  flex-grow: 0;
-  flex-basis: 100%;
-  margin-bottom: 2em;
+    flex-grow: 0;
+    flex-basis: 100%;
+    margin-bottom: 2em;
 }
 
 @media screen and (min-width: 600px) and (max-width: 900px) {
-  .card {
-    flex-basis: 45.99%;
-    // Every card in the first row needs horizontal margin
-    &:nth-child(2n-1) {
-      margin-right: 3%;
-    }
-    // Every card in the second row needs horizontal margin
-    &:nth-child(2n-2) {
-      margin-left: 3%;
-    }
+    .card {
+        flex-basis: 45.99%;
+        // Every card in the first row needs horizontal margin
+        &:nth-child(2n-1) {
+            margin-right: 3%;
+        }
+        // Every card in the second row needs horizontal margin
+        &:nth-child(2n-2) {
+            margin-left: 3%;
+        }
 
-    &.card-3 {
-      flex-basis: 44%;
-      min-height: 300px;
+        &.card-3 {
+            flex-basis: 44%;
+            min-height: 300px;
 
-      // &:nth-child(3n-1) {
-      //   margin-left: 3%;
-      //   margin-right: 3%;
-      // }
+            // &:nth-child(3n-1) {
+            //   margin-left: 3%;
+            //   margin-right: 3%;
+            // }
+        }
     }
-  }
 }
 
 @media screen and (min-width: 900px) {
-  .card {
-    flex-basis: 46%;
+    .card {
+        flex-basis: 48.2%;
 
-    &:nth-child(2n-2) {
-      margin-left: 3%;
+        &:nth-child(2n-2) {
+            margin-left: 3%;
+        }
+        &.card-3 {
+            flex-basis: 31%;
+            min-height: 300px;
+
+            &:nth-child(2n-2) {
+                margin-left: 0%;
+            }
+
+            &:nth-child(3n-1) {
+                margin-left: 3%;
+                margin-right: 3%;
+            }
+        }
     }
-    &.card-3 {
-      flex-basis: 31%;
-      min-height: 300px;
-
-      &:nth-child(2n-2) {
-        margin-left: 0%;
-      }
-
-      &:nth-child(3n-1) {
-        margin-left: 3%;
-        margin-right: 3%;
-      }
-    }
-  }
 }
 
 html[data-useragent*="MSIE 10.0"] .flex-container {
-  .card {
-    flex-basis: 46%;
-    margin: 3%;
+    .card {
+        flex-basis: 46%;
+        margin: 3%;
 
-    &.card-3 {
-      flex-basis: 31%;
+        &.card-3 {
+            flex-basis: 31%;
+        }
     }
-  }
 }
 
 .card {
-  border: 1px solid $govuk-border-colour; //$panel-colour;
-  font-size: 16px;
-  background-color: govuk-colour("light-grey", $legacy: "grey-4");
+    border: 1px solid $govuk-border-colour; //$panel-colour;
+    font-size: 16px;
+    background-color: govuk-colour("light-grey", $legacy: "grey-4");
 
-  &.inactive {
-    color: $govuk-secondary-text-colour;
-  }
-
-  .card-heading {
-    margin-top: 0;
-  }
-
-  .card-body {
-    //border-bottom: 1px solid $govuk-border-colour; //$panel-colour;
-    padding: 12px;
-
-    *:last-child {
-      margin-bottom: 0;
+    &.inactive {
+        color: $govuk-secondary-text-colour;
     }
 
-    &.active {
-      background-color: govuk-colour("light-grey", $legacy: "grey-4");
-      transition: 0.1s ease-in-out;
-
-      .card-heading a {
-        color: $govuk-link-colour;
+    .card-heading {
         margin-top: 0;
-        &:focus {
-          color: govuk-colour("black", $legacy: "black");
-          outline: 3px solid transparent;
-          box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+    }
+
+    .card-body {
+        //border-bottom: 1px solid $govuk-border-colour; //$panel-colour;
+        padding: 12px;
+
+        *:last-child {
+            margin-bottom: 0;
         }
-      }
-    }
 
-    .detail-large {
-      color: $govuk-secondary-text-colour;
-      font-size: 32px;
-      font-weight: 600;
-      margin-bottom: 8px;
-    }
+        &.active {
+            background-color: govuk-colour("light-grey", $legacy: "grey-4");
+            transition: 0.1s ease-in-out;
 
-    .detail {
-      font-weight: 600;
-      margin-bottom: 8px;
-    }
-  }
-
-  .card-action {
-    border-top: 0;
-    padding: 12px;
-
-    a {
-      display: inline;
-      border-bottom: 1px solid #c7dceb;
-      color: $govuk-link-colour;
-      line-height: 1.5em;
-
-      &:link,
-      &:visited {
-        color: $govuk-link-colour;
-      }
-
-      &:hover {
-        text-decoration: none;
-        border-bottom: 1px solid $govuk-link-colour;
-        color: #2e8aca;
-      }
-
-      &:focus {
-        color: govuk-colour("black", $legacy: "black");
-        outline: 3px solid transparent;
-        box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
-      }
-    }
-
-    ul {
-      margin: 0;
-
-      li {
-        margin: 0 0 1em;
-
-        &:last-child {
-          margin-bottom: 0;
+            .card-heading a {
+                color: $govuk-link-colour;
+                margin-top: 0;
+                &:focus {
+                    color: govuk-colour("black", $legacy: "black");
+                    outline: 3px solid transparent;
+                    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+                }
+            }
+        }
+
+        .detail-large {
+            color: $govuk-secondary-text-colour;
+            font-size: 32px;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+
+        .detail {
+            font-weight: 600;
+            margin-bottom: 8px;
         }
-      }
     }
-  }
-  &.clear {
-    background-color: govuk-colour("white", $legacy: "white");
-    border: none;
-  }
+
+    .card-action {
+        border-top: 0;
+        padding: 12px;
+
+        a {
+            display: inline;
+            border-bottom: 1px solid #c7dceb;
+            color: $govuk-link-colour;
+            line-height: 1.5em;
+
+            &:link,
+            &:visited {
+                color: $govuk-link-colour;
+            }
+
+            &:hover {
+                text-decoration: none;
+                border-bottom: 1px solid $govuk-link-colour;
+                color: #2e8aca;
+            }
+
+            &:focus {
+                color: govuk-colour("black", $legacy: "black");
+                outline: 3px solid transparent;
+                box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+            }
+        }
+
+        ul {
+            margin: 0;
+
+            li {
+                margin: 0 0 1em;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+    &.clear {
+        background-color: govuk-colour("white", $legacy: "white");
+        border: none;
+    }
 }
 
 .js {
-  .card-body.active {
-    &:hover {
-      //background-color: $govuk-link-colour;
-      color: $govuk-link-colour;
-      cursor: pointer;
-      transition: 0.1s ease-in-out;
-      transition-delay: 0.25s;
+    .card-body.active {
+        &:hover {
+            //background-color: $govuk-link-colour;
+            color: $govuk-link-colour;
+            cursor: pointer;
+            transition: 0.1s ease-in-out;
+            transition-delay: 0.25s;
 
-      .card-heading,
-      p {
-        color: $govuk-link-colour;
-        transition: 0.1s ease-in-out;
-        transition-delay: 0.25s;
-      }
+            .card-heading,
+            p {
+                color: $govuk-link-colour;
+                transition: 0.1s ease-in-out;
+                transition-delay: 0.25s;
+            }
 
-      .card-heading a {
-        color: $govuk-link-colour;
-        transition-delay: 0.25s;
-      }
+            .card-heading a {
+                color: $govuk-link-colour;
+                transition-delay: 0.25s;
+            }
 
-      .detail-large {
-        color: $govuk-link-colour;
-        transition-delay: 0.25s;
-      }
+            .detail-large {
+                color: $govuk-link-colour;
+                transition-delay: 0.25s;
+            }
+        }
+
+        a {
+            text-decoration: none;
+        }
     }
-
-    a {
-      text-decoration: none;
-    }
-  }
 }
 
 #inspectorate-card .card-body {
-  padding-top: 20%;
+    padding-top: 20%;
 }
 
 .card-3 .card-body {
-  display: inline-flex;
-  flex-direction: column;
-  min-height: 30vh;
+    display: inline-flex;
+    flex-direction: column;
+    min-height: 30vh;
 
-  .cardVieAll {
-    margin-top: auto;
-  }
+    .cardVieAll {
+        margin-top: auto;
+    }
 }

styles/sass/styles.scss

@@ -1,6 +1,9 @@
 @import "node_modules/govuk-frontend/govuk/all";
-//@import "prevent-training/_application";
+
+// 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_old";
 
 // global styles for <a> and <p> tags
 $govuk-global-styles: true;
@@ -23,6 +26,3 @@ $govuk-assets-path: "/govuk/assets/";
 
 // Components that aren't in Frontend
 @import "components/cookie-banner";
-
-// Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you
-@import "prevent-training/application";

styles/sass/welshgov/_application.scss

@@ -1,11 +1,89 @@
+html {
+    scroll-behavior: smooth;
+}
+
 *,
-.govuk-body-s {
+.govuk-body,
+.govuk-body-s,
+.govuk-body-m,
+.govuk-heading-xl,
+.govuk-heading-l,
+.govuk-heading-m,
+.govuk-header-l,
+.govuk-header-m,
+.govuk-header__link,
+.govuk-button,
+.govuk-label,
+.govuk-select,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+a {
     font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
 }
 .govuk-header {
     background-color: #323232;
 }
 
+.govuk-button {
+    background-color: $red;
+
+    &.govuk-button--secondary {
+        background-color: $white;
+        color: $red;
+        border: 1px solid red;
+
+        &:hover {
+            background-color: $red;
+            color: $white;
+        }
+    }
+}
+
+.govuk-button:hover {
+    background-color: $lightred;
+}
+
+.sharebar {
+    background: #e5e5e5;
+    margin: 0;
+    padding: 15px;
+    clear: both;
+}
+
+.sharebar__components.container-fluid {
+    max-width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 60px;
+    padding-right: 20px;
+}
+
+.btn--arrow-up a {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id=%22Layer_1%22 data-name=%22Layer 1%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%22159.5%22 height=%22102.4%22 viewBox=%220 0 159.5 102.4%22%3E%3Ctitle%3Eblack-arrow-up%3C/title%3E%3Cpath d=%22M159.5,79.8,79.8,0,0,79.8l22.6,22.6L79.7,45.3l57.1,57.1Z%22/%3E%3C/svg%3E");
+    background-size: 18px 13px;
+    background-position: 10px center;
+    background-repeat: no-repeat;
+    padding-left: 36px;
+    margin-top: 1px;
+}
+
+.btn--outlined a {
+    text-decoration: none;
+    color: #323232;
+    background: none;
+    padding: 12px;
+    font-size: 1em;
+    font-weight: bold;
+    display: inline-block;
+    border: 1px solid #999999;
+    line-height: 17px;
+    line-height: 1.0625rem;
+}
+
 .languageSwitch {
     margin-top: 15px;
     text-align: right;
@@ -16,7 +94,18 @@
         top: 10px;
         right: -10px;
     }
+    a.govuk-header__link {
+        background-color: black;
+        padding: 10px;
+    }
+    a.govuk-header__link:focus {
+        background-color: black;
+        padding: 10px;
+        color: #fff;
+        box-shadow: none;
+    }
 }
+
 .header__logo {
     float: left;
     margin: 0;
@@ -31,11 +120,19 @@
     border: none;
 }
 
+.govuk-header__logo {
+    width: 22% !important;
+}
+
 nav {
     margin-top: 60px;
     margin-bottom: 40px;
 }
 
+.govuk-footer {
+    padding-top: 0px;
+}
+
 #footer_logo {
     margin-top: 60px;
     margin-bottom: 40px;

styles/sass/welshgov/_variables.scss

@@ -0,0 +1,11 @@
+//gov.wales pallete variables
+
+$white: #ffffff;
+$red: #aa1111;
+$lightred: #d81f1f;
+
+$lightgrey_dark: #cccccc;
+$lightgrey_mid: #dddddd;
+$lightgrey_semi: #e5e5e5;
+$lightgrey_light: #eeeeee;
+$lightgrey_offwhite: #f1f1f1;