styling updates; still needs assets/

_scss/helpers/utilities.scss

@@ -20,12 +20,16 @@ body {
   font-weight: 400;
 }
 
+.main-area {
+  max-width: 500px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
 
 // General container
 .container {
   width: 100%;
-  padding-right: 15px;
-  padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
 }
@@ -45,15 +49,14 @@ body {
 .btn-main {
   display: inline-block;
   font-weight: 600;
-  color: $white;
   text-align: center;
   vertical-align: middle;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  background-color: $royal-blue;
-  border: 1px solid $royal-blue;
+  background-color: $gold;
+  border: 1px solid $gold;
   padding: 1.8em 3.4em;
   font-size: 12px;
   letter-spacing: 1px;
@@ -61,8 +64,9 @@ body {
   border-radius: 50rem;
   transition: all .3s ease;
   text-decoration: none;
+  width: 100%;
   &:hover {
-    background-color: lighten($royal-blue, 5%);
+    background-color: lighten($gold, 5%);
   }
   margin-bottom: 10px;
 }
@@ -100,10 +104,10 @@ body {
 
 // Spacing utility classes
 .mb-2 {
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 .mt-2 {
-  margin-top: 24px;
+  margin-top: 16px;
 }
 
 

_scss/helpers/variables.scss

@@ -2,6 +2,7 @@
 $white:      #ffffff;
 $black:      #000000;
 $dark-gray:  #242424;
+$light-gray:  #D9D9D9;
 
 // Brand colors
 $gold:       #FFDF3F;

_scss/pages/home.scss

@@ -11,22 +11,22 @@ body {
 // -------------------------
 a:link {
   text-decoration: none;
-  color: white;
+  color: black;
 }
 
 a:visited {
   text-decoration: none;
-  color: white;
+  color: black;
 }
 
 a:hover {
   text-decoration: underline;
-  color: white;
+  color: black;
 }
 
 a:active {
   text-decoration: underline;
-  color: white;
+  color: black;
 }
 
 .darklink:link {
@@ -49,27 +49,10 @@ a:active {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding-top: 40px;
-    @media (max-width: 576px) {
-      flex-direction: column;
-      padding-top: 30px;
-    }
-  }
-  .header-logo {
-    display: flex;
-    align-items: center;
-    &-text {
-      margin-left: 15px;
-      p {
-        font-size: 21px;
-        font-weight: 700;
-      }
-    }
+    flex-direction: column;
   }
   .header-menu {
-    @media (max-width: 576px) {
-      margin-top: 20px;
-    }
+    margin-top: 20px;
     &-list {
       padding-left: 0;
       list-style: none;
@@ -91,33 +74,109 @@ a:active {
 // Content Styles
 // -------------------------
 .content-area {
+  background-color: white;
+  border-top-left-radius: 50vw;
+  border-top-right-radius: 50vw;
+  border-bottom-left-radius: 50vw;
+  border-bottom-right-radius: 50vw;
+  padding-bottom: Min(50vw, 250px);
+  &-topper {
+    margin-top: 175px;
+    height: Min(50vw, 250px);
+    text-align: center;
+    .topper-img {
+      position: relative;
+      top: -170px;
+    }
+    .content-title {
+      position: relative;
+      top: -150px;
+      margin-left: 15%;
+      margin-right: 15%;
+      font-size: 36px;
+      font-weight: 800;
+      @media (max-width: 500px) {
+        font-size: 28px;
+      }
+    }
+  }
   &-wrapper {
     margin-top: 30px;
-    min-height: calc(100vh - 202px);  // take up space above the footer
     margin-bottom: 30px;
-    .content-title {
-      font-size: 42px;
-      font-weight: 800;
-      @media (max-width: 768px) {
-        font-size: 36px;
+    margin-left: 30px;
+    margin-right: 30px;
+    .content-subtitle {
+      font-size: 20px;
+      font-weight: bold;
+      text-align: left;
+    }
+    .split-content {
+      display: flex;
+    }
+    .left-content {
+      width: 65%;
+    }
+    .right-bleed {
+      width: 35%;
+      img {
+        height: 100%;
       }
     }
     .content-text {
-      br {
-        @media (max-width: 768px) {
-          display: none;
-        }
-      }
+      text-align: left;
+    }
+    // Expander per: https://www.digitalocean.com/community/tutorials/css-collapsible
+    input[type='checkbox'] {
+      display:none;
+    }
+    .lbl-toggle {
+      display: block;
+      cursor: pointer;
+      transition: all 0.5s ease-out;
+    }
+    .lbl-toggle::before {
+      content: ' ';
+      display: inline-block;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-left: 5px solid currentColor;
+      vertical-align: middle;
+      margin-right: .7rem;
+      transform: translateY(-2px);
+      transition: transform .5s ease-out;
+    }    
+    .content-expander {
+      border-bottom-color: $light-gray;
+      border-bottom-style: solid;
+      border-bottom-width: 1px;
+      padding: 10px;
+      width: 100%;
+      text-align: left;
+      font-weight: 600;
+      font-size: 14px;
+    }
+    .toggle:checked + .lbl-toggle + .content-expanded {
+      max-height: 100vh;
+      overflow: visible;
+    }
+    .toggle:checked + .lbl-toggle::before {
+      transform: rotate(90deg) translateX(-3px);
+    }
+    .content-expanded {
+      max-height: 0px;
+      overflow: hidden;
+      transition: max-height .5s ease-in-out;
+      width: 100%;
+      margin-top: 20px;
+      text-align: left;
+      font-size: 13px;
     }
     .content-img {
-      margin: 55px 0 45px;
-      @media (max-width: 768px) {
-        margin: 40px 0;
-      }
       img {
-        display: block;
-        margin: 0 auto;
-        max-width: 70%;
+        margin-top: 10px;
+        position: relative;
+        left: -20vw;
+        width: 150%;
       }
     }
   }
@@ -129,7 +188,6 @@ a:active {
 // -------------------------
 .footer-area {
   font-family: $footer-font-family;
-  background-color: $shade-gold;
   padding: 35px 0;
 }