add base styles and scripts

web/app/themes/badegg/package.json

@@ -23,6 +23,7 @@
     "@roots/sage": "6.20.0"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^7.0.1",
     "@roots/bud-sass": "^6.24.0"
   }
 }

web/app/themes/badegg/resources/scripts/app.js

@@ -1,10 +1,19 @@
 import domReady from '@roots/sage/client/dom-ready';
+import Header from '../views/sections/header/header';
+import Footer from '../views/sections/footer/footer';
+import blocks from './blocks.js';
+import LazyLoad from './lib/Lazy.js';
+import Accordion from './lib/Accordion.js';
 
 /**
  * Application entrypoint
  */
 domReady(async () => {
-  // ...
+  LazyLoad();
+  Accordion();
+  Header();
+  Footer();
+  blocks();
 });
 
 /**

web/app/themes/badegg/resources/scripts/blocks.js

@@ -0,0 +1,6 @@
+import WYSIWYG from '../views/blocks/WYSIWYG/WYSIWYG';
+
+export default function()
+{
+  WYSIWYG();
+}

web/app/themes/badegg/resources/scripts/lib/Accordion.js

@@ -0,0 +1,15 @@
+export default function Accordion()
+{
+  const accordions = document.querySelectorAll(".js-accordion");
+
+  if(!accordions) return;
+
+  accordions.forEach(accordion => {
+    const question = accordion.querySelector(".js-accordion-toggle");
+
+    question.addEventListener("click", function(e) {
+      e.preventDefault();
+      accordion.classList.toggle("open");
+    });
+  });
+}

web/app/themes/badegg/resources/scripts/lib/Lazy.js

@@ -0,0 +1,33 @@
+export default function LazyLoadInit()
+{
+  document.addEventListener('DOMContentLoaded', LazyLoad());
+}
+
+function LazyLoad() {
+
+  var lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
+
+  if ('IntersectionObserver' in window) {
+    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          let lazyImage = entry.target;
+          lazyImage.src = lazyImage.dataset.src;
+
+          if(lazyImage.dataset.srcset) {
+            lazyImage.srcset = lazyImage.dataset.srcset;
+          }
+
+          lazyImage.classList.remove('lazy');
+          lazyImageObserver.unobserve(lazyImage);
+        }
+      });
+    });
+
+    lazyImages.forEach(function(lazyImage) {
+      lazyImageObserver.observe(lazyImage);
+    });
+  } else {
+    // Possibly fall back to a more compatible method here
+  }
+}

web/app/themes/badegg/resources/scripts/lib/VideoSrcset.js

@@ -0,0 +1,24 @@
+export default function VideoSrcset( element )
+{
+  const sizes = JSON.parse(element.dataset.sizes);
+
+  Object.keys(sizes).forEach((key) => {
+    const size = key;
+    const source = element.querySelector('.bgvid-' + size);
+
+    if(source) {
+      const sourceWidth = source.dataset.width;
+      const poster = source.dataset.poster;
+
+      if(window.innerWidth >= sourceWidth) {
+        console.log('screen width is greater than or equal to the source width');
+        console.log('screen width: ' + window.innerWidth);
+        console.log('source width: ' + sourceWidth);
+
+        element.src = source.src;
+        element.poster = poster;
+        element.load;
+      }
+    }
+  });
+}

web/app/themes/badegg/resources/styles/app.scss

@@ -0,0 +1,28 @@
+$fa-font-path: "~/fonts";
+
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+// @import "@fortawesome/fontawesome-free/scss/solid";
+// @import "@fortawesome/fontawesome-free/scss/brands";
+
+// Global Variables, Mixins, and Framework
+@import "global/variables";
+@import "global/mixins";
+@import "global/fonts";
+@import "global/typography";
+@import "global/framework";
+
+// Components
+@import "components/forms";
+@import "components/button";
+@import "components/card";
+
+// Third Party Plugins
+@import "plugins/contact-form-7";
+@import "plugins/mce";
+
+// Sections
+@import "../views/sections/header/header";
+@import "../views/sections/footer/footer";
+
+// Blocks
+@import "../views/blocks/WYSIWYG/WYSIWYG";

web/app/themes/badegg/resources/styles/components/_button.scss

@@ -0,0 +1,111 @@
+button {
+  &%block,
+  &.block {
+    background-color: transparent;
+    border: none;
+    font-size: 1em;
+    padding: 0;
+  }
+}
+
+button,
+input[type="submit"] {
+  &.btn {
+    appearance: none;
+  }
+}
+
+%btn,
+.btn {
+  display: inline-block;
+  padding: 0.75em 1.5em;
+  border: 0.125em solid $black;
+  border-radius: 2em;
+  background-color: $black;
+  color: $white;
+  font-family: $font;
+  font-weight: 700;
+  font-size: 1em;
+  text-transform: lowercase;
+  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; }
+}
+
+.btn-wrap {
+  margin: 1.5em -0.25em -0.25em;
+
+  input[type=submit],
+  .btn {
+    margin: 0.25em;
+  }
+}

web/app/themes/badegg/resources/styles/components/_card.scss

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

web/app/themes/badegg/resources/styles/components/_forms.scss

@@ -0,0 +1,331 @@
+select,
+input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
+textarea {
+  color: $grey-dark;
+  background: white;
+  font-weight: 400;
+  font-size: 1em;
+  font-family: $font;
+  width: 100%;
+  padding: 0.5em 1em;
+  margin: 0;
+  border-radius: 0;
+  border: 1px solid $grey;
+  transition: all 300ms ease;
+  outline-color: $primary-lighter;
+
+  &::placeholder {
+    color: $grey-lighter;
+  }
+
+  &:focus {
+    border-color: $primary-light;
+    color: $primary-lighter;
+  }
+
+  .hfont & {
+    font-weight: bold;
+    font-family: $hfont;
+    color: $primary;
+
+    &:focus {
+      color: $primary-lighter;
+    }
+  }
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  padding: 0;
+  margin: 0;
+  width: auto;
+
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+select {
+  width: 100%;
+  appearance: none;
+}
+
+.field-wrap {
+  flex: 1 1 calc(100% - 1em);
+  margin: 0.5em;
+  transition: all 300ms ease;
+
+  span.label {
+    display: block;
+    font-size: 0.75em;
+    margin: 0 0 0.25em;
+  }
+
+  label {
+    flex: 0 0 100%;
+    max-width: 100%;
+    width: 100%;
+    order: -1;
+    margin: 0;
+  }
+
+  textarea,
+  input {
+    flex: 1 1 100%;
+    margin: 0;
+  }
+
+  .has-icon {
+    position: relative;
+
+    i {
+      position: absolute;
+      top: 0.45em;
+      left: 0.5em;
+      z-index: 1;
+      color: $quaternary-lighter;
+      font-size: 1.25em;
+    }
+
+    input,
+    select {
+      padding-left: 2.5em !important;
+    }
+  }
+
+  /* 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);
+    }
+  }
+}
+
+.select-wrap {
+  .has-icon {
+    select {
+      padding-right: 1.5em;
+    }
+
+    &::after {
+      content: '\f0d7';
+      font-family: 'Font Awesome 6 Free', serif;
+      font-weight: 900;
+      display: block;
+      position: absolute;
+      top: 0.375em;
+      right: 0.75em;
+      color: $grey-light;
+    }
+  }
+}
+
+.section-form {
+  container-name: SectionForm;
+  container-type: inline-size;
+
+  form {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -0.5em;
+    position: relative;
+
+    div[class^="eacf7-form-"] {
+      flex: auto;
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .wpcf7 {
+      .screen-reader-response {
+        display: none;
+      }
+
+      &-spinner {
+        position: absolute;
+        z-index: 1;
+        top: calc(50% - 12px);
+        left: calc(50% - 12px);
+      }
+
+      &-form-control-wrap {
+        display: block;
+      }
+
+      &-not-valid-tip {
+        position: absolute;
+        right: -0.5em;
+        top: -3.125em;
+        background: $error;
+        color: $white;
+        padding: 0.5em 1em;
+        border-radius: 0.5em;
+        font-weight: 700;
+        font-size: 0.75em;
+        transition: all 300ms ease;
+
+        &::before {
+          content: '';
+          position: absolute;
+          right: 1em;
+          bottom: -0.25em;
+          display: block;
+          width: 1em;
+          height: 1em;
+          background: $error;
+          transform: rotate(45deg);
+        }
+
+        &:hover {
+          opacity: 0.1;
+        }
+      }
+
+      &-response-output {
+        display: block;
+        margin: 2em auto 0;
+        flex: 1 1 100%;
+        width: 100%;
+        text-align: left;
+        font-family: $font;
+        font-weight: 700;
+        font-size: 0.875em;
+        padding: 0.5em 1em;
+        border-radius: 0.5em;
+        border-width: 0;
+
+        @extend .white;
+        @extend .bg-black;
+        @extend .knockout;
+      }
+
+      &-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;
+            }
+          }
+        }
+      }
+    }
+
+    .form-footer {
+      @container SectionForm (min-width: #{$screen-sm}) {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        &-text {
+          flex: 1;
+        }
+      }
+
+      button,
+      .btn,
+      input[type="submit"] {
+        margin: 0;
+      }
+
+      .wpcf7-list-item {
+        margin: 0;
+        user-select: none;
+      }
+    }
+
+    &.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 {
+        @extend .bg-success;
+      }
+    }
+
+    &.invalid {
+      .wpcf7-response-output {
+        @extend .bg-error;
+      }
+    }
+
+    .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;
+          }
+        }
+      }
+    }
+  }
+}

web/app/themes/badegg/resources/styles/editor.scss

@@ -0,0 +1,65 @@
+@import "app";
+
+body {
+  &.template-plain-document {
+    .editor-styles-wrapper {
+      max-width: $containerMedium;
+      margin: auto;
+    }
+  }
+
+  .editor-visual-editor {
+    background: $white;
+  }
+
+  .editor-styles-wrapper {
+    padding: 2rem !important;
+  }
+
+  &:not(.template-plain-document) {
+    .editor-styles-wrapper {
+      background: transparent;
+    }
+
+    .editor-visual-editor {
+      background-image: url('~images/pattern-fabric-of-squares-gray.png');
+      background-size: 200px;
+      background-attachment: fixed;
+
+      &__post-title-wrapper {
+        padding: 1rem;
+        margin: 0 0 3rem !important;
+        background: $white;
+        box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
+      }
+    }
+
+    .wp-block-post-title {
+      position: relative;
+      padding: 0.5rem;
+      border: $borderThin solid $grey-lighter;
+      margin: 0;
+
+      &::before {
+        content: 'Page Title';
+        position: absolute;
+        top: -0.5rem;
+        left: 0.5rem;
+        color: $grey-lighter;
+        font-family: $font;
+        font-size: 0.8rem;
+        display: block;
+        padding: 0 0.5rem;
+        margin: 0;
+        background: $white;
+        line-height: 1;
+        font-weight: 400;
+      }
+    }
+
+    .wp-block-post-content {
+      background: $white;
+      box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
+    }
+  }
+}

web/app/themes/badegg/resources/styles/global/_fonts.scss

@@ -0,0 +1,18 @@
+$hfont: Times, 'Times New Roman', serif;
+$font: Helvetica, Arial, sans-serif;
+
+/*
+ * Roots Fonts Setup
+ * https://roots.io/sage/docs/fonts-setup/
+ *
+ * Self-Hosted Google Fonts (Ubuntu Demo)
+ * https://gwfh.mranftl.com/fonts/ubuntu?subsets=latin
+ *
+ * Add the font to your Tailwind config
+ * tailwind.config.cjs
+ *
+ * Configure theme.json to use the font with Bud
+ */
+
+/* stylelint-disable */
+

