Bottom feature updates

css-compiled/template.css

@@ -214,7 +214,8 @@ b, strong, label, th {
   bottom: 0;
   left: 0;
   color: #999;
-  text-align: center; }
+  text-align: center;
+  z-index: 1; }
   #footer a:hover {
     color: #fff; }
   #footer .totop {
@@ -889,6 +890,30 @@ ul.pagination {
       .modular .features.big .feature-content p {
         padding: 0; }
 
+.modular .bottom {
+  text-align: center; }
+  .modular .bottom:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .modular .bottom h2 {
+    padding-top: 3rem;
+    margin: 0;
+    line-height: 100%;
+    color: #656161; }
+  .modular .bottom p {
+    margin: 1rem 0; }
+    @media only all and (max-width: 47.938em) {
+      .modular .bottom p {
+        font-size: 1rem; } }
+  .modular .bottom .button {
+    background-color: #87b672;
+    color: #FFFFFF;
+    font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+    border-radius: 0;
+    box-shadow: none;
+    font-size: 1rem; }
+
 .callout {
   background: #EEEEEE;
   padding: 2rem 0.938rem;

scss/template/_footer.scss

@@ -9,6 +9,7 @@
 	@extend .padding-horiz;
 	color: #999;
 	text-align: center;
+	z-index: 1;
 
 	a:hover {
 		color: #fff;

scss/template/modular/_all.scss

@@ -1,5 +1,6 @@
 @import "showcase";
 @import "features";
+@import "bottom";
 @import "text";
 
 .modular {

scss/template/modular/_bottom.scss

@@ -0,0 +1,34 @@
+// Modular Showcase styling
+.modular {
+    .bottom {
+        text-align: center;
+        @include clearfix;
+
+        h2 {
+            padding-top: 3rem;
+            margin: 0;
+            line-height: 100%;
+            color: $light-gray; 
+        }
+
+        p {
+            margin: 1rem 0;
+
+            @include breakpoint(mobile-only) {
+                font-size: $core-font-size;
+            }
+        }
+
+        .button {
+            background-color: $core-accent;
+            color: $header-text;
+            font-family: $font-family-header;
+            border-radius: $border-radius;
+            box-shadow: none;
+            font-size: $core-font-size;
+        }
+
+
+    }
+
+}

templates/modular/bottom.html.twig

@@ -0,0 +1,7 @@
+<div class="modular-row bottom {{ page.header.class}}">
+    {{ content }}
+    {% for button in page.header.buttons %}
+        <a class="button{% if button.primary %} primary{% endif %}" href="{{ button.url }}">{{ button.text }}</a>
+    {% endfor %}
+    </div>
+</div>