Refresh: misc tweaks and refinements (#15654)

* Adjust font sizes on some Firefox pages [#15416]
* Update fonts and icons in some footer elements.
* Some minor refactoring and tidying in footer.
* Clean up footer media queries [fix #15668]
* Fix Mozilla.ai brand term

bedrock/base/templates/includes/protocol/footer/footer-refresh.html

@@ -92,7 +92,9 @@ <h2 class="moz24-footer-heading-social">{{ ftl('footer-refresh-follow-firefox')
     <div class="moz24-footer-actions">
       <a class="moz24-footer-donate" href="{{ donate_url(location='moco-donate-footer') }}" data-link-type="button" data-link-text="Donate">
         <span class="mzp-c-button-icon-start">
-          <svg height="640" viewBox="0 0 896.173 896.173" width="640" xmlns="http://www.w3.org/2000/svg"><switch><path d="m415.586 381.044v-65.006h65.001v65.006zm151.61-179.868c-34.105 0-63.39 12.422-86.609 27.824v87.038c4.788-5.861 12.53-14.509 22.611-22.98 21.228-17.838 42.76-26.882 63.998-26.882 47.765 0 86.625 40.383 86.625 90.02 0 72.488-58.765 143.314-108.062 189.965-37.953 35.915-76.426 63.436-97.672 77.68-21.246-14.244-59.72-41.765-97.673-77.68-49.297-46.651-108.062-117.477-108.062-189.964 0-49.638 38.86-90.021 86.625-90.021 21.239 0 42.77 9.044 63.998 26.882 10.082 8.472 17.823 17.119 22.611 22.98v-87.038c-23.218-15.402-52.503-27.824-86.609-27.824-83.606 0-151.625 69.542-151.625 155.02 0 43.355 14.14 88.366 42.027 133.784 21.258 34.62 50.627 69.704 87.29 104.273 61.41 57.902 122.133 94.58 124.688 96.112l7.735 4.632h17.989l7.735-4.632c2.555-1.533 63.278-38.21 124.687-96.112 36.664-34.57 66.033-69.652 87.29-104.273 27.888-45.418 42.028-90.429 42.028-133.783 0-85.479-68.019-155.021-151.625-155.021"/></switch></svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path fill="currentColor" d="M16.34 2.93c-1.26 0-2.34.46-3.2 1.03-.11.09-.57.43-.84.82h-.71c-.28-.4-.75-.75-.85-.81s-.02-.01-.03-.02h-.01c-.85-.56-1.92-1-3.16-1-3.09 0-5.6 2.57-5.6 5.73 0 1.6.52 3.26 1.55 4.94.79 1.28 1.87 2.57 3.22 3.85 2.27 2.14 4.51 3.49 4.61 3.55l.29.17h.66l.29-.17c.09-.06 2.34-1.41 4.61-3.55 1.35-1.28 2.44-2.57 3.22-3.85 1.03-1.68 1.55-3.34 1.55-4.94 0-3.16-2.51-5.73-5.6-5.73Zm-.8 12.74c-1.4 1.33-2.82 2.34-3.61 2.87-.78-.53-2.21-1.54-3.61-2.87-1.82-1.72-3.99-4.34-3.99-7.02 0-1.83 1.44-3.33 3.2-3.33.78 0 1.58.33 2.36.99.37.31.66.63.83.85s0 .01 0 .01v2.39h2.4V7.15c.18-.22.46-.53.83-.84.78-.66 1.58-.99 2.36-.99 1.76 0 3.2 1.49 3.2 3.33 0 2.68-2.17 5.29-3.99 7.02Z"/>
+          </svg>
         </span>
         <span class="mzp-c-button-icon-text">{{ ftl('footer-refresh-donate') }}</span>
       </a>

bedrock/base/templates/includes/protocol/lang-switcher-refresh.html

@@ -8,8 +8,8 @@
 
  {% if available_languages|length > 1 %}
    <form id="lang_form" class="moz24-c-language-switcher" method="get" action="#">
+    <a class="mzp-c-language-switcher-link" href="{{ url('mozorg.locales') }}">{{ ftl('footer-refresh-all-languages', fallback='footer-refresh-language') }}</a>
     <label for="page-language-select">{{ ftl('footer-refresh-language') }}</label>
-    <a class="mzp-c-language-switcher-link" href="{{ url('mozorg.locales') }}">{{ ftl('footer-refresh-language') }}</a>
      <select id="page-language-select" class="mzp-js-language-switcher-select" name="lang" dir="ltr" data-testid="footer-language-select">
        {% for code, label in available_languages|dictsort -%}
          {# Don't escape the label as it may include entity references

bedrock/base/templates/includes/protocol/navigation/menus-refresh/about-us.html

@@ -65,7 +65,7 @@ <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-mozilla-foundation'
             <li>
               <section class="m24-c-menu-item">
                 <a class="m24-c-menu-item-link" href="https://www.mozilla.ai/?{{ utm_params }}" data-link-text="Mozilla.ai" data-link-position="topnav - about">
-                  <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-mozilla-ai-v2') }}</h4>
+                  <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-mozilla-ai-v3') }}</h4>
                 </a>
               </section>
             </li>

bedrock/firefox/templates/firefox/browsers/chromebook.html

@@ -42,7 +42,7 @@
     media_class='mzp-l-split-h-center'
   ) %}
   <div class="mzp-c-logo mzp-t-logo-lg mzp-t-product-firefox"></div>
-  <h1 class="mzp-u-title-xl">{{ ftl('browsers-chromebook-get-firefox-browser') }}</h1>
+  <h1 class="mzp-u-title-lg">{{ ftl('browsers-chromebook-get-firefox-browser') }}</h1>
   <p>{{ ftl('browsers-chromebook-so-youve-got') }}</p>
 
   <div class="mzp-c-menu-list mzp-t-cta mzp-t-download" id="chromebook-download-list">

bedrock/firefox/templates/firefox/browsers/mobile/android.html

@@ -62,7 +62,7 @@
     media_after=True
   ) %}
     <div class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-firefox">{{ ftl('firefox-ios-firefox-browser') }}</div>
-    <h1 class="mzp-u-title-xl">{{ ftl('mobile-android-short-cut-the-internet') }}</h1>
+    <h1 class="mzp-u-title-lg">{{ ftl('mobile-android-short-cut-the-internet') }}</h1>
     <p class="c-tagline">{{ ftl('mobile-android-see-all-your-open-tabs') }}</p>
     <p class="c-cta">
       {{ google_play_button(href=android_url, id='playStoreLink-primary') }}

bedrock/firefox/templates/firefox/browsers/mobile/focus.html

@@ -58,7 +58,7 @@
     media_after=True
   ) %}
     <div class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-{% if LANG=='de' %}klar{% else %}focus{% endif %}">{{ ftl('mobile-focus-firefox-focus') }}</div>