web/app/themes/badegg/resources/styles/global/_framework.scss

@@ -0,0 +1,17 @@
+@import "framework/breakpoints";
+@import "framework/normalise";
+@import "framework/colours";
+@import "framework/spacing";
+
+.socials {
+  font-size: 1.5em;
+
+  li {
+    display: inline-block;
+  }
+
+  a {
+    display: block;
+    padding: 0.125em;
+  }
+}

web/app/themes/badegg/resources/styles/global/_mixins.scss

@@ -0,0 +1,4 @@
+@import "mixins/linear-gradient";
+@import "mixins/text-contrast";
+@import "mixins/generate-colour-classes";
+@import "mixins/generate-button-classes";

web/app/themes/badegg/resources/styles/global/_typography.scss

@@ -0,0 +1,211 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $primary;
+  font-weight: 700;
+  font-family: $hfont;
+  line-height: 1.1em;
+  margin: 1.5em 0 0.5em;
+  padding: 0;
+
+  &.section-title {
+    margin-top: 0;
+  }
+
+  &.has-flourish {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      content: '';
+      display: block;
+      width: 1em;
+      height: 1em;
+      mask-image: url("~/images/flourish-flipped.svg");
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      background: $secondary;
+      transform: translate(-55%, -40%) rotate(270deg);
+      pointer-events: none;
+      font-size: 2em;
+    }
+  }
+
+  @media screen {
+    .knockout & {
+      color: $white;
+    }
+  }
+}
+
+h1 {
+  font-size: 1.75em;
+  margin-top: 0;
+}
+
+h2 { font-size: 1.5em; }
+h3 { font-size: 1.25em; }
+
+h4,
+h5 { font-size: 1.15em; }
+
+@container (min-width: #{$screen-sm}) {
+  h1 { font-size: 2.5em; }
+  h2 { font-size: 2em; }
+  h3 { font-size: 1.5em; }
+
+  h4,
+  h5 {
+    font-size: 1.25em;
+  }
+}
+
+p,
+li,
+td,
+label {
+  color: $grey-darker;
+  font-family: $font;
+  font-weight: 400;
+  line-height: 1.5em;
+  margin: 0 0 0.8em;
+  padding: 0;
+
+  @media screen {
+    .knockout & {
+      color: $white;
+    }
+  }
+}
+
+.overline {
+  margin: 0 0 0.125em;
+
+  @container (min-width: #{$screen-md}) {
+    font-size: 1.25em;
+  }
+}
+
+a {
+  color: $primary;
+  text-decoration: none;
+  outline: none;
+  transition: all 300ms ease;
+  font-weight: bold;
+
+  &:hover,
+  &:focus {
+    color: $primary-dark;
+    text-decoration: none;
+  }
+
+  @media screen {
+    .knockout & {
+      color: $white;
+
+      &:hover,
+      &:focus {
+        color: $tertiary;
+      }
+    }
+  }
+}
+
+strong { font-weight: 700; }
+small { font-size: 0.8em; }
+
+li {
+  margin: 0.125em 0;
+  line-height: 1.5em;
+}
+
+ul,
+ol {
+  margin: 0 0 0.7em;
+  padding: 0 0 0 1.2em;
+  text-align: left;
+}
+
+.nolist {
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+  list-style: none;
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+hr {
+  margin: 1.5em auto 2em;
+  height: 0;
+  border: 0 solid $grey-light;
+  border-width: $borderThin 0 0;
+
+  @media screen {
+    .knockout & {
+      border-color: $white;
+    }
+  }
+}
+
+.align {
+  &-centre {
+    text-align: center;
+  }
+
+  &-right {
+    text-align: right;
+  }
+}
+
+.wysiwyg {
+  >*:first-child {
+    margin-top: 0;
+  }
+
+  >*:last-child {
+    margin-bottom: 0;
+  }
+
+  a:not(.btn) {
+    text-decoration: underline;
+    font-weight: bold;
+  }
+}
+
+blockquote {
+  p {
+    font-family: $hfont;
+    font-weight: bold;
+    line-height: 1.2;
+  }
+
+  >*:first-child::before,
+  >*:last-child::after {
+    color: $secondary;
+    line-height: 1;
+    display: inline-block;
+    vertical-align: top;
+    transform: scale(1.5);
+  }
+
+  >*:first-child::before {
+    content: '\201C';
+    margin-right: 0.125em;
+    transform-origin: top right;
+  }
+
+  >*:last-child::after {
+    content: '\201D';
+    margin-left: 0.125em;
+    transform-origin: top left;
+  }
+}

web/app/themes/badegg/resources/styles/global/_variables.scss

@@ -0,0 +1,3 @@
+@import "variables/colours";
+@import "variables/breakpoints";
+@import "variables/spacing";

web/app/themes/badegg/resources/styles/global/framework/_breakpoints.scss

@@ -0,0 +1,13 @@
+@each $label, $value in $breakpoints {
+  .min-#{$label} {
+    @media (min-width: $value) {
+      display: none;
+    }
+  }
+
+  .max-#{$label} {
+    @media (max-width: ($value - 0.0625)) {
+      display: none;
+    }
+  }
+}

