Bring in Spencer's styles

style.css

@@ -4,6 +4,127 @@
 h2.wdn-brand {
   text-transform: uppercase;
 }
+.icon-band {
+  text-align: center;
+  font-family: "Gotham SSm A", "Gotham SSm B", Verdana, "Verdana Ref", Geneva, Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  text-transform: uppercase;
+  font-size: 1.1em;
+  line-height: 1.4em;
+}
+.icon-band img {
+  max-height: 90px;
+  margin-bottom: 1em;
+}
+.icon-band a {
+  font-weight: bold;
+}
+/* Factoids **********************/
+.view-factoids {
+  background-color: #454545;
+  height: 320px;
+}
+.view-factoids .wdn-col {
+  position: relative;
+}
+.view-factoids .wdn-col .red-circle {
+  height: 0;
+  padding: 40% 0 50% 0;
+  background-color: #d2232a;
+  border-radius: 100%;
+  width: 90%;
+  top: 0;
+  position: relative;
+  left: 0;
+}
+.view-factoids .wdn-col .red-circle .ring {
+  height: 0;
+  padding: 12% 0 77% 0;
+  border: solid 2px #e970a3;
+  border-radius: 100%;
+  width: 90%;
+  top: 4%;
+  left: 5%;
+  position: absolute;
+}
+.view-factoids .views-field-field-number {
+  font-family: "Tungsten A", "Tungsten B", "HelveticaNeueCondensed", "HelveticaNeue-Condensed", "Helvetica Neue Condensed", "HelveticaNeueRomanCondensed", "HelveticaNeue-Roman-Condensed", "Helvetica Neue Roman Condensed", "Arial Narrow", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  width: 80%;
+  color: #fff;
+  text-align: center;
+  font-size: 4em;
+  line-height: 1em;
+  word-break: break-word;
+  position: relative;
+  left: 10%;
+}
+.view-factoids .views-field-title {
+  left: 10%;
+  top: 0.5em;
+  width: 80%;
+  color: #fff;
+  text-align: center;
+  position: relative;
+  font-size: .75em;
+  font-family: "Gotham SSm A", "Gotham SSm B", Verdana, "Verdana Ref", Geneva, Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+/** Black Bands **********************/
+.black-button-band,
+.black-band {
+  background-color: #222;
+  color: #fff;
+}
+.black-band {
+  margin-top: -0.6em;
+}
+.black-band .wdn-button {
+  font-size: 1em;
+}
+.black-button-band,
+.black-band h3 {
+  font-size: 1.25em;
+  color: #fff;
+}
+.black-button-band ul li.wdn-col {
+  margin-bottom: 1em;
+  text-align: center;
+}
+.black-button-band ul li.wdn-col a {
+  color: #fff;
+  border-bottom: none;
+  list-style: none;
+  font-family: "Gotham SSm A", "Gotham SSm B", Verdana, "Verdana Ref", Geneva, Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  border: solid 2px #fff;
+  padding: 1em;
+  text-align: center;
+  display: inline-block;
+  display: flex;
+  align-items: center;
+  font-size: .7em;
+  height: 6em;
+  line-height: 1.4em;
+  max-width: 118px;
+}
+/** Image headers **********************/
+.stretch-band {
+  position: relative;
+}
+.stretch-band .image-overlay {
+  position: absolute;
+  top: 1em;
+  text-align: center;
+  width: 100%;
+}
+.stretch-band .image-overlay h2 {
+  font-size: 3.5em;
+}
 /******************************************************************************************************
  * Home
  ******************************************************************************************************/
@@ -100,8 +221,10 @@ h2.wdn-brand {
   color: #fff;
   border-radius: 4px;
   text-transform: uppercase;
-  letter-spacing: 0.02em;
   display: inline-block;
+  font-size: .75em;
+  text-align: center;
+  width: 100%;
 }
 .view-impact .views-row:not(:last-child) {
   border-bottom: 1px solid #bbb;
@@ -116,6 +239,13 @@ h2.wdn-brand {
 .view-featured-questions-answers .field-name-body p {
   margin-top: 0;
 }
+.view-featured-questions-answers .view-content .wdn-button {
+  width: 100%;
+  text-align: left;
+  padding-left: 30px;
+  background-image: url('df');
+  background-repeat: no-repeat;
+}
 /******************************************************************************************************
  * Educational Programs
  ******************************************************************************************************/

style.less

@@ -10,6 +10,125 @@ h2.wdn-brand {
   text-transform: uppercase;
 }
 
+.icon-band {
+  text-align: center;
+  .sans-serif-font();
+  text-transform: uppercase;
+  font-size: 1.1em;
+  line-height: 1.4em;
+
+  img {
+    max-height: 90px;
+    margin-bottom: 1em;
+  }
+  a {
+    //color: #474746;
+    font-weight: bold;
+  }
+}
+
+/* Factoids **********************/
+.view-factoids {
+  background-color: #454545;
+  height: 320px;
+
+  .wdn-col {
+    position: relative;
+  }
+  .wdn-col .red-circle {
+    height: 0;
+    padding: 40% 0 50% 0;
+    background-color: #d2232a;
+    border-radius: 100%;
+    width: 90%;
+    top: 0;
+    position: relative;
+    left: 0;
+  }
+  .wdn-col .red-circle .ring {
+    height: 0;
+    padding: 12% 0 77% 0;
+    border: solid 2px #e970a3;
+    border-radius: 100%;
+    width: 90%;
+    top: 4%;
+    left: 5%;
+    position: absolute;
+  }
+  .views-field-field-number {
+    .brand-font();
+    width: 80%;
+    color: #fff;
+    text-align: center;
+    font-size: 4em;
+    line-height: 1em;
+    word-break: break-word;
+    position: relative;
+    left: 10%;
+  }
+  .views-field-title {
+    left: 10%;
+    top: 0.5em;
+    width: 80%;
+    color: #fff;
+    text-align: center;
+    position: relative;
+    font-size: .75em;
+    .sans-serif-font();
+  }
+}
+
+/** Black Bands **********************/
+.black-button-band, .black-band {
+  background-color: #222;
+  color: #fff;
+}
+.black-band {
+  margin-top: -.6em;
+}
+.black-band .wdn-button {
+  font-size: 1em;
+}
+.black-button-band, .black-band h3 {
+  font-size: 1.25em;
+  color: #fff;
+}
+.black-button-band ul li.wdn-col {
+  margin-bottom: 1em;
+  text-align: center;
+}
+.black-button-band ul li.wdn-col a {
+  color: #fff;
+  border-bottom: none;
+  list-style: none;
+  .sans-serif-font();
+  border: solid 2px #fff;
+  padding: 1em;
+  text-align: center;
+  display: inline-block;
+  display: flex;
+  align-items: center;
+  font-size: .7em;
+  height: 6em;
+  line-height: 1.4em;
+  max-width: 118px;
+}
+
+
+/** Image headers **********************/
+.stretch-band {
+  position: relative;
+
+  .image-overlay {
+    position: absolute;
+    top: 1em;
+    text-align: center;
+    width: 100%;
+  }
+  .image-overlay h2 {
+    font-size: 3.5em;
+  }
+}
 
 /******************************************************************************************************
  * Home
@@ -110,8 +229,10 @@ h2.wdn-brand {
       color: #fff;
       border-radius: 4px;
       text-transform: uppercase;
-      letter-spacing: 0.02em;
       display: inline-block;
+      font-size: .75em;
+      text-align: center;
+      width: 100%;
     }
   }
   .views-row:not(:last-child) {
@@ -133,6 +254,14 @@ h2.wdn-brand {
       margin-top: 0;
     }
   }
+
+  .view-content .wdn-button {
+    width: 100%;
+    text-align: left;
+    padding-left: 30px;
+    background-image: url('df');
+    background-repeat: no-repeat;
+  }
 }