-    <h1 class="mzp-u-title-xl">{{ ftl('mobile-focus-simply-private-mobile') }}</h1>
+    <h1 class="mzp-u-title-lg">{{ ftl('mobile-focus-simply-private-mobile') }}</h1>
     <p class="c-tagline">{{ ftl('mobile-focus-firefox-focus-dedicated-with-v2') }}</p>
     <p>{{ ftl('mobile-focus-firefox-focus-is-available') }}</p>
 

bedrock/firefox/templates/firefox/browsers/mobile/ios.html

@@ -62,7 +62,7 @@
     media_after=True
   ) %}
     <div class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-firefox">{{ ftl('mobile-ios-firefox-browser') }}</div>
-    <h1 class="mzp-u-title-xl">
+    <h1 class="mzp-u-title-lg">
       {{ ftl('mobile-ios-get-to-your-go-to') }}
     </h1>
     <p class="c-tagline">{{ self.page_desc() }}</p>

bedrock/firefox/templates/firefox/browsers/quantum.html

@@ -30,7 +30,7 @@
     block_class='mzp-l-split-hide-media-on-sm-md'
   ) %}
   <div class="mzp-c-logo mzp-t-logo-lg mzp-t-product-firefox"></div>
-  <h1 class="mzp-u-title-xl">{{ ftl('the-latest-firefox') }}</h1>
+  <h1 class="mzp-u-title-lg">{{ ftl('the-latest-firefox') }}</h1>
   <p>{{ ftl('firefox-quantum-was') }}</p>
   {{ download_firefox_thanks() }}
   <p><a class="mzp-c-cta-link" href="https://blog.mozilla.org/blog/2017/11/14/introducing-firefox-quantum/?utm_source=mozilla.org-firefox-browsers-quantum&utm_medium=referral&utm_campaign=seo-quantum&amp;utm_content=hero&amp;entrypoint=mozilla.org-firefox-browsers-quantum">{{ ftl('learn-more-about') }}</a></p>

bedrock/firefox/templates/firefox/faq.html

@@ -57,7 +57,7 @@
       media_after=True
   ) %}
   <div class="mzp-c-logo mzp-t-logo-lg mzp-t-product-firefox"></div>
-  <h1 class="mzp-u-title-xl">{{ ftl('firefox-faq')}}</h1>
+  <h1 class="mzp-u-title-lg">{{ ftl('firefox-faq')}}</h1>
   <p>{{ ftl('whether-you-searched-independant') }}</p>
   {{ download_firefox_thanks() }}
   {% endcall %}

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