web/app/themes/badegg/resources/styles/global/framework/_colours.scss

@@ -0,0 +1,11 @@
+@use 'sass:color';
+
+::selection {
+  color: $white;
+  background: $primary;
+}
+
+@each $color, $hex in $colors {
+  @include generate_colour_classes($color, $hex);
+  @include generate_button_colors($color, $hex);
+}

web/app/themes/badegg/resources/styles/global/framework/_normalise.scss

@@ -0,0 +1,41 @@
+* {
+  box-sizing: border-box;
+  backface-visibility: hidden; // removes jagged edges on rotated elements
+}
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+}
+
+body,
+html {
+  margin: 0;
+  padding: 0;
+  background: $white;
+}
+
+.visually-hidden {
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  transition: all 300ms ease;
+
+  &.lazy {
+    filter: blur(0.25em);
+    opacity: 0;
+  }
+}
+
+svg {
+  fill: currentColor;
+}

web/app/themes/badegg/resources/styles/global/framework/_spacing.scss

@@ -0,0 +1,152 @@
+#app {
+  container-type: inline-size;
+}
+
+.wrapper,
+.wrapper.section-has-angle {
+  padding: 0;
+}
+
+.badegg-blocks {
+  .badegg-block {
+    &:last-of-type {
+      @extend .section-has-angle;
+      @extend .section-has-angle-bottom;
+    }
+  }
+}
+
+.brand {
+  display: block;
+  width: $brandWidth;
+  // height: $brandHeight;
+
+  svg,
+  img {
+    display: block;
+    width: 100%;
+    height: auto;
+    // height: $brandHeight;
+  }
+
+  .knockout & {
+    @media screen {
+      .fill-primary {
+        fill: $white;
+      }
+
+      .fill-grey {
+        fill: rgba($white, 0.8);
+      }
+    }
+  }
+}
+
+.container {
+  width: 90%;
+  margin: auto;
+
+  &-large { max-width: $containerLarge; }
+  &-medium { max-width: $containerMedium; }
+  &-small { max-width: $containerSmall; }
+  &-narrow { max-width: $containerNarrow; }
+}
+
+.section {
+  padding: $sectionMedium 0;
+
+  &-small { padding: $sectionSmall 0; }
+  &-medium { padding: $sectionMedium 0; }
+  &-large { padding: $sectionLarge 0; }
+
+  &-zero-top { padding-top: 0; }
+  &-zero-bottom { padding-bottom: 0; }
+
+  @container (min-width: #{$screen-lg}) {
+    padding: $sectionLarge 0;
+  }
+
+  &-intro {
+    &-inner {
+      max-width: $containerSmall;
+    }
+
+    &.align-right {
+      justify-content: flex-end;
+      display: flex;
+    }
+
+    &.align-centre {
+      max-width: $containerNarrow;
+
+      .section-intro-inner {
+        margin: auto;
+      }
+    }
+  }
+}
+
+.inner {
+  padding: $innerMedium;
+
+  &-small { padding: $innerSmall; }
+  &-large { padding: $innerLarge; }
+
+  &-zero-x {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &-zero-y {
+    padding-top: 0;
+    padding-top: 0;
+  }
+}
+
+.rounded {
+  border-radius: $borderRadius;
+
+  &-top {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &-bottom {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+}
+
+.border {
+  border-style: solid;
+  border-width: $borderWidth;
+
+  &-thin { border-width: 0.0625em; }
+  &-regular { border-width: $borderWidth; }
+  &-thick { border-width: $borderThick; }
+  &-thicker { border-width: $borderThicker; }
+
+  &-top {
+    border-right-width: 0;
+    border-bottom-width: 0;
+    border-left-width: 0;
+  }
+
+  &-right {
+    border-top-width: 0;
+    border-bottom-width: 0;
+    border-left-width: 0;
+  }
+
+  &-bottom {
+    border-top-width: 0;
+    border-right-width: 0;
+    border-left-width: 0;
+  }
+
+  &-left {
+    border-top-width: 0;
+    border-right-width: 0;
+    border-bottom-width: 0;
+  }
+}

web/app/themes/badegg/resources/styles/global/mixins/_generate-button-classes.scss

@@ -0,0 +1,66 @@
+@use "sass:color";
+
+@mixin generate_button_colors($name, $hex) {
+
+  $buttons: (
+    ".btn",
+    "button",
+    "input[type=submit]",
+  );
+
+  @each $button in $buttons {
+    #{$button}.#{$name} {
+      @include text-contrast($hex);
+      background: $hex;
+      border-color: $hex;
+
+      &:hover,
+      &:focus {
+        @include text-contrast($hex);
+        background: color.adjust($hex, $lightness: 10%);
+        border-color: color.adjust($hex, $lightness: 10%);
+      }
+    }
+
+    #{$button}.#{$name}.inverted {
+      @include text-contrast($hex);
+      background: transparent;
+      border-color: $hex;
+
+      &:hover,
+      &:focus {
+        @include text-contrast($hex);
+        background: #{$hex};
+        border-color: #{$hex};
+      }
+    }
+
+    @media screen {
+      *:not(.bg-#{$name}) #{$button}.#{$name} {
+        @include text-contrast($hex);
+        background-color: $hex;
+        border-color: $hex;
+
+        &:hover,
+        &:focus {
+          @include text-contrast($hex);
+          background-color: color.adjust($hex, $lightness: 10%);
+          border-color: color.adjust($hex, $lightness: 10%);
+        }
+      }
+
+      .bg-#{$name} #{$button}.#{$name} {
+        @include text-contrast($hex);
+        background: white;
+        border-color: white;
+
+        &:hover,
+        &:focus {
+          @include text-contrast($hex);
+          background: transparent;
+          border-color: white;
+        }
+      }
+    }
+  }
+}

