updates from most recent website build

resources/styles/app.scss

@@ -9,8 +9,18 @@
 @import "plugins/contact-form-7";
 @import "plugins/mce";
 
+// Sections
+@import "sections/header";
+@import "sections/footer";
+
+// Components
+@import "components/forms";
+@import "components/button";
+@import "components/card";
+
+// Blocks
+@import "blocks/BadExample";
+
 // Page Styles
 @import "views/page";
 
-// Component Styles
-@import "components/card";

resources/styles/components/_button.scss

@@ -0,0 +1,108 @@
+button {
+  &%block,
+  &.block {
+    background-color: transparent;
+    border: none;
+    font-size: 1em;
+    padding: 0;
+  }
+}
+
+button,
+input[type="submit"] {
+  &.button {
+    appearance: none;
+  }
+}
+
+%button,
+.button {
+  display: inline-block;
+  padding: 0.5em 1.25em;
+  border: 0.125em solid $black;
+  border-radius: 0.25em;
+  background-color: $black;
+  color: $white;
+  font-family: $font;
+  font-weight: 700;
+  text-decoration: none;
+  white-space: normal;
+  cursor: pointer;
+  transition: 300ms ease all;
+
+  .knockout & {
+    background-color: $white;
+    border-color: $white;
+    color: currentcolor;
+  }
+
+  &:hover,
+  &:focus {
+    color: $white;
+    text-decoration: none;
+    background-color: rgba($black, 0.5);
+    border-color: rgba($black, 0.5);
+
+    .knockout & {
+      background-color: rgba($white, 0.5);
+      border-color: rgba($white, 0.5);
+      color: currentcolor;
+    }
+  }
+
+  &.outline {
+    border-color: $black;
+    background-color: transparent;
+    color: $black;
+
+    &:hover,
+    &:focus {
+      background-color: $black;
+      color: $white;
+    }
+
+    .knockout & {
+      @media screen {
+        border-color: $white;
+        color: $white;
+
+        &:hover,
+        &:focus {
+          background-color: $white;
+          color: $black;
+        }
+      }
+    }
+  }
+
+  &.wide {
+    padding-right: 3em;
+    padding-left: 3em;
+  }
+
+  &.thin {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+  }
+
+  &.full {
+    display: block;
+    width: 100%;
+    padding-right: 0.625em;
+    padding-left: 0.625em;
+    text-align: center;
+  }
+
+  &.small { font-size: 1em; }
+  &.smaller { font-size: 0.875em; }
+  &.big { font-size: 1.25em; }
+  &.bigger { font-size: 1.5em; }
+}
+
+.button-wrap {
+  margin: 1.5em -0.25em -0.25em;
+
+  .button {
+    margin: 0.25em;
+  }
+}

resources/styles/components/_card.scss

@@ -1,8 +1,13 @@
 .card {
   position: relative;
   margin: 0.5em;
+  flex: 0 0 calc(100% - 1em);
 
   &-wrap {
+    display: flex;
+    flex-wrap: wrap;
     margin: -0.5em;
   }
 }
+
+

resources/styles/components/_forms.scss

