Update wordmarks and logos (#15975)

* Replace Mozilla logo on contribute page

* Replace mozm trademark with symbol trademark

* Replace mozilla 256 with m24 og

* Remove images now hidden by switch logic

* Move m24 favicons to root of folder

* Update careers images

* Remove old m styling in vpn heart image

* Replace updated newsletter card image

* Update location copy

Images could be offices or coworking spaces

* Optimize careers footer image

* Fix images in updated newsletter cards

Author: maureenlholland

app.json

@@ -3,7 +3,7 @@
   "description": "Demo deployments for changes to Mozilla Bedrock.",
   "website": "https://www.mozilla.org",
   "repository": "https://github.com/mozilla/bedrock",
-  "logo": "https://www.mozilla.org/media/img/mozorg/mozilla-256.jpg",
+  "logo": "https://www.mozilla.org/media/img/m24/og.png",
   "success_url": "/healthz-cron/",
   "stack": "container",
   "env": {

bedrock/base/templates/base-error.html

@@ -16,11 +16,7 @@
   <div class="mzp-l-content">
     <div class="header-image">
       <a class="logo-mozilla" href="{{ url('mozorg.home') }}">
-        {% if switch('m24-website-refresh') %}
-          <img class="c-navigation-logo-image m24-logo" src="{{ static('img/logos/m24/lockup-black.svg') }}" alt="{{ ftl('error-page-mozilla') }}"  width="192" height="46">
-        {% else %}
-          <img class="c-navigation-logo-image" src="{{ static('protocol/img/logos/mozilla/logo-word-hor.svg') }}" alt="{{ ftl('error-page-mozilla') }}"  width="140">
-        {% endif %}
+        <img class="c-navigation-logo-image m24-logo" src="{{ static('img/logos/m24/lockup-black.svg') }}" alt="{{ ftl('error-page-mozilla') }}"  width="192" height="46">
       </a>
       <a class="logo-firefox" href="{{ url('firefox') }}"><img src="{{ static('protocol/img/logos/firefox/logo-word-hor.svg') }}" alt="{{ ftl('error-page-firefox') }}" width="140"></a>
     </div>

bedrock/base/templates/base-protocol.html

@@ -34,7 +34,7 @@
     <meta property="og:site_name" content="Mozilla">
     <meta property="og:locale" content="{{ LANG|replace("-", "_") }}">
     <meta property="og:url" content="{% filter trim|absolute_url %}{% block page_og_url %}{{ settings.CANONICAL_URL + '/' + LANG + canonical_path }}{% endblock %}{% endfilter %}">
-    <meta property="og:image" content="{% filter trim|absolute_url %}{% block page_image %}{% if switch('m24-website-refresh') %}{{ static('img/m24/og.png') }}{% else %}{{ static('img/mozorg/mozilla-256.jpg') }}{% endif %}{% endblock %}{% endfilter %}">
+    <meta property="og:image" content="{% filter trim|absolute_url %}{% block page_image %}{{ static('img/m24/og.png') }}{% endblock %}{% endfilter %}">
     <meta property="og:title" content="{% filter striptags %}{% block page_og_title %}{{ self.page_title_full() }}{% endblock %}{% endfilter %}">
     <meta property="og:description" content="{% filter striptags %}{% block page_og_desc %}{{ self.page_desc() }}{% endblock %}{% endfilter %}">
     <meta property="fb:page_id" content="{% block facebook_id %}262134952380{# facebook.com/mozilla #}{% endblock %}">
@@ -47,9 +47,9 @@
     <meta name="twitter:app:id:iphone" content="{% block iphone_app_id %}989804926{% endblock %}">
     <meta name="twitter:app:name:ipad" content="{% block ipad_app_name %}Firefox{% endblock %}">
     <meta name="twitter:app:id:ipad" content="{% block ipad_app_id %}989804926{% endblock %}">
-    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{% block page_ios_icon %}{% if switch('m24-website-refresh') %}{{ static('img/favicons/mozilla/m24/apple-touch-icon.png') }}{% else %}{{ static('img/favicons/mozilla/apple-touch-icon.png') }}{% endif %}{% endblock %}">
-    <link rel="icon" type="image/png" sizes="196x196" href="{% block page_favicon_large %}{% if switch('m24-website-refresh') %}{{ static('img/favicons/mozilla/m24/favicon-196x196.png') }}{% else %}{{ static('img/favicons/mozilla/favicon-196x196.png') }}{% endif %}{% endblock %}">
-    <link rel="shortcut icon" href="{% block page_favicon %}{% if switch('m24-website-refresh') %}{{ static('img/favicons/mozilla/m24/favicon.ico') }}{% else %}{{ static('img/favicons/mozilla/favicon.ico') }}{% endif %}{% endblock %}">
+    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{% block page_ios_icon %}{{ static('img/favicons/mozilla/apple-touch-icon.png') }}{% endblock %}">
+    <link rel="icon" type="image/png" sizes="196x196" href="{% block page_favicon_large %}{{ static('img/favicons/mozilla/favicon-196x196.png') }}{% endblock %}">
+    <link rel="shortcut icon" href="{% block page_favicon %}{{ static('img/favicons/mozilla/favicon.ico') }}{% endblock %}">
     {% block canonical_urls %}{% include 'includes/canonical-url.html' %}{% endblock %}
     {% endblock shared_meta %}
     {# keep the verification for the previous official mastodon profile #}

bedrock/base/templates/includes/protocol/navigation/navigation.html

@@ -22,11 +22,7 @@
         <button class="c-navigation-menu-button" type="button" aria-controls="c-navigation-items" data-testid="navigation-menu-button">{{ ftl('navigation-v2-menu') }}</button>
         <div class="c-navigation-logo">
           <a href="{{ url('mozorg.home') }}" data-link-text="mozilla home icon" data-link-position="nav">
-          {% if switch('m24-website-refresh') %}
             <img class="c-navigation-logo-image m24-logo" src="{{ static('img/logos/m24/lockup-black.svg') }}" alt="{{ logo_alt }}" width="88" height="21">
-          {% else %}
-            <img class="c-navigation-logo-image" src="{{ static('protocol/img/logos/mozilla/logo-word-hor.svg') }}" alt="{{ logo_alt }}" width="112" height="32">
-          {% endif %}
           </a>
         </div>
 

bedrock/careers/templates/careers/includes/footer.html

@@ -10,12 +10,11 @@
     media_class='mzp-l-split-h-center mzp-l-split-media-overflow',
     media_include='careers/includes/big-picture-video.html',
     image=resp_img(
-      url='img/careers/footer-remote.png',
-      srcset={
-        'img/careers/footer-remote-high-res.png': '2x'
-      },
+      url='img/careers/footer-remote-cropped.svg',
       optional_attributes={
-        'class': 'mzp-c-split-media-asset'
+        'class': 'mzp-c-split-media-asset',
+        'width': '540',
+        'height': '414'
       }
     ),
     media_after=True

bedrock/careers/templates/careers/locations.html

@@ -44,7 +44,7 @@ <h2 class="c-careers-section-title">
           our offices for collaborative and cultural activities that most benefit
           from being face-to-face — for planning, product design sprints,
           hackathons and more. </p>
-        <p>Our coworking spaces span across 9 cities: San Francisco, San Mateo, London, Paris, Portland, Tulsa, Vancouver, Chicago, and Bellevue.</p>
+        <p>We have offices or coworking spaces in a number of locales, including San Francisco, San Mateo, Berlin, Toronto, New York, Paris, London, Bellevue/Seattle, Austin, Tulsa, Chicago and Vancouver.</p>
       </div>
 
       <ul class="c-careers-locations-list">
@@ -58,6 +58,14 @@ <h2 class="c-careers-section-title">
           </span>
 
         </li>
+        <li>
+          <div class="c-careers-locations-image-wrapper">
+            <img src="{{ static('img/careers/locations/mozilla-paris.png') }}" alt="" width="200" height="200">
+          </div>
+          <span>
+            Paris
+          </span>
+        </li>
         <li>
             <div class="c-careers-locations-image-wrapper">
               <img src="{{ static('img/careers/locations/mozilla-toronto.png') }}" alt="" width="200" height="200">
@@ -68,18 +76,10 @@ <h2 class="c-careers-section-title">
         </li>
         <li>
           <div class="c-careers-locations-image-wrapper">
-            <img src="{{ static('img/careers/locations/mozilla-remote.png') }}" alt="" width="200" height="200">
-          </div>
-          <span>
-            Remote
-          </span>
-        </li>
-        <li>
-          <div class="c-careers-locations-image-wrapper">
-            <img src="{{ static('img/careers/locations/mozilla-coworking-space.png') }}" alt="" width="200" height="200">
+            <img src="{{ static('img/careers/locations/mozilla-san-francisco.png') }}" alt="" width="200" height="200">
           </div>
           <span>
-            Coworking Spaces
+            San Francisco
           </span>
         </li>
       </ul>

bedrock/mozorg/tests/test_helper_misc.py

@@ -543,7 +543,7 @@ class TestAbsoluteURLFilter(TestCase):
     static_url_dev = "/static/"
     static_url_prod = "//mozorg.cdn.mozilla.net/static/"
     static_url_full = "https://mozorg.cdn.mozilla.net/static/"
-    image_path = "img/mozorg/mozilla-256.jpg"
+    image_path = "img/m24/og.png"
     inline_template = "{{ static('%s')|absolute_url }}" % image_path
     block_template = "{% filter absolute_url %}{% block page_image %}" + "{{ static('%s') }}" % image_path + "{% endblock %}{% endfilter %}"
 

bedrock/newsletter/templates/newsletter/updated.html

@@ -141,7 +141,7 @@ <h2 class="c-updated-block-header">
                   ga_title='Meet our parent brand',
                   desc=ftl('newsletters-mozilla-the-non-for-profit'),
                   cta=ftl('ui-learn-more'),
-                  image=resp_img('img/newsletter/confirm/mozilla.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
+                  image=resp_img('img/m24/og-16-9.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
                   aspect_ratio='mzp-has-aspect-16-9',
                   link_url=url('mozorg.about.index'),
                 )}}
@@ -177,7 +177,7 @@ <h2 class="c-updated-block-header">{{ ftl('newsletters-while-here-why-not-check'
                   ga_title='About us',
                   desc=ftl('newsletters-whats-mozilla-all-about'),
                   cta=ftl('newsletters-were-glad-you-asked'),
-                  image=resp_img('img/newsletter/confirm/mozilla.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
+                  image=resp_img('img/m24/og-16-9.png', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
                   aspect_ratio='mzp-has-aspect-16-9',
                   link_url=url('mozorg.about.index'),
                 )}}

bedrock/privacy/templates/privacy/archive/base-resp.html

@@ -13,7 +13,7 @@
   data-details-close-text="{{ ftl('ui-show-less') }}"
 {% endblock %}
 
-{% block article_header_logo %}{{ static('img/trademarks/logo-mozm.png') }}{% endblock %}
+{% block article_header_logo %}{{ static('img/trademarks/symbol.svg') }}{% endblock %}
 
 {% block side_extra %}
   <section id="side-archives" class="side-reference">

bedrock/privacy/templates/privacy/index.html

@@ -12,7 +12,7 @@
 {% block body_class %}mzp-t-mozilla format-none{% endblock%}
 {% block body_id %}privacy-landing{% endblock %}
 
-{% block article_header_logo %}{{ static('img/trademarks/logo-mozm.png') }}{% endblock %}
+{% block article_header_logo %}{{ static('img/trademarks/symbol.svg') }}{% endblock %}
 
 {% do doc.select('body > section > section ul')|htmlattr(class="mzp-u-list-styled") %}
 {% do doc.select('body > section > section ol')|htmlattr(class="mzp-u-list-styled") %}

bedrock/privacy/templates/privacy/notices/ad-targeting-guidelines.html

@@ -8,4 +8,4 @@
 
 {% block body_class %}mzp-t-mozilla format-paragraphs{% endblock%}
 
-{% block article_header_logo %}{{ static('img/trademarks/logo-mozm.png') }}{% endblock %}
+{% block article_header_logo %}{{ static('img/trademarks/symbol.svg') }}{% endblock %}

bedrock/privacy/templates/privacy/notices/mozilla-accounts.html

@@ -8,4 +8,4 @@
 
 {% set body_id = "mozilla-accounts" %}
 
-{% block article_header_logo %}{{ static('img/trademarks/logo-mozm.png') }}{% endblock %}
+{% block article_header_logo %}{{ static('img/trademarks/symbol.svg') }}{% endblock %}

bedrock/privacy/templates/privacy/notices/subscription-services.html

@@ -8,4 +8,4 @@
 
 {% set body_id = "subscription-services" %}
 
-{% block article_header_logo %}{{ static('img/trademarks/logo-mozm.png') }}{% endblock %}
+{% block article_header_logo %}{{ static('img/trademarks/symbol.svg') }}{% endblock %}

bedrock/privacy/templates/privacy/notices/websites.html

@@ -9,7 +9,7 @@
 {% set body_id = "privacy-websites" %}
 {% block body_class %}mzp-t-mozilla format-paragraphs{% endblock%}
 
-{% block article_header_logo %}{{ static('img/trademarks/logo-mozm.png') }}{% endblock %}
+{% block article_header_logo %}{{ static('img/trademarks/symbol.svg') }}{% endblock %}
 
 {# disable GA on the websites privacy policy. Bug 1576673 #}
 {% block google_analytics %}{% endblock %}

media/css/mozorg/contribute.scss

@@ -390,7 +390,7 @@ $image-path: '/media/protocol/img';
             }
 
             &.contribute-mission-learn-icon::before {
-                background-image: url('/media/img/contribute/icon/M.svg');
+                background-image: url('/media/img/logos/m24/symbol-black.svg');
             }
 
             &.contribute-mission-event-icon::before {