web/app/themes/badegg/resources/styles/global/mixins/_generate-colour-classes.scss

@@ -0,0 +1,28 @@
+@use "sass:color";
+
+@mixin generate_colour_classes($name, $hex) {
+
+  .knockout .#{$name},
+  .#{$name} {
+    color: $hex;
+  }
+
+  .fill-#{$name} {
+    fill: $hex;
+  }
+
+  .border-#{$name} {
+    border-color: $hex;
+  }
+
+  @media screen {
+    .bg-#{$name} {
+      background-color: $hex;
+
+      ::selection {
+        @include text_contrast(color.invert($hex));
+        background: color.invert($hex);
+      }
+    }
+  }
+}

web/app/themes/badegg/resources/styles/global/mixins/_linear-gradient.scss

@@ -0,0 +1,7 @@
+@use "sass:list";
+
+// define as many $color-stops as needed
+@mixin linear-gradient($direction, $color-stops...) {
+  background: list.nth(list.nth($color-stops, 1), 1);
+  background: linear-gradient($direction, $color-stops);
+}

web/app/themes/badegg/resources/styles/global/mixins/_text-contrast.scss

@@ -0,0 +1,15 @@
+@use "sass:color";
+@use "sass:math";
+
+@mixin text-contrast($n, $dark: $black, $light: $white, $cutoff: 1.8) {
+  $brightness: math.round((color.red($n) * 299) + (color.green($n) * 587) + math.div((color.blue($n) * 114), 1000));
+  $light-color: math.round((color.red($white) * 299) + (color.green($white) * 587) + math.div((color.blue($white) * 114), 1000));
+
+  @if abs($brightness) < (math.div($light-color, $cutoff)) {
+    color: $light;
+  }
+
+  @else {
+    color: $dark;
+  }
+}

