Updating FA Pro banners & modals

4 files changed, 20 insertions, 11 deletions

diff --git a/src/_includes/modals/download.html b/src/_includes/modals/download.html
index 141d0c4be..b1102b526 100644
--- a/src/_includes/modals/download.html
+++ b/src/_includes/modals/download.html
@@ -9,6 +9,9 @@
           Download
         </h2>
       </div>
+      <h3 class="bg-fa5 margin-none padding-lg text-center">
+        September is your last chance to get Font Awesome Pro for just $40.
+      </h3>
       <div class="modal-body">
         <div class="text-lg margin-bottom-lg padding-bottom">
           Before you download, check out <b>Font Awesome Pro&mdash;</b>
@@ -52,10 +55,10 @@
           </div>
         </div>
 
-        <a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=september_last_chance&utm_content=download_modal" class="btn btn-success btn-lg btn-block">
-          <div>Pre-order now &amp; save big!</div>
-          <h2 class="margin-top-sm text-sans-serif margin-bottom-sm hidden-xs"><i class="fas fas-logo-o"></i>&nbsp; Font Awesome Pro</h2>
-          <h3 class="margin-top-sm text-sans-serif margin-bottom-sm visible-xs"><i class="fas fas-logo-o"></i>&nbsp; Font Awesome Pro</h3>
+        <a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_campaign=september_last_chance&utm_content=download_modal" class="btn btn-fa5 btn-lg btn-block">
+          <h3 class="margin-top margin-bottom strong">
+            Check out <span class="hidden-xs">Font Awesome</span><span class="hidden-sm hidden-md hidden-lg">FA</span> Pro! &nbsp;<i class="fas fas-external-link" aria-hidden="true"></i>
+          </h3>
         </a>
         <div class="text-center margin-top margin-bottom">or</div>
         <a class="btn btn-default btn-lg btn-block" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip"
diff --git a/src/_includes/modals/fa5.html b/src/_includes/modals/fa5.html
index 3625ae917..a11b1e240 100644
--- a/src/_includes/modals/fa5.html
+++ b/src/_includes/modals/fa5.html
@@ -3,13 +3,12 @@
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i><span class="close"></span></button>
-        <h3 class="modal-title" id="modal-fa5-label">Font Awesome Pro!</h3>
+        <h3 class="modal-title" id="modal-fa5-label">Font Awesome Pro</h3>
       </div>
+      <h3 class="bg-fa5 margin-none padding-lg text-center">
+        September is your last chance to get Font Awesome Pro for just $40.
+      </h3>
       <div class="modal-body">
-        <p class="lead">
-          September is your last chance to get FA Pro and <strong>ALL</strong> KS rewards for just $40!
-        </p>
-
         <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
         <div class="embed-container">
           <iframe id="fa5-iframe" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/video.html" frameborder="0" scrolling="no" allowfullscreen></iframe>
diff --git a/src/assets/less/site/banner-ad.less b/src/assets/less/site/banner-ad.less
index c0a264dd0..d8dfa3828 100644
--- a/src/assets/less/site/banner-ad.less
+++ b/src/assets/less/site/banner-ad.less
@@ -212,7 +212,7 @@
   }
 
   &.fa5 {
-    @fa5-bg: #489fdf;
+    @fa5-bg: #488dd8;
     background-color: @fa5-bg;
     border-bottom: rgba(0,0,0,0.2);
     .message-container { padding: 40px 0; }
diff --git a/src/assets/less/site/fa5.less b/src/assets/less/site/fa5.less
index 67cea2542..0fb42cd2a 100644
--- a/src/assets/less/site/fa5.less
+++ b/src/assets/less/site/fa5.less
@@ -1,5 +1,7 @@
+@fa5-color: #488dd8;
+
 .btn-fa5 {
-  .button-variant(#fff, #489fdf, mix(#000,#489fdf,10%));
+  .button-variant(#fff, @fa5-color, mix(#000,@fa5-color,10%));
   font-size: 21px;
 }
 
@@ -7,3 +9,8 @@
   background-color: rgba(255,255,255,.3);
   border-color: rgba(255,255,255,.15);
 }
+
+.bg-fa5 {
+  background-color: @fa5-color;
+  color: #fff;
+}