@@ -257,7 +257,7 @@ <h2>{{ ftl('home-join-us-in-shaping') }}</h2>
         media_after=False
     ) %}
     <h2>{{ ftl('home-so-what-is-mozilla') }}</h2>
-    <p>{{ ftl('home-at-its-core', ventures=moz_ventures, mozai=moz_ai) }}</p>
+    <p>{{ ftl('home-at-its-core-v2', fallback='home-at-its-core', ventures=moz_ventures, mozai=moz_ai) }}</p>
     <a href="https://foundation.mozilla.org/{{ utm_params }}" rel="external noopener" class="mzp-c-button">
       {{ ftl('home-learn-about-mofo') }}
     </a>

l10n/en/brands.ftl

@@ -123,7 +123,10 @@
 -brand-name-mozilla-account = Mozilla account
 -brand-name-mozilla-accounts = Mozilla accounts
 -brand-name-mozilla-social = Mozilla.social
--brand-name-mozilla-ai = Mozilla.ai
+
+# Obsolete string (expires: 2025-01-05)
+-brand-name-mozilla-ai = Mozilla AI
+-brand-name-mozilla-ai-v2 = Mozilla.ai
 -brand-name-mozilla-ventures = Mozilla Ventures
 -brand-name-rise25 = Rise25
 -brand-name-thunderbird = Thunderbird

l10n/en/footer-refresh.ftl

@@ -39,6 +39,7 @@ footer-refresh-websites-cookies = Cookies
 footer-refresh-websites-legal = Legal
 footer-refresh-community-participation-guidelines = Community Participation Guidelines
 footer-refresh-about-this-site = About this site
+footer-refresh-all-languages = All languages
 footer-refresh-language = Language
 footer-refresh-primary-nav-aria-label = Footer primary
 footer-refresh-secondary-nav-aria-label = Footer secondary

l10n/en/mozorg/home-new.ftl

@@ -42,10 +42,14 @@ home-read-more = Read more
 
 home-so-what-is-mozilla = So, what is { -brand-name-mozilla }?
 
+# Obsolete string (expires: 2025-01-05)
+home-at-its-core = At its core, { -brand-name-mozilla } is an activist organization led by the { -brand-name-mozilla-foundation } that makes change in the world through a variety of ventures including { -brand-name-mozilla-corporation }, MZLA, <a {$ventures}>{ -brand-name-mozilla-ventures }</a> and <a {$mozai}>{ -brand-name-mozilla-ai }</a>. How are we different? Because we’re mission-driven, it means we have the freedom to make all of our decisions based on what’s best for the internet and for everyone online, not based on the demands of shareholders — we don’t actually have any of those.
+
 # Variables
 #   $ventures - link to https://mozilla.vc/
 #   $mozai - link to https://mozilla.ai/
-home-at-its-core = At its core, { -brand-name-mozilla } is an activist organization led by the { -brand-name-mozilla-foundation } that makes change in the world through a variety of ventures including { -brand-name-mozilla-corporation }, MZLA, <a {$ventures}>{ -brand-name-mozilla-ventures }</a> and <a {$mozai}>{ -brand-name-mozilla-ai }</a>. How are we different? Because we’re mission-driven, it means we have the freedom to make all of our decisions based on what’s best for the internet and for everyone online, not based on the demands of shareholders — we don’t actually have any of those.
+home-at-its-core-v2 = At its core, { -brand-name-mozilla } is an activist organization led by the { -brand-name-mozilla-foundation } that makes change in the world through a variety of ventures including { -brand-name-mozilla-corporation }, MZLA, <a {$ventures}>{ -brand-name-mozilla-ventures }</a> and <a {$mozai}>{ -brand-name-mozilla-ai-v2 }</a>. How are we different? Because we’re mission-driven, it means we have the freedom to make all of our decisions based on what’s best for the internet and for everyone online, not based on the demands of shareholders — we don’t actually have any of those.
+
 
 home-learn-about-mofo = Learn about the { -brand-name-mozilla-foundation }
 

l10n/en/navigation_refresh.ftl

@@ -19,8 +19,16 @@ navigation-refresh-innovation-projects-v2 = Innovation Projects
 navigation-refresh-blog = Blog
 navigation-refresh-our-mission = Our Mission
 navigation-refresh-our-work = Our Work
+
+# Obsolete string (expires: 2025-01-05)
 navigation-refresh-mozilla-ai = { -brand-name-mozilla } AI
+
+# Obsolete string (expires: 2025-01-05)
 navigation-refresh-mozilla-ai-v2 = { -brand-name-mozilla-ai }
+
+navigation-refresh-mozilla-ai-v3 = { -brand-name-mozilla-ai-v2 }
+
+# Obsolete string (expires: 2025-01-05)
 navigation-refresh-mozilla-ventures = { -brand-name-mozilla } Ventures
 navigation-refresh-mozilla-ventures-v2 = { -brand-name-mozilla-ventures }
 navigation-refresh-mozilla-advertising = { -brand-name-mozilla } Advertising