web/app/themes/badegg/resources/styles/global/variables/_breakpoints.scss

@@ -0,0 +1,33 @@
+@use "sass:math";
+
+$px: math.div(1, 16);
+
+$screen-xxs:   22.5em !default;
+$screen-xs:    30.0em !default;
+$screen-sm:    48.0em !default;
+$screen-md:    62.0em !default;
+$screen-lg:    75.0em !default;
+$screen-xl:    87.5em !default;
+$screen-xxl:   100.0em !default;
+$screen-xxxl:  120.0em !default;
+
+// So media queries don"t overlap when required
+$screen-xxs-max: ($screen-xs   - $px) !default;
+$screen-xs-max:  ($screen-sm   - $px) !default;
+$screen-sm-max:  ($screen-md   - $px) !default;
+$screen-md-max:  ($screen-lg   - $px) !default;
+$screen-lg-max:  ($screen-xl   - $px) !default;
+$screen-xl-max:  ($screen-xxl  - $px) !default;
+$screen-xxl-max: ($screen-xxxl - $px) !default;
+
+// Breakpoints
+$breakpoints: (
+  "screen-xxs":  $screen-xxs,
+  "screen-xs":   $screen-xs,
+  "screen-sm":   $screen-sm,
+  "screen-md":   $screen-md,
+  "screen-lg":   $screen-lg,
+  "screen-xl":   $screen-xl,
+  "screen-xxl":  $screen-xxl,
+  "screen-xxxl": $screen-xxxl,
+);

