Merge pull request #2502 from mozilla/bug-1086950-fundraising-promos

Bug 1086950 - donate home page promo

bedrock/mozorg/templates/mozorg/home/home-new.html

@@ -68,7 +68,8 @@
     <nav id="nav-main" role="navigation">
       <span class="toggle" role="button" aria-controls="nav-main-menu" aria-expanded="false" tabindex="0">{{_('Menu')}}</span>
       <ul id="nav-main-menu">
-        <li class="first"><a data-name="mission" href="{{ url('mozorg.mission') }}">{{_('Mission')}}</a></li>
+        <li class="first"><a data-name="donate" href="https://sendto.mozilla.org/page/contribute/givenow-1page?preset=2&amp;source=mozillaorg_topNAV&amp;ref=EOYFR2014&amp;utm_campaign=EOYFR2014&amp;utm_source=mozilla.org&amp;utm_medium=referral&amp;utm_content=mozillaorg_topNAV">{{_('Donate')}}</a></li>
+        <li><a data-name="mission" href="{{ url('mozorg.mission') }}">{{_('Mission')}}</a></li>
         <li><a data-name="firefox" href="{{ url('firefox.desktop.index') }}">{{_('Firefox')}}</a></li>
         <li class="last"><a data-name="community" href="{{ url('mozorg.contribute') }}">{{_('Community')}}</a></li>
       </ul>
@@ -175,6 +176,17 @@ <h3>{{ _('The features <br>you love. <br>The privacy <br>you trust.') }}</h3>
           </a>
         </li>
       {% endif %}
+      {% if l10n_has_tag('fundraising_2014') %}
+        <li id="promo-11" class="item promo-large-landscape donate" tabindex="0" data-name="Donate to support the open web">
+          <h2 class="primary go">{{ _('Donate to Mozilla') }}</h2>
+          <a class="panel-link" href="https://sendto.mozilla.org/page/contribute/givenow-1page?preset=2&amp;source=mozillaorg_largeblock&amp;ref=EOYFR2014&amp;utm_campaign=EOYFR2014&amp;utm_source=mozilla.org&amp;utm_medium=referral&amp;utm_content=mozillaorg_largeblock">
+            <div class="secondary">
+              <h3>{{ _('Your gift helps us build the Internet the world needs.') }}</h3>
+              <p class="more">{{ _('Donate today') }}</p>
+            </div>
+          </a>
+        </li>
+      {% else %}
         <li id="promo-11" class="item promo-large-landscape support" tabindex="0" data-name="Help Mozilla users">
           <h2 class="primary go">{{ _('Help Mozilla users') }}</h2>
           <a class="panel-link" rel="external" href="https://support.mozilla.org/get-involved">
@@ -184,6 +196,7 @@ <h3>{{ _('Help millions <br>get the most from their <br>favorite browser.') }}</
             </div>
           </a>
         </li>
+      {% endif %}
         <li id="promo-12" class="item promo-face">
           {{ promo_face(4) }}
         </li>

media/css/mozorg/home/home-promo.less

@@ -815,30 +815,6 @@
     }
 }
 
-/****************************************************************************/
-// Open Standard
-.promo-large-portrait.open-standard,
-.promo-large-landscape.open-standard {
-    background: #0c99d5; // bright blue
-
-    h2 {
-        padding: 100px @baseLine 0 @baseLine;
-        margin-top: @baseLine * 2;
-        background-image: url(/media/img/home/voices/promos/open-standard/tos-logo.png);
-        background-position: top center;
-        background-repeat: no-repeat;
-        .background-size(67px, 85px);
-    }
-
-    h3 {
-        padding: (@baseLine * 5) @baseLine 0 @baseLine;
-    }
-}
-
-.promo-large-landscape.open-standard h3 {
-    padding-top: @baseLine * 2;
-}
-
 /****************************************************************************/
 // Mission
 .promo-large-portrait.mission,
@@ -899,6 +875,41 @@
     }
 }
 
+/****************************************************************************/
+// Donate
+.promo-large-landscape.donate {
+    background: #ffcd02; // yellow
+
+    h2 {
+        color: #555;
+        padding: 120px @baseLine 0 @baseLine;
+        margin-top: @baseLine;
+        background-image: url(/media/img/home/voices/promos/donate/donate.png);
+        background-position: top center;
+        background-repeat: no-repeat;
+        .background-size(110px, 110px);
+
+        &.go:after {
+            color: #555;
+            border-color: #555;
+        }
+    }
+
+    h3 {
+        color: #555;
+        margin-top: @baseLine * 2;
+    }
+
+    .more {
+        color: #555;
+        border-color: rgba(120, 120, 120, .5);
+
+        &:hover {
+            border-color: #555;
+        }
+    }
+}
+
 /****************************************************************************/
 // Firefox Desktop
 .promo-large-portrait.firefox-desktop {
@@ -1316,7 +1327,7 @@
         // force "Teach the Web" to break onto 2 lines in Engligh only.
         .promo-large-landscape.webmaker {
             h2 {
-                padding: 90px (@baseLine * 2) 0 (@baseLine * 2);
+                padding: 120px (@baseLine * 2) 0 (@baseLine * 2);
             }
             h3 {
                 padding: (@baseLine * 5) @baseLine 0 @baseLine;
@@ -1648,14 +1659,6 @@
        only screen and (                min-resolution: 1.5dppx),
        only screen and (                min-resolution: 144dpi) {
 
-    // Open Standard
-    .promo-large-portrait.open-standard {
-        h2 {
-            background-image: url(/media/img/home/voices/promos/open-standard/tos-logo-high-res.png);
-            .background-size(67px, 85px);
-        }
-    }
-
     // Webmaker
     .promo-large-landscape.webmaker {
         h2 {
@@ -1721,4 +1724,12 @@
         }
     }
 
+    // Donate
+    .promo-large-landscape.donate {
+        h2 {
+            background-image: url(/media/img/home/voices/promos/donate/donate-high-res.png);
+            .background-size(110px, 110px);
+        }
+    }
+
 }