media/css/firefox/enterprise/landing.scss

@@ -84,7 +84,7 @@ $image-path: '/media/protocol/img';
         position: relative;
 
         .mzp-c-split-title {
-            @include text-title-xl;
+            @include text-title-lg;
             margin-bottom: $spacing-md;
 
             @media #{$mq-md} {

media/css/m24/components/footer-newsletter.scss

@@ -35,7 +35,7 @@ $max-footer-content-width: $content-max;
         padding-bottom: $spacer-lg;
         position: relative;
 
-        @media(min-width: $screen-md) {
+        @media #{$mq-md} {
             align-items: flex-start;
             flex-direction: row;
         }
@@ -48,11 +48,11 @@ $max-footer-content-width: $content-max;
         align-items: flex-start;
         margin-bottom: $grid-margin;
 
-        @media(min-width: $screen-md) {
+        @media #{$mq-md} {
             width: grid(5);
         }
 
-        @media(min-width: $screen-lg) {
+        @media #{$mq-lg} {
             width: grid(4);
             flex-wrap: nowrap;
         }
@@ -71,7 +71,7 @@ $max-footer-content-width: $content-max;
         @include bidi(((margin-right, $spacer-sm, 0), (margin-left, 0, $spacer-sm)));
         margin-bottom: $spacer-md;
 
-        @media(min-width: $screen-lg) {
+        @media #{$mq-lg} {
             @include bidi(((margin-right, $spacer-xl, 0), (margin-left, 0, $spacer-xl)));
         }
 
@@ -82,11 +82,11 @@ $max-footer-content-width: $content-max;
     .moz24-newsletter {
         width: 100%;
 
-        @media(min-width: $screen-md) {
+        @media #{$mq-md} {
             width: grid(6);
         }
 
-        @media(min-width: $screen-lg) {
+        @media #{$mq-lg} {
             width: grid(8);
         }
 
@@ -97,7 +97,6 @@ $max-footer-content-width: $content-max;
         .mzp-c-newsletter-thanks {
             h3 {
                 color: $m24-color-black;
-                font-family: $secondary-font;
             }
 
             p {
@@ -127,7 +126,7 @@ $max-footer-content-width: $content-max;
             font-family: $primary-font;
             text-align: start;
 
-            @media(min-width: $screen-lg) {
+            @media #{$mq-lg} {
                 display: inline-grid;
 
                 &:first-of-type {
@@ -168,7 +167,7 @@ $max-footer-content-width: $content-max;
             width: 100%;
             font-family: $primary-font;
 
-            @media(min-width: $screen-md) {
+            @media #{$mq-md} {
                 min-width: 100%;
             }
 
@@ -185,7 +184,7 @@ $max-footer-content-width: $content-max;
             background-image: url('/media/img/logos/mozilla/footer-refresh/icon-arrow-down.svg');
             background-repeat: no-repeat;
 
-            @media(min-width: $screen-lg) {
+            @media #{$mq-lg} {
                 min-width: 100%;
             }
         }
@@ -194,7 +193,7 @@ $max-footer-content-width: $content-max;
     .mzp-c-newsletter-details-inner {
         max-width: 100%;
 
-        @media(min-width: $screen-lg) {
+        @media #{$mq-lg} {
             display: grid;
             grid-template-columns: 1fr 1fr;
             grid-template-rows: 30px 45px 75px;
@@ -208,7 +207,7 @@ $max-footer-content-width: $content-max;
             font-family: $primary-font;
             text-align: start;
 
-            @media(min-width: $screen-lg) {
+            @media #{$mq-lg} {
                 display: inline-grid;
 
                 &:first-of-type {
@@ -225,7 +224,7 @@ $max-footer-content-width: $content-max;
             &:has(> label.mzp-u-inline) {
                 margin: $spacer-lg 0 $spacer-md;
 
-                @media(min-width: $screen-lg) {
+                @media #{$mq-lg} {
                     grid-column-start: 1;
                     grid-column-end: 3;
                 }
@@ -258,11 +257,10 @@ $max-footer-content-width: $content-max;
         button {
             border: $border-width solid $m24-color-black;
             border-radius: 0;
-            font-family: $secondary-font;
             position: relative;
             max-width: 800px;
             width: 100%;
-            font-weight: 500;
+            font-weight: 600;
 
             &:hover,
             &:focus-visible {
@@ -275,7 +273,7 @@ $max-footer-content-width: $content-max;
                 color: $m24-color-black;
             }
 
-            @media(min-width: $screen-md) {
+            @media #{$mq-md} {
                 width: fit-content;
                 display: flex;
                 justify-content: flex-start;