web/app/themes/badegg/resources/styles/global/variables/_colours.scss

@@ -0,0 +1,122 @@
+@use "sass:color";
+
+//== Status
+$success:             #39b54a;
+$error:               #be1e2d;
+$alert:               #eed202;
+
+//== Brand Colours
+$primary:             #2f4976;
+$secondary:           #a094b1;
+$tertiary:            #f58762;
+$quaternary:          invert($primary);
+$quinary:             invert($secondary);
+
+//== Primary Tints
+$primary-darkest:     #001427;
+$primary-darker:      #001930;
+$primary-dark:        #001E3B;
+$primary-light:       #324F6C;
+$primary-lighter:     #5A7289;
+$primary-lightest:    #7A8EA0;
+
+//== Secondary Tints
+$secondary-darkest:   #8B2E22;
+$secondary-darker:    #A9382A;
+$secondary-dark:      #CE4433;
+$secondary-light:     #FC7564;
+$secondary-lighter:   #FD9082;
+$secondary-lightest:  #FEA69B;
+
+//== Tertiary Tints
+$tertiary-darkest:    #8B7401;
+$tertiary-darker:     #AA8E01;
+$tertiary-dark:       #CFAD01;
+$tertiary-light:      #FEDC33;
+$tertiary-lighter:    #FEE35B;
+$tertiary-lightest:   #FEED95;
+
+//== quaternary Tints
+$quaternary-darkest:  #454B73;
+$quaternary-darker:   #545C8C;
+$quaternary-dark:     #6670AB;
+$quaternary-light:    #99A7FF;
+$quaternary-lighter:  #C2CEFF;
+$quaternary-lightest: #E0E6FF;
+
+//== quaternary Tints
+$quinary-darkest:     #FF702A;
+$quinary-darker:      #FFA968;
+$quinary-dark:        #FFC693;
+$quinary-light:       #FFE8CF;
+$quinary-lighter:     #FFF7EE; // empathetic white
+$quinary-lightest:    #FFFBF6;
+
+//== Shades
+$white:               white;
+$grey-lightest:       #EBEBE4;
+$grey-lighter:        #D3D3CC;
+$grey-light:          #B1B1A7;
+$grey:                #919087;
+$grey-dark:           #69665B;
+$grey-darker:         #414039;
+$grey-darkest:        #212019;
+$black:               black;
+
+//## Colour Array (used in generating colour classes).
+$colors: (
+  // shades
+  "black":     $black,
+  "grey-darkest": $grey-darkest,
+  "grey-darker": $grey-darker,
+  "grey-dark": $grey-dark,
+  "grey-light": $grey-light,
+  "grey-lighter": $grey-lighter,
+  "grey-lightest": $grey-lightest,
+  "white":     $white,
+  // status
+  "error":      $error,
+  "success":    $success,
+  "alert":      $alert,
+  // brand
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "tertiary":   $tertiary,
+  "quaternary":   $quaternary,
+  "quinary":   $quinary,
+  // primary tints
+  "primary-darkest":  $primary-darkest,
+  "primary-darker":   $primary-darker,
+  "primary-dark":     $primary-dark,
+  "primary-light":    $primary-light,
+  "primary-lighter":  $primary-lighter,
+  "primary-lightest": $primary-lightest,
+  // secondary tints
+  "secondary-darkest":  $secondary-darkest,
+  "secondary-darker":   $secondary-darker,
+  "secondary-dark":     $secondary-dark,
+  "secondary-light":    $secondary-light,
+  "secondary-lighter":  $secondary-lighter,
+  "secondary-lightest": $secondary-lightest,
+  // tertiary tints
+  "tertiary-darkest":  $tertiary-darkest,
+  "tertiary-darker":   $tertiary-darker,
+  "tertiary-dark":     $tertiary-dark,
+  "tertiary-light":    $tertiary-light,
+  "tertiary-lighter":  $tertiary-lighter,
+  "tertiary-lightest": $tertiary-lightest,
+  // tertiary tints
+  "quaternary-darkest":  $quaternary-darkest,
+  "quaternary-darker":   $quaternary-darker,
+  "quaternary-dark":     $quaternary-dark,
+  "quaternary-light":    $quaternary-light,
+  "quaternary-lighter":  $quaternary-lighter,
+  "quaternary-lightest": $quaternary-lightest,
+  // quinary tints
+  "quinary-darkest":  $quinary-darkest,
+  "quinary-darker":   $quinary-darker,
+  "quinary-dark":     $quinary-dark,
+  "quinary-light":    $quinary-light,
+  "quinary-lighter":  $quinary-lighter,
+  "quinary-lightest": $quinary-lightest,
+);