@@ -0,0 +1,286 @@
+textarea {
+  min-height: 10.375em;
+}
+
+input,
+textarea {
+  color: $grey;
+  background: white;
+  font-weight: 400;
+  font-size: 1em;
+  font-family: $font;
+  width: 100%;
+  padding: 0.875em 1em;
+  margin: 0 0 1em;
+  // border-radius: 0.125em;
+  border: 0.0625em solid rgba($black, 0.1);
+  outline: none;
+  transition: all 300ms ease;
+
+  &::placeholder {
+    color: $grey-light;
+  }
+
+  &:focus {
+    box-shadow: 0 0.25em 0.5em rgba($black, 0.1);
+  }
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  padding: 0;
+  margin: 0;
+  width: auto;
+
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+select {
+  width: 100%;
+}
+
+.field-wrap {
+  flex: 1 1 calc(100% - 1em);
+  margin: 0 0.5em;
+  transition: all 300ms ease;
+
+  p {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  label {
+    flex: 0 0 100%;
+    max-width: 100%;
+    width: 100%;
+    order: -1;
+    margin: 0;
+  }
+
+  textarea,
+  input {
+    flex: 1 1 100%;
+    margin: 0;
+  }
+
+  /* stylelint-disable selector-class-pattern */
+  .mce_inline_error {
+    flex: 0 0 100%;
+    max-width: 100%;
+    width: 100%;
+    margin: 0;
+    font-family: $font;
+  }
+  /* stylelint-enable selector-class-pattern */
+
+  @media (min-width: $screen-sm) {
+    &.half {
+      flex: 0 0 calc(50% - 1em);
+      max-width: calc(50% - 1em);
+      width: calc(50% - 1em);
+    }
+  }
+}
+
+.form-footer {
+  p {
+    margin: 0;
+    line-height: 1.2;
+  }
+
+  button,
+  .button,
+  input[type="submit"] {
+    margin: 0;
+  }
+
+  .wpcf7-list-item {
+    margin: 0;
+    user-select: none;
+  }
+
+  .form-footer-button {
+    flex: 1 1 100%;
+    display: block;
+    margin: 2em 0 0;
+  }
+
+  @media (min-width: $screen-sm) {
+    display: flex;
+    flex-wrap: wrap;
+
+    .form-footer-button {
+      flex: 0 0 8.5em;
+      max-width: 8.5em;
+      width: 8.5em;
+      margin: 0 0 0 2em;
+      text-align: right;
+    }
+
+    .form-footer-text {
+      flex: 1 1 5em;
+      margin: auto;
+
+      p {
+        display: block;
+      }
+    }
+  }
+}
+
+.section-form {
+  button {
+    margin: 1em 0 0;
+  }
+
+  span.label {
+    font-weight: 700;
+  }
+
+  .textarea-wrap {
+    span.label {
+      display: none;
+    }
+  }
+
+  form {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 1em -0.5em 0;
+    position: relative;
+
+    .wpcf7 {
+      .screen-reader-response {
+        display: none;
+      }
+
+      &-spinner {
+        position: absolute;
+        z-index: 1;
+        top: calc(50% - 12px);
+        left: calc(50% - 12px);
+      }
+
+      &-not-valid-tip {
+        background: $error;
+        color: $white;
+        padding: 0.5em 1em;
+        border-radius: 0 0 0.5em 0.5em;
+        font-weight: 700;
+      }
+
+      &-response-output {
+        margin: 1em 0.5em 0;
+        max-width: calc(100% - 1em);
+        width: calc(100% - 1em);
+        flex: 0 0 calc(100% - 1em);
+        text-align: center;
+        color: $white;
+        font-family: $font;
+        font-weight: 700;
+        background: $black;
+        border: 0.125em solid $white;
+        padding: 0.5em 1em;
+        border-radius: 0.5em;
+      }
+
+      &-display-none {
+        display: none;
+      }
+
+      &-checkbox {
+        label {
+          display: block;
+          padding: 0 0 0 1.75em;
+          margin: 0;
+          font-weight: 700;
+        }
+
+        input[type="checkbox"] {
+          position: absolute;
+          z-index: 1;
+          top: 0;
+          left: 0;
+          appearance: none;
+          display: block;
+          width: 1.25em;
+          height: 1.25em;
+          border: 0.125em solid $black;
+          background: transparent;
+          color: currentcolor;
+
+          &::before {
+            content: "\f00c";
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            left: 0.125em;
+            font-family: "Font Awesome 6 Free", serif;
+            font-weight: 900;
+            opacity: 0;
+            transition: all 300ms ease;
+          }
+
+          &:checked {
+            &::before {
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
+
+    &.submitting {
+      .field-wrap:not(.form-footer) {
+        opacity: 0.1;
+      }
+
+      .form-footer {
+        .form-footer-text {
+          opacity: 0.1;
+        }
+
+        .form-footer-button input {
+          opacity: 0.1;
+        }
+      }
+    }
+
+    &.sent {
+      .wpcf7-response-output {
+        background: $success;
+        border-color: $white;
+      }
+    }
+
+    &.invalid {
+      .wpcf7-response-output {
+        background: $error;
+        border-color: $white;
+      }
+    }
+
+    .ajax-loader {
+      position: absolute;
+      z-index: 1;
+      top: calc(50% - 12px);
+      right: calc(50% - 12px);
+      display: block;
+      margin: 0;
+    }
+  }
+
+  &.knockout {
+    form {
+      .wpcf7 {
+        &-checkbox {
+          input[type="checkbox"] {
+            border-color: $white;
+          }
+        }
+      }
+    }
+  }
+}

resources/styles/global/_typography.scss

@@ -135,3 +135,13 @@ hr {
     }
   }
 }
+
+.align {
+  &-centre {
+    text-align: center;
+  }
+
+  &-right {
+    text-align: right;
+  }
+}

resources/styles/global/framework/_normalise.scss

@@ -23,3 +23,13 @@ html {
   white-space: nowrap;
   width: 1px;
 }
+
+img {
+  max-width: 100%;
+  height: auto;
+  transition: all 300ms ease;
+
+  &.lazy {
+    filter: blur(0.25em);
+  }
+}

resources/styles/global/framework/_spacing.scss

@@ -1,3 +1,28 @@
+.brand {
+  display: block;
+  width: $brandWidth;
+  height: $brandHeight;
+
+  svg,
+  img {
+    display: block;
+    width: $brandWidth;
+    height: $brandHeight;
+  }
+
+  .knockout & {
+    @media screen {
+      .fill-primary {
+        fill: $white;
+      }
+
+      .fill-grey {
+        fill: rgba($white, 0.8);
+      }
+    }
+  }
+}
+
 .container {
   width: 90%;
   margin: auto;
@@ -9,19 +34,11 @@
 }
 
 .section {
-  padding: $sectionSmall;
+  padding: $sectionMedium 0;
 
-  @media (min-width: $screen-md) {
-    padding: $sectionMedium;
-  }
-
-  @media (min-width: $screen-lg) {
-    padding: $sectionLarge;
-  }
-
-  &-small { padding: $sectionSmall; }
-  &-medium { padding: $sectionMedium; }
-  &-large { padding: $sectionLarge; }
+  &-small { padding: $sectionSmall 0; }
+  &-medium { padding: $sectionMedium 0; }
+  &-large { padding: $sectionLarge 0; }
 
   &-zero-top { padding-top: 0; }
   &-zero-bottom { padding-bottom: 0; }
@@ -32,6 +49,16 @@
 
   &-small { padding: $innerSmall; }
   &-large { padding: $innerLarge; }
+
+  &-zero-x {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &-zero-y {
+    padding-top: 0;
+    padding-top: 0;
+  }
 }
 
 .rounded {