web/app/themes/badegg/resources/styles/global/variables/_spacing.scss

@@ -0,0 +1,46 @@
+@use "sass:math";
+
+$offCanvasWidth:      17.5em;
+
+$brandWidth:          7.46875em !default;
+// $brandHeight:         1.835em !default;
+
+$tileAspectRatio:     math.div(400, 640) * 100%;
+$heroAspectRatio:     math.div(593, 1920) * 100vw;
+$slideAspectRatio:    math.div(733, 1920) * 100vw;
+
+$sectionSmallest:       0.500em;
+$sectionSmaller:        1.000em;
+$sectionSmall:          1.500em;
+$sectionMedium:         3.000em;
+$sectionLarge:          5.000em;
+$sectionLarger:         7.500em;
+$sectionLargest:       10.000em;
+
+$containerLarge:       73.125em;
+$containerMedium:      60.000em;
+$containerSmall:       50.000em;
+$containerNarrow:      34.000em;
+
+$innerLarger:           5.000em;
+$innerLarger:           3.000em;
+$innerLarge:            2.000em;
+$innerMedium:           1.500em;
+$innerSmall:            1.000em;
+$innerSmaller:          0.750em;
+$innerSmallest:         0.500em;
+
+$borderRadiusLargeer:   1.500em;
+$borderRadiusLarge:     1.000em;
+$borderRadius:          1.000em;
+$borderRadiusSmall:     0.500em;
+$borderRadiusSmaller:   0.250em;
+
+$borderThin:           0.0625em;
+$borderWidth:          0.1250em;
+$borderThick:          0.2500em;
+$borderThicker:        0.5000em;
+$borderThickest:       1.0000em;
+
+$angleHeight:          6.667cqw;
+$angleHeightSmall:     3.472cqw;

web/app/themes/badegg/resources/styles/plugins/_contact-form-7.scss

@@ -0,0 +1,22 @@
+.wpcf7 .screen-reader-response {
+  display: none;
+}
+
+.wpcf7-response-output {
+  @extend p;
+  @extend .container;
+  @extend .container-narrow;
+
+  padding: 1em 0 0;
+  margin-top: 2em;
+  border: 1px solid $grey-light;
+  border-width: 1px 0 0;
+
+  .knockout & {
+    border-color: rgba($white, 0.3);
+  }
+}
+
+.wpcf7-display-none {
+  display: none;
+}

web/app/themes/badegg/resources/styles/plugins/_mce.scss

@@ -0,0 +1,12 @@
+#mce-responses {
+  .response {
+    padding: 0 0 1em;
+    margin: 0 0 1em;
+    font-size: 0.875em;
+    border-bottom: 1px solid $grey-lighter;
+  }
+}
+
+.knockout #mce-responses .response {
+  border-bottom-color: rgba($white, 0.3);
+}

web/app/themes/badegg/resources/views/layouts/app.blade.php

@@ -11,11 +11,13 @@
     @php(wp_body_open())
 
     <div id="app">
-      <a class="sr-only focus:not-sr-only" href="#main">
+      <a class="visually-hidden" href="#main">
-        {{ __('Skip to content') }}
+        {{ __('Skip to content', 'sage') }}
       </a>
 
-      @include('sections.header')
+      <div class="wrapper section-has-angle section-has-angle-bottom">
+
+        @include('sections.header.header')
 
         <main id="main" class="main">
           @yield('content')
@@ -27,7 +29,12 @@
           </aside>
         @endif
 
-      @include('sections.footer')
+        <div class="last-slice angle-slice-wrap bottom">
+          <div class="angle-slice small bottom right"></div>
+        </div>
+      </div>
+
+      @include('sections.footer.footer')
     </div>
 
     @php(do_action('get_footer'))

web/app/themes/badegg/resources/views/sections/footer/footer.js

@@ -0,0 +1,17 @@
+export default function Footer() {
+  const body = document.querySelector("body");
+  const footer = document.querySelector(".js-footer");
+  const links = footer.querySelectorAll("a");
+  const currentURL = location.protocol + '//' + location.host + location.pathname;
+
+  links.forEach(link => {
+    const hash = link.hash;
+    const href = link.href;
+
+    link.addEventListener("click", () => {
+      if(href.includes(currentURL)) {
+        body.classList.remove("menu-open");
+      }
+    });
+  });
+}

web/app/themes/badegg/resources/views/sections/header/header.js

@@ -0,0 +1,55 @@
+export default function Header() {
+  const body = document.querySelector("body");
+  const wrapper = document.querySelector(".wrapper");
+  const menuToggle = document.querySelector(".js-menu-toggle");
+  const menuClose = document.querySelector(".js-menu-close");
+
+  menuToggle.addEventListener("click", (e) => {
+    e.preventDefault();
+    body.classList.toggle("menu-open");
+
+    if(menuToggle.ariaExpanded == 'true') {
+      menuToggle.ariaExpanded = 'false';
+    } else {
+      menuToggle.ariaExpanded = 'true';
+    }
+
+    console.log(menuToggle.ariaExpanded);
+
+  });
+
+  menuClose.addEventListener("click", (e) => {
+    e.preventDefault();
+    body.classList.remove("menu-open");
+    menuToggle.ariaExpanded = 'false';
+
+    console.log(menuToggle.ariaExpanded);
+  });
+
+  document.addEventListener("keyup", function (event) {
+    if (event.key === "Escape") {
+      body.classList.remove("menu-open");
+      menuToggle.ariaExpanded = 'false';
+    }
+  });
+
+  document.addEventListener("scroll", () => {
+    const scrolled = document.scrollingElement.scrollTop;
+    const position = body.offsetTop;
+    const header = document.querySelector(".site-header");
+
+    if (scrolled > position + header.offsetHeight) {
+      body.classList.add("scrolled");
+    } else {
+      body.classList.remove("scrolled");
+    }
+  });
+
+  wrapper.addEventListener("click", (e) => {
+    const target = e.target;
+
+    if(!menuToggle.contains(target) && body.classList.contains("menu-open")) {
+      body.classList.remove("menu-open");
+    }
+  });
+}

web/app/themes/badegg/yarn.lock

@@ -1452,6 +1452,11 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-3.0.1.tgz#d84597fbc0f897240c12fc0a31e492b036c70e40"
   integrity sha512-NPljRHkq4a14YzZ3YD406uaxh7s0g6eAq3L9aLOWywoqe8PkYamAvtsh7KNX6c++ihDrJ0RiU+/z7rGnhlZ5ww==
 
+"@fortawesome/fontawesome-free@^7.0.1":
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-7.0.1.tgz#c1ac7f07ba2df47d1de7b7236fad25c4e6ca5076"
+  integrity sha512-RLmb9U6H2rJDnGxEqXxzy7ANPrQz7WK2/eTjdZqyU9uRU5W+FkAec9uU5gTYzFBH7aoXIw2WTJSCJR4KPlReQw==
+
 "@jest/schemas@^29.6.3":
   version "29.6.3"
   resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03"