From 425f92bdcdf33101bf88d9f69df67ddf759f7a69 Mon Sep 17 00:00:00 2001 From: Craig Cook Date: Tue, 17 Sep 2024 09:35:23 -0700 Subject: [PATCH] Refresh: update brand fonts globally [fix #15088] (#15144) --- .../base/templates/base-protocol-mozilla.html | 6 +- bedrock/base/templates/base-protocol.html | 6 +- .../protocol/footer/footer-refresh.html | 2 +- .../templates/firefox/new/basic/base.html | 6 +- .../templates/firefox/new/desktop/base.html | 6 +- bedrock/mozorg/views.py | 2 +- .../newsletter/security-privacy-news.html | 2 +- media/css/careers/components/diversity.scss | 4 +- media/css/careers/components/locations.scss | 1 - media/css/careers/components/position.scss | 2 +- .../css/careers/components/testimonials.scss | 7 +- .../challenge-the-default/_compare-table.scss | 3 - .../firefox/challenge-the-default/_hero.scss | 2 - .../firefox/challenge-the-default/index.scss | 4 - .../css/firefox/family/components/_hero.scss | 1 - media/css/firefox/new/desktop/download.scss | 1 - .../firefox/nothing-personal/_browser.scss | 4 - .../css/firefox/nothing-personal/styles.scss | 1 - media/css/firefox/releasenotes.scss | 13 +- media/css/firefox/switch.scss | 2 +- .../foundation/annual-report-2019-2020.scss | 9 +- media/css/foundation/annual-report-2021.scss | 3 +- media/css/foundation/annual-report.scss | 3 +- media/css/m24/base.scss | 11 +- media/css/m24/copy.scss | 3 + media/css/m24/vars/fonts.scss | 38 +++- media/css/mozorg/about-forums.scss | 6 +- media/css/mozorg/about-patents.scss | 3 +- media/css/mozorg/about.scss | 2 +- media/css/mozorg/account.scss | 2 +- media/css/mozorg/antiharassment-tool.scss | 2 +- media/css/mozorg/contribute.scss | 1 - media/css/mozorg/diversity/diversity.scss | 1 - media/css/mozorg/home/ctd-promo-de.scss | 4 - media/css/mozorg/home/home-new.scss | 9 +- .../mozorg/home/includes/featured-vpn.scss | 4 +- .../home/includes/mofo-donate-promo.scss | 4 +- .../mozorg/home/includes/monitor-banner.scss | 6 +- media/css/mozorg/impact.scss | 5 +- media/css/mozorg/manifesto.scss | 7 +- media/css/mozorg/mozilla-account-promo.scss | 10 +- media/css/mozorg/sustainability.scss | 8 +- .../newsletter-monitor-waitlist.scss | 4 +- .../newsletter-security-privacy-news.scss | 2 - media/css/privacy/privacy-protocol.scss | 5 +- media/css/products/monitor/waitlist.scss | 4 +- media/css/products/vpn/common-refresh.scss | 4 +- media/css/products/vpn/download.scss | 2 +- media/css/products/vpn/invite.scss | 2 +- media/css/products/vpn/resource-center.scss | 6 +- media/css/protocol/basic-article.scss | 2 +- media/css/protocol/components/_menu.scss | 4 +- .../protocol/components/_sub-navigation.scss | 9 +- media/css/protocol/protocol-mozilla-2024.scss | 181 ++++++++++++++++++ media/static-bundles.json | 6 + 55 files changed, 322 insertions(+), 125 deletions(-) create mode 100644 media/css/protocol/protocol-mozilla-2024.scss diff --git a/bedrock/base/templates/base-protocol-mozilla.html b/bedrock/base/templates/base-protocol-mozilla.html index fd0986516dd..042f5ac1eb5 100644 --- a/bedrock/base/templates/base-protocol-mozilla.html +++ b/bedrock/base/templates/base-protocol-mozilla.html @@ -9,7 +9,11 @@ {% block body_class %}mzp-t-mozilla{% endblock %} {% block site_css %} - {{ css_bundle('protocol-mozilla') }} + {% if switch('m24-global-styles') %} + {{ css_bundle('protocol-mozilla-2024') }} + {% else %} + {{ css_bundle('protocol-mozilla') }} + {% endif %} {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %} {{ css_bundle('m24-navigation-and-footer') }} {% endif %} diff --git a/bedrock/base/templates/base-protocol.html b/bedrock/base/templates/base-protocol.html index 2a2dbde1d9b..524567add5a 100644 --- a/bedrock/base/templates/base-protocol.html +++ b/bedrock/base/templates/base-protocol.html @@ -72,7 +72,11 @@ {# Global styles, hidden from IE9 and lower #} {% block site_css %} - {{ css_bundle('protocol-firefox') }} + {% if switch('m24-global-styles') %} + {{ css_bundle('protocol-mozilla-2024') }} + {% else %} + {{ css_bundle('protocol-firefox') }} + {% endif %} {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %} {{ css_bundle('m24-navigation-and-footer') }} {% endif %} diff --git a/bedrock/base/templates/includes/protocol/footer/footer-refresh.html b/bedrock/base/templates/includes/protocol/footer/footer-refresh.html index 42d50b418a2..a6c61cd6cef 100644 --- a/bedrock/base/templates/includes/protocol/footer/footer-refresh.html +++ b/bedrock/base/templates/includes/protocol/footer/footer-refresh.html @@ -71,7 +71,7 @@

{{ ftl('footer-refresh-resources') }}

diff --git a/bedrock/firefox/templates/firefox/new/basic/base.html b/bedrock/firefox/templates/firefox/new/basic/base.html index 2f340f372fc..945ca2bcd9c 100644 --- a/bedrock/firefox/templates/firefox/new/basic/base.html +++ b/bedrock/firefox/templates/firefox/new/basic/base.html @@ -31,7 +31,11 @@ {# All stylesheets are loaded in extrahead to serve legacy IE basic styles #} {% block extrahead %} - {{ css_bundle('protocol-firefox') }} + {% if switch('m24-global-styles') %} + {{ css_bundle('protocol-mozilla-2024') }} + {% else %} + {{ css_bundle('protocol-firefox') }} + {% endif %} {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %} {{ css_bundle('m24-navigation-and-footer') }} {% endif %} diff --git a/bedrock/firefox/templates/firefox/new/desktop/base.html b/bedrock/firefox/templates/firefox/new/desktop/base.html index fd93322b417..34d4eff3525 100644 --- a/bedrock/firefox/templates/firefox/new/desktop/base.html +++ b/bedrock/firefox/templates/firefox/new/desktop/base.html @@ -31,7 +31,11 @@ {# All stylesheets are loaded in extrahead to serve legacy IE basic styles #} {% block extrahead %} - {{ css_bundle('protocol-firefox') }} + {% if switch('m24-global-styles') %} + {{ css_bundle('protocol-mozilla-2024') }} + {% else %} + {{ css_bundle('protocol-firefox') }} + {% endif %} {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %} {{ css_bundle('m24-navigation-and-footer') }} {% endif %} diff --git a/bedrock/mozorg/views.py b/bedrock/mozorg/views.py index b254a3fadb6..80225491b17 100644 --- a/bedrock/mozorg/views.py +++ b/bedrock/mozorg/views.py @@ -137,7 +137,7 @@ class HomeView(L10nTemplateView): def get_template_names(self): experience = self.request.GET.get("xv", None) - if switch("m24-home") and self.request.locale.startswith("en"): + if switch("m24-home") and self.request.locale.startswith("en") and experience != "legacy": return [self.m24_template_name] elif ftl_file_is_active("mozorg/home-new") and experience != "legacy": return [self.template_name] diff --git a/bedrock/newsletter/templates/newsletter/security-privacy-news.html b/bedrock/newsletter/templates/newsletter/security-privacy-news.html index 18c44856f7f..19e32c19f3e 100644 --- a/bedrock/newsletter/templates/newsletter/security-privacy-news.html +++ b/bedrock/newsletter/templates/newsletter/security-privacy-news.html @@ -4,7 +4,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. #} -{% extends 'base-protocol.html' %} +{% extends 'base-protocol-mozilla.html' %} {% block page_title %}{{ ftl('newsletters-subscribe-to-the-newsletter') }}{% endblock page_title %} diff --git a/media/css/careers/components/diversity.scss b/media/css/careers/components/diversity.scss index 79466c36c67..77e2d344e48 100644 --- a/media/css/careers/components/diversity.scss +++ b/media/css/careers/components/diversity.scss @@ -10,8 +10,8 @@ $image-path: '/media/protocol/img'; .c-careers-diversity-numbers { .mzp-c-picto-heading { - @include font-base; margin-bottom: $spacing-md; + font-family: var(--body-font-family); font-weight: 400; } } @@ -87,8 +87,8 @@ $image-path: '/media/protocol/img'; p { @include text-body-sm; - @include font-base; color: $color-dark-gray-20; + font-family: var(--body-font-family); font-weight: 700; margin-bottom: 0; } diff --git a/media/css/careers/components/locations.scss b/media/css/careers/components/locations.scss index bbba3098e48..ebe2a4b4535 100644 --- a/media/css/careers/components/locations.scss +++ b/media/css/careers/components/locations.scss @@ -18,7 +18,6 @@ a, span { - @include font-mozilla; @include text-body-xl; font-weight: bold; } diff --git a/media/css/careers/components/position.scss b/media/css/careers/components/position.scss index c046402decd..6daa782b3ac 100644 --- a/media/css/careers/components/position.scss +++ b/media/css/careers/components/position.scss @@ -40,7 +40,7 @@ margin-bottom: $spacing-lg; .mzp-c-menu-list-title { - @include font-base; + font-family: var(--body-font-family); } ul { diff --git a/media/css/careers/components/testimonials.scss b/media/css/careers/components/testimonials.scss index c031e3e49a4..149e0d50ee1 100644 --- a/media/css/careers/components/testimonials.scss +++ b/media/css/careers/components/testimonials.scss @@ -87,9 +87,9 @@ $image-path: '/media/protocol/img'; } q { - @include font-mozilla; @include font-size(28px); color: $color-black; + font-family: var(--title-font-family); font-weight: bold; margin-bottom: $spacing-md; position: relative; @@ -210,8 +210,9 @@ $image-path: '/media/protocol/img'; blockquote { @include text-title-2xs; - font-weight: 400; border: 0; + color: $color-black; + font-weight: 400; .c-careers-testimonial-quote { position: relative; @@ -261,8 +262,8 @@ $image-path: '/media/protocol/img'; p { @include text-body-sm; - @include font-base; color: $color-dark-gray-20; + font-family: var(--body-font-family); font-weight: 700; margin-bottom: 0; } diff --git a/media/css/firefox/challenge-the-default/_compare-table.scss b/media/css/firefox/challenge-the-default/_compare-table.scss index f421f0090b1..31960183e60 100644 --- a/media/css/firefox/challenge-the-default/_compare-table.scss +++ b/media/css/firefox/challenge-the-default/_compare-table.scss @@ -16,14 +16,12 @@ h2 { - @include font-firefox; @include font-size(40px); font-weight: 800; margin-bottom: $spacing-lg; } p { - @include font-firefox; color: $color-marketing-gray-70; font-weight: 600; } @@ -72,7 +70,6 @@ } th { - @include font-firefox; max-width: 150px; border: 2.5px solid $color-black; font-size: 14px; diff --git a/media/css/firefox/challenge-the-default/_hero.scss b/media/css/firefox/challenge-the-default/_hero.scss index eb378c631a2..1cbe89c384e 100644 --- a/media/css/firefox/challenge-the-default/_hero.scss +++ b/media/css/firefox/challenge-the-default/_hero.scss @@ -41,7 +41,6 @@ $campaign-red: #ff6a75; } .c-ctd-hero { - @include font-firefox; background: $campaign-red; padding: 6px 24px 24px; width: 100%; @@ -214,7 +213,6 @@ $campaign-red: #ff6a75; } h1 { - @include font-firefox; @include font-size(36px); color: $color-black; font-weight: 800; diff --git a/media/css/firefox/challenge-the-default/index.scss b/media/css/firefox/challenge-the-default/index.scss index c5596fcc42c..f87870efe82 100644 --- a/media/css/firefox/challenge-the-default/index.scss +++ b/media/css/firefox/challenge-the-default/index.scss @@ -257,7 +257,6 @@ html:not(.is-firefox) { background-color: $color-white; h2 { - @include font-firefox; @include font-size(40px); font-weight: 800; margin-bottom: $spacing-lg; @@ -265,7 +264,6 @@ html:not(.is-firefox) { } p { - @include font-firefox; color: $color-marketing-gray-70; font-weight: 600; } @@ -359,7 +357,6 @@ html:not(.is-firefox) { } p { - @include font-firefox; color: $color-marketing-gray-70; font-weight: 600; margin-top: $spacing-xl; @@ -422,7 +419,6 @@ html:not(.is-firefox) { } p { - @include font-firefox; @include font-size(20px); font-weight: 600; max-width: 475px; diff --git a/media/css/firefox/family/components/_hero.scss b/media/css/firefox/family/components/_hero.scss index 3ce9f4a030a..09f9e46b5f7 100644 --- a/media/css/firefox/family/components/_hero.scss +++ b/media/css/firefox/family/components/_hero.scss @@ -40,7 +40,6 @@ $image-path: '/media/protocol/img'; .c-blurb { @include text-body-lg; - @include font-firefox; --shadow-offset: #{$border-radius-md}; @include f3.card-shadow; diff --git a/media/css/firefox/new/desktop/download.scss b/media/css/firefox/new/desktop/download.scss index 743d5183321..bdab53f6068 100644 --- a/media/css/firefox/new/desktop/download.scss +++ b/media/css/firefox/new/desktop/download.scss @@ -913,7 +913,6 @@ button.mzp-c-cta-link { thead { th { - @include font-firefox; @include text-title-xs; border-bottom: 3px solid $color-marketing-gray-20; font-weight: bold; diff --git a/media/css/firefox/nothing-personal/_browser.scss b/media/css/firefox/nothing-personal/_browser.scss index f7f5e9e29bb..fea36598d6f 100644 --- a/media/css/firefox/nothing-personal/_browser.scss +++ b/media/css/firefox/nothing-personal/_browser.scss @@ -126,10 +126,6 @@ margin-bottom: $layout-lg; .c-browser-window-top { - h2 { - @include text-title-2xl; - } - &::after { height: 95px; bottom: 6px; diff --git a/media/css/firefox/nothing-personal/styles.scss b/media/css/firefox/nothing-personal/styles.scss index 3f4c2da9a7c..4698656d81e 100644 --- a/media/css/firefox/nothing-personal/styles.scss +++ b/media/css/firefox/nothing-personal/styles.scss @@ -86,7 +86,6 @@ $mq-tad-smaller-sm: 455px; } .c-sign-off { - @include font-firefox; @include text-title-xs; margin: $layout-lg 0; diff --git a/media/css/firefox/releasenotes.scss b/media/css/firefox/releasenotes.scss index a5b2959eec1..ab70f5bed18 100644 --- a/media/css/firefox/releasenotes.scss +++ b/media/css/firefox/releasenotes.scss @@ -172,8 +172,8 @@ $image-path: '/media/protocol/img'; } .c-release-version { - @include font-base; @include text-title-xl; + font-family: var(--body-font-family); display: block; } @@ -184,20 +184,20 @@ $image-path: '/media/protocol/img'; .mzp-l-content { .c-release-product { - @include font-base; @include text-title-2xs; + font-family: var(--body-font-family); display: block; } .c-release-date { - @include font-base; @include text-title-2xs; + font-family: var(--body-font-family); } .c-release-first-title, .c-release-draft-title { - @include font-base; @include text-title-2xs; + font-family: var(--body-font-family); font-weight: bold; // pushes the text down after the big release-version text @@ -310,6 +310,11 @@ $image-path: '/media/protocol/img'; } // icons +.c-release-notes .mzp-l-sidebar { + display: flex; + align-items: flex-start; +} + .sidebar-icon { float: left; margin-right: $spacing-sm; diff --git a/media/css/firefox/switch.scss b/media/css/firefox/switch.scss index 1d06e8b6f26..fc0bb9847a9 100644 --- a/media/css/firefox/switch.scss +++ b/media/css/firefox/switch.scss @@ -105,7 +105,7 @@ $image-path: '/media/protocol/img'; .c-share-title { @include text-body-lg; - @include font-firefox; + font-family: var(--body-font-family); } .c-share { diff --git a/media/css/foundation/annual-report-2019-2020.scss b/media/css/foundation/annual-report-2019-2020.scss index ac9a7275c20..476851df630 100644 --- a/media/css/foundation/annual-report-2019-2020.scss +++ b/media/css/foundation/annual-report-2019-2020.scss @@ -118,9 +118,8 @@ $image-path: '/media/protocol/img'; // Content sections .c-intro-section { p { - @include font-mozilla; @include text-title-sm; - font-style: italic; + font-family: var(--title-font-family); margin-bottom: 0; } } @@ -333,8 +332,8 @@ $image-path: '/media/protocol/img'; } li { - @include font-mozilla; @include text-title-sm; + font-family: var(--title-font-family); margin-left: $spacing-md; margin-bottom: $spacing-lg; padding-left: $spacing-sm; @@ -537,8 +536,8 @@ $image-path: '/media/protocol/img'; } span { - @include font-mozilla; @include text-title-xs; + font-family: var(--title-font-family); font-weight: bold; display: block; margin-bottom: $spacing-md; @@ -587,8 +586,8 @@ $image-path: '/media/protocol/img'; margin-bottom: $spacing-2xl; .highlight { - @include font-mozilla; @include text-title-xs; + font-family: var(--title-font-family); font-weight: bold; } diff --git a/media/css/foundation/annual-report-2021.scss b/media/css/foundation/annual-report-2021.scss index e8717f035ce..5ae06b36318 100644 --- a/media/css/foundation/annual-report-2021.scss +++ b/media/css/foundation/annual-report-2021.scss @@ -56,7 +56,6 @@ main { text-align: center; h1 { - @include font-base; @include text-title-xl; color: $color-white; font-weight: normal; @@ -277,8 +276,8 @@ main { } span { - @include font-mozilla; @include text-title-xs; + font-family: var(--title-font-family); display: block; font-weight: bold; margin-bottom: $spacing-md; diff --git a/media/css/foundation/annual-report.scss b/media/css/foundation/annual-report.scss index 5df2d4275f4..22deaee84d3 100644 --- a/media/css/foundation/annual-report.scss +++ b/media/css/foundation/annual-report.scss @@ -187,9 +187,8 @@ $image-path: '/media/protocol/img'; .c-intro-section { p { - @include font-mozilla; @include text-title-sm; - font-style: italic; + font-family: var(--title-font-family); margin-bottom: 0; } } diff --git a/media/css/m24/base.scss b/media/css/m24/base.scss index 4586cb25baa..e7102a557c7 100644 --- a/media/css/m24/base.scss +++ b/media/css/m24/base.scss @@ -28,16 +28,17 @@ body { background-color: $m24-color-white; color: $m24-color-black; - font-family: 'Mozilla Sans Text', sans-serif; + font-family: var(--body-font-family); font-variant-ligatures: none; - line-height: 1.2; + line-height: var(--body-line-height); } h1, h2, h3, h4, h5 { color: $m24-color-black; - font-family: 'Mozilla SemiSlab', serif; + font-family: var(--title-font-family); font-variant-ligatures: none; font-weight: bold; + line-height: 1.1; } strong { @@ -88,7 +89,7 @@ a:link { .m24-c-cta { color: $m24-color-black; display: inline-block; - font-family: 'Mozilla SemiSlab', serif; + font-family: var(--title-font-family); font-size: $text-button-lg; &:hover { @@ -104,7 +105,7 @@ a:link { } &.m24-t-small { - font-family: 'Mozilla Sans Text', sans-serif; + font-family: var(--body-font-family); font-size: $text-button-sm; } } diff --git a/media/css/m24/copy.scss b/media/css/m24/copy.scss index dfaad153d63..1ffd8bf9daa 100644 --- a/media/css/m24/copy.scss +++ b/media/css/m24/copy.scss @@ -10,7 +10,9 @@ max-width: $content-max; p { + font-weight: 600; margin-bottom: 0; + text-wrap: balance; text-wrap-style: balance; } } @@ -19,6 +21,7 @@ font-size: $alias-text-title-h2; margin-bottom: 0; padding-bottom: $spacer-sm; + text-wrap: balance; text-wrap-style: balance; &.m24-t-2xl { diff --git a/media/css/m24/vars/fonts.scss b/media/css/m24/vars/fonts.scss index eb77bf86b2e..10a6d7fde6f 100644 --- a/media/css/m24/vars/fonts.scss +++ b/media/css/m24/vars/fonts.scss @@ -2,18 +2,38 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. -$m24-font-path: '/media/fonts/m24/'; +$m24-font-path: '/media/fonts/m24'; @font-face { font-display: swap; font-family: 'Mozilla Sans Text'; font-style: normal; font-weight: normal; + src: + url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Regular.woff2') format('woff2'), + url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Regular.woff') format('woff'); +} + +@font-face { + font-display: swap; + font-family: 'Mozilla Sans Text'; + font-style: normal; + font-weight: 600; src: url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBold.woff2') format('woff2'), url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBold.woff') format('woff'); } +@font-face { + font-display: swap; + font-family: 'Mozilla Sans Text'; + font-style: italic; + font-weight: 600; + src: + url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBoldIt.woff2') format('woff2'), + url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBoldIt.woff') format('woff'); +} + @font-face { font-display: swap; font-family: 'Mozilla Sans Text'; @@ -30,8 +50,8 @@ $m24-font-path: '/media/fonts/m24/'; font-style: italic; font-weight: normal; src: - url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBoldIt.woff2') format('woff2'), - url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBoldIt.woff') format('woff'); + url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Italic.woff2') format('woff2'), + url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Italic.woff') format('woff'); } @font-face { @@ -50,8 +70,8 @@ $m24-font-path: '/media/fonts/m24/'; font-style: normal; font-weight: normal; src: - url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-SemiBold.woff2') format('woff2'), - url('#{$m24-font-path}mozilla-semi-slab/MozillaSemiSlab-SemiBold.woff') format('woff'); + url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-Regular.woff2') format('woff2'), + url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-Regular.woff') format('woff'); } @font-face { @@ -61,8 +81,10 @@ $m24-font-path: '/media/fonts/m24/'; font-weight: bold; src: url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-Bold.woff2') format('woff2'), - url('#{$m24-font-path}mozilla-semi-slab/MozillaSemiSlab-Bold.woff') format('woff'); + url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-Bold.woff') format('woff'); } -$primary-font: "Mozilla Sans Text", inter, x-localespecific, sans-serif; -$secondary-font: "Mozilla SemiSlab", "Zilla Slab", inter, x-localespecific; +/* stylelint-disable value-keyword-case */ +$primary-font: "Mozilla Sans Text", Inter, Arial, "X-LocaleSpecific", sans-serif; +$secondary-font: "Mozilla SemiSlab", Rockwell, "Roboto Slab", "X-LocaleSpecific", serif; +/* stylelint-enable */ diff --git a/media/css/mozorg/about-forums.scss b/media/css/mozorg/about-forums.scss index e37f1019610..9ad51c5882a 100644 --- a/media/css/mozorg/about-forums.scss +++ b/media/css/mozorg/about-forums.scss @@ -66,12 +66,10 @@ $image-path: '/media/protocol/img'; } h4 { - position: relative; - letter-spacing: 0; - margin: 0 0.5em 0 0; - @include font-base; @include text-body-md; font-weight: bold; + margin: 0 0.5em 0 0; + position: relative; a { position: absolute; diff --git a/media/css/mozorg/about-patents.scss b/media/css/mozorg/about-patents.scss index 7ca3d75eea5..ba9fe849145 100644 --- a/media/css/mozorg/about-patents.scss +++ b/media/css/mozorg/about-patents.scss @@ -27,7 +27,8 @@ ol li ol { h3 { @include text-title-xs; - @include font-base; + font-family: var(--body-font-family); + font-weight: 600; } details { diff --git a/media/css/mozorg/about.scss b/media/css/mozorg/about.scss index fabc2d595de..022c4bade38 100644 --- a/media/css/mozorg/about.scss +++ b/media/css/mozorg/about.scss @@ -143,7 +143,7 @@ $city-image-size: 106px; strong { @include font-size(50px); - @include font-mozilla; + font-family: var(--title-font-family); display: block; font-weight: bold; margin-bottom: $spacing-sm; diff --git a/media/css/mozorg/account.scss b/media/css/mozorg/account.scss index 5f8eb8f405e..01a7a352bcd 100644 --- a/media/css/mozorg/account.scss +++ b/media/css/mozorg/account.scss @@ -60,7 +60,7 @@ $image-path: '/media/protocol/img'; .accounts-products { h2 { @include text-title-xs; - @include font-base; + font-family: var(--body-font-family); } h4 { diff --git a/media/css/mozorg/antiharassment-tool.scss b/media/css/mozorg/antiharassment-tool.scss index b10c5e8b912..30d38c065b9 100644 --- a/media/css/mozorg/antiharassment-tool.scss +++ b/media/css/mozorg/antiharassment-tool.scss @@ -198,8 +198,8 @@ $aht-color-secondary: #FDA1DE; } .mzp-c-picto-heading { - @include font-base; @include font-size(18px); + font-family: var(--body-font-family); margin-bottom: $spacing-lg; } } diff --git a/media/css/mozorg/contribute.scss b/media/css/mozorg/contribute.scss index c60caa96287..9d18209fe6b 100644 --- a/media/css/mozorg/contribute.scss +++ b/media/css/mozorg/contribute.scss @@ -247,7 +247,6 @@ $image-path: '/media/protocol/img'; } .contribute-banner-gethelp-title { - @include font-firefox; @include font-size(24px); color: $title-text-color-inverse; position: relative; diff --git a/media/css/mozorg/diversity/diversity.scss b/media/css/mozorg/diversity/diversity.scss index 20909ddf59e..a417e419f31 100644 --- a/media/css/mozorg/diversity/diversity.scss +++ b/media/css/mozorg/diversity/diversity.scss @@ -438,7 +438,6 @@ $image-path: '/media/protocol/img'; margin-bottom: $layout-lg; figcaption { - @include font-firefox; @include text-body-lg; text-align: center; font-weight: 700; diff --git a/media/css/mozorg/home/ctd-promo-de.scss b/media/css/mozorg/home/ctd-promo-de.scss index 93f3d842316..e7a81bfebb4 100644 --- a/media/css/mozorg/home/ctd-promo-de.scss +++ b/media/css/mozorg/home/ctd-promo-de.scss @@ -11,10 +11,6 @@ $image-path: '/media/protocol/img'; .ctd-promo { .ctd-promo-non-fx, .ctd-promo-fx { - h2 { - @include font-firefox; - } - p { @include text-body-lg; } diff --git a/media/css/mozorg/home/home-new.scss b/media/css/mozorg/home/home-new.scss index 7886f20d28a..f0ce26d25f0 100644 --- a/media/css/mozorg/home/home-new.scss +++ b/media/css/mozorg/home/home-new.scss @@ -47,8 +47,8 @@ header { } p { - @include font-mozilla; @include font-size(18px); + font-family: var(--title-font-family); margin: 0 auto; max-width: 780px; line-height: 1.4; @@ -68,7 +68,6 @@ header { .c-homepage { h2 { - @include font-mozilla; text-align: center; @media #{$mq-xs} { @@ -98,7 +97,7 @@ header { blockquote, cite { - @include font-base; + font-family: var(--body-font-family); text-align: center; } @@ -175,9 +174,9 @@ header { } h3 { - @include font-base; @include text-body-md; - font-weight: bold; + font-family: var(--body-font-family); + font-weight: 600; line-height: 1.2; } diff --git a/media/css/mozorg/home/includes/featured-vpn.scss b/media/css/mozorg/home/includes/featured-vpn.scss index d28aabd2068..c8fbcd9c6b6 100644 --- a/media/css/mozorg/home/includes/featured-vpn.scss +++ b/media/css/mozorg/home/includes/featured-vpn.scss @@ -10,7 +10,7 @@ $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; .vpn-feature { - @include font-base; + font-family: var(--body-font-family); padding-top: 0; .feature-wrapper { @@ -38,8 +38,8 @@ $image-path: '/media/protocol/img'; } h2 { - @include font-base; @include text-title-xs; + font-family: var(--body-font-family); font-weight: bold; text-align: center; margin: $spacing-lg 0; diff --git a/media/css/mozorg/home/includes/mofo-donate-promo.scss b/media/css/mozorg/home/includes/mofo-donate-promo.scss index 1964a15d7e8..932e57f9641 100644 --- a/media/css/mozorg/home/includes/mofo-donate-promo.scss +++ b/media/css/mozorg/home/includes/mofo-donate-promo.scss @@ -10,7 +10,7 @@ $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; .mofo-donate-promo { - @include font-base; + font-family: var(--body-font-family); padding-top: 0; .feature-wrapper { @@ -38,8 +38,8 @@ $image-path: '/media/protocol/img'; } h2 { - @include font-base; @include text-title-xs; + font-family: var(--body-font-family); font-weight: bold; text-align: center; margin: $spacing-lg 0; diff --git a/media/css/mozorg/home/includes/monitor-banner.scss b/media/css/mozorg/home/includes/monitor-banner.scss index e1860d03922..8a08350f187 100644 --- a/media/css/mozorg/home/includes/monitor-banner.scss +++ b/media/css/mozorg/home/includes/monitor-banner.scss @@ -31,8 +31,8 @@ rgba(91, 109, 248, 0.15) 100%; } h2 { - @include font-base; @include font-size(22px); + font-family: var(--body-font-family); margin: 0 0 $spacing-md; span { @@ -106,7 +106,7 @@ rgba(91, 109, 248, 0.15) 100%; // Mid-page banner .monitor-feature { - @include font-base; + font-family: var(--body-font-family); padding-top: 0; .feature-wrapper { @@ -123,8 +123,8 @@ rgba(91, 109, 248, 0.15) 100%; } h2 { - @include font-base; @include font-size(32px); + font-family: var(--body-font-family); margin: $spacing-lg 0; text-align: start; diff --git a/media/css/mozorg/impact.scss b/media/css/mozorg/impact.scss index 92c4c490fad..879c0f0b951 100644 --- a/media/css/mozorg/impact.scss +++ b/media/css/mozorg/impact.scss @@ -20,7 +20,6 @@ header { align-items: center; h1 { - @include font-base; @include text-title-lg; color: $color-white; font-weight: normal; @@ -67,9 +66,9 @@ header { h2 { @include text-title-xs; - @include font-base; color: $color-white; - font-weight: 500; + font-family: var(--body-font-family); + font-weight: 600; } } } diff --git a/media/css/mozorg/manifesto.scss b/media/css/mozorg/manifesto.scss index 376ca0e4d8f..4786c1b92f6 100644 --- a/media/css/mozorg/manifesto.scss +++ b/media/css/mozorg/manifesto.scss @@ -23,8 +23,8 @@ $image-path: '/media/protocol/img'; @include clearfix; li { - @include font-mozilla; - @include text-title-sm; + @include text-title-xs; + font-weight: 600; padding-bottom: $spacing-2xl; padding-top: $spacing-xl; position: relative; @@ -89,8 +89,7 @@ $image-path: '/media/protocol/img'; } .principle-desc { - @include font-mozilla; - @include text-title-sm; + @include text-title-xs; margin-bottom: 0; } diff --git a/media/css/mozorg/mozilla-account-promo.scss b/media/css/mozorg/mozilla-account-promo.scss index 61b48e2cc99..f22ef1ee9b3 100644 --- a/media/css/mozorg/mozilla-account-promo.scss +++ b/media/css/mozorg/mozilla-account-promo.scss @@ -38,9 +38,9 @@ $promo-sm-mq: 400px; } h2 { - @include font-base; @include font-size(56px); @include bidi(((text-align, left, right),)); + font-family: var(--body-font-family); line-height: 1; color: $color-white; letter-spacing: -2px; @@ -65,10 +65,10 @@ $promo-sm-mq: 400px; } .accounts-cta-wrapper { - @include font-base; + align-items: flex-start; display: flex; flex-direction: column; - align-items: flex-start; + font-family: var(--body-font-family); #fxa-email-form { color: $color-white; @@ -110,7 +110,7 @@ $promo-sm-mq: 400px; margin-top: $spacing-2xl; a { - @include font-base; + font-family: var(--body-font-family); } small { @@ -211,7 +211,7 @@ $promo-sm-mq: 400px; width: 100%; #fxa-email-form-submit { - @include font-base; + font-family: var(--body-font-family); } } diff --git a/media/css/mozorg/sustainability.scss b/media/css/mozorg/sustainability.scss index 2c83a6fd21a..e73afbf78ca 100644 --- a/media/css/mozorg/sustainability.scss +++ b/media/css/mozorg/sustainability.scss @@ -34,7 +34,6 @@ header { h2 { @include text-title-xs; - @include font-mozilla; font-weight: 500; } @@ -85,7 +84,8 @@ header { blockquote { @include text-body-lg; - @include font-firefox; + font-family: var(--body-font-family); + font-weight: 600; cite { @include text-body-lg; @@ -130,9 +130,9 @@ header { margin: $spacing-md 0; figcaption { - @include font-base; @include text-body-lg; - font-weight: 700; + font-family: var(--body-font-family); + font-weight: 600; text-align: center; } diff --git a/media/css/newsletter/newsletter-monitor-waitlist.scss b/media/css/newsletter/newsletter-monitor-waitlist.scss index 98a2a9c920d..5bc3a3be1d8 100644 --- a/media/css/newsletter/newsletter-monitor-waitlist.scss +++ b/media/css/newsletter/newsletter-monitor-waitlist.scss @@ -19,10 +19,10 @@ $image-path: '/media/protocol/img'; } .section-title { - @include font-base; @include text-body-xl; - text-align: center; + font-family: var(--body-font-family); font-weight: normal; + text-align: center; } .c-not-available { diff --git a/media/css/newsletter/newsletter-security-privacy-news.scss b/media/css/newsletter/newsletter-security-privacy-news.scss index 7609f569f47..0d32b3020b8 100644 --- a/media/css/newsletter/newsletter-security-privacy-news.scss +++ b/media/css/newsletter/newsletter-security-privacy-news.scss @@ -13,14 +13,12 @@ $image-path: '/media/protocol/img'; } .page-title { - @include font-mozilla; @include text-title-lg; text-align: center; font-weight: 600; } .section-title { - @include font-base; @include text-body-xl; text-align: center; font-weight: normal; diff --git a/media/css/privacy/privacy-protocol.scss b/media/css/privacy/privacy-protocol.scss index 63a7a8f4ba9..e1fda95bbf4 100644 --- a/media/css/privacy/privacy-protocol.scss +++ b/media/css/privacy/privacy-protocol.scss @@ -14,7 +14,7 @@ $image-path: '/media/protocol/img'; $border: 2px solid $color-marketing-gray-20; .mzp-c-sidemenu .mzp-c-sidemenu-title { - @include font-base; + font-family: var(--body-font-family); } @media #{$mq-md} { @@ -67,7 +67,6 @@ $border: 2px solid $color-marketing-gray-20; } .privacy-title { - @include font-firefox; margin-bottom: $spacing-lg; @media #{$mq-sm} { @@ -265,7 +264,6 @@ $border: 2px solid $color-marketing-gray-20; #privacy-principles { ol { @include text-title-md; - @include font-mozilla; font-weight: bold; margin-left: 1.15em; @@ -274,7 +272,6 @@ $border: 2px solid $color-marketing-gray-20; } p { - @include font-base; @include text-body-md; font-weight: normal; } diff --git a/media/css/products/monitor/waitlist.scss b/media/css/products/monitor/waitlist.scss index 13692c89a42..4ed8e92bf6c 100644 --- a/media/css/products/monitor/waitlist.scss +++ b/media/css/products/monitor/waitlist.scss @@ -29,10 +29,10 @@ $image-path: '/media/protocol/img'; } .section-title { - @include font-base; @include text-body-xl; - text-align: center; + font-family: var(--body-font-family); font-weight: normal; + text-align: center; } .c-not-available { diff --git a/media/css/products/vpn/common-refresh.scss b/media/css/products/vpn/common-refresh.scss index 7bf91baa3f8..6a371870848 100644 --- a/media/css/products/vpn/common-refresh.scss +++ b/media/css/products/vpn/common-refresh.scss @@ -10,8 +10,8 @@ $image-path: '/media/protocol/img'; main { h1, h2, h3, h4, h5, h6 { - @include font-base; line-height: $vpn-title-line-height; + font-family: var(--body-font-family); } .u-title-xl { @@ -153,8 +153,8 @@ main { padding-bottom: $layout-md; blockquote { - @include font-base; border: none; + font-family: var(--body-font-family); padding: 0; margin-bottom: $layout-lg; diff --git a/media/css/products/vpn/download.scss b/media/css/products/vpn/download.scss index f19c5217c22..ad4ce12646b 100644 --- a/media/css/products/vpn/download.scss +++ b/media/css/products/vpn/download.scss @@ -54,8 +54,8 @@ $vpn-download-mq-2xl: '(min-width: 1450px)'; .vpn-download-secondary-list { .platform-body { h2 { - @include font-base; @include text-body-xl; + font-family: var(--body-font-family); } p { diff --git a/media/css/products/vpn/invite.scss b/media/css/products/vpn/invite.scss index 8c8a83687e8..a5a79f6e69b 100644 --- a/media/css/products/vpn/invite.scss +++ b/media/css/products/vpn/invite.scss @@ -53,8 +53,8 @@ $image-path: '/media/protocol/img'; } legend { - @include font-base; @include text-body-md; + font-family: var(--body-font-family); } } diff --git a/media/css/products/vpn/resource-center.scss b/media/css/products/vpn/resource-center.scss index cd622049726..b7cce5c7d7f 100644 --- a/media/css/products/vpn/resource-center.scss +++ b/media/css/products/vpn/resource-center.scss @@ -17,10 +17,6 @@ $image-path: '/media/protocol/img'; .mzp-l-content { max-width: $content-md; - .mzp-c-callout-title { - @include font-firefox; - } - .mzp-c-callout-desc { font-weight: 700; margin-left: auto; @@ -76,7 +72,7 @@ $image-path: '/media/protocol/img'; .resource-center-cta-desc { @include text-body-sm; - @include font-base; + font-family: var(--body-font-family); // this color will be added to protocol, this should be updated once its availible as a token color: #666; diff --git a/media/css/protocol/basic-article.scss b/media/css/protocol/basic-article.scss index e58292e8361..9a4e9f11271 100644 --- a/media/css/protocol/basic-article.scss +++ b/media/css/protocol/basic-article.scss @@ -48,8 +48,8 @@ blockquote.t-small { } .side-reference-title { - @include font-base; @include text-body-lg; + font-family: var(--body-font-family); } .t-love { diff --git a/media/css/protocol/components/_menu.scss b/media/css/protocol/components/_menu.scss index 8173671e711..d103b61c072 100644 --- a/media/css/protocol/components/_menu.scss +++ b/media/css/protocol/components/_menu.scss @@ -36,7 +36,7 @@ h4, h5, h6 { - @include font-base; + font-family: var(--body-font-family); } @media #{$mq-md} { @@ -59,10 +59,10 @@ position: relative; .c-menu-title { - @include font-base; @include text-body-md; color: $color-black; display: block; + font-family: var(--body-font-family); font-weight: bold; margin-bottom: 0; min-height: 32px; diff --git a/media/css/protocol/components/_sub-navigation.scss b/media/css/protocol/components/_sub-navigation.scss index 2287ec69244..04e4f473274 100644 --- a/media/css/protocol/components/_sub-navigation.scss +++ b/media/css/protocol/components/_sub-navigation.scss @@ -32,10 +32,11 @@ } .c-sub-navigation-title { - @include font-base; - @include text-body-md; display: inline-block; + font-family: var(--body-font-family); + font-size: var(--text-body-md); font-weight: bold; + line-height: 1.5; margin-bottom: 0; a:link, @@ -56,8 +57,8 @@ (float, right, left), (margin-right, $spacing-sm, margin-left, $spacing-sm), )); - @include font-base; @include text-body-md; + font-family: var(--body-font-family); font-weight: bold; width: 40%; @@ -136,9 +137,9 @@ a:link, a:visited { - @include font-base; @include text-body-sm; color: $color-black; + font-family: var(--body-font-family); text-decoration: none; &:hover, diff --git a/media/css/protocol/protocol-mozilla-2024.scss b/media/css/protocol/protocol-mozilla-2024.scss new file mode 100644 index 00000000000..6b9a94864fd --- /dev/null +++ b/media/css/protocol/protocol-mozilla-2024.scss @@ -0,0 +1,181 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at https://mozilla.org/MPL/2.0/. + +// These are general styles for elements/components that occur on every page. +// Individual pages may include additional component styles as needed. +@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($brand-theme: 'mozilla', $type-scale: 'standard', $font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img'); +@use '~@mozilla-protocol/core/protocol/css/includes/themes'; +@use '~@mozilla-protocol/core/protocol/css/components/forms/form'; + +// Base elements - general HTML elements +@import '~@mozilla-protocol/core/protocol/css/base/elements'; + +// Base includes - animations +@import '~@mozilla-protocol/core/protocol/css/base/includes'; + +// Utility includes +@import '~@mozilla-protocol/core/protocol/css/base/utilities/backgrounds'; +@import '~@mozilla-protocol/core/protocol/css/base/utilities/titles'; + +// Global components +@import '~@mozilla-protocol/core/protocol/css/components/button'; +@import '~@mozilla-protocol/core/protocol/css/components/footer'; +@import '~@mozilla-protocol/core/protocol/css/components/language-switcher'; +@import 'components/download-button'; + +// Consent banner +@import '~@mozmeao/consent-banner/styles'; + +// Custom global components for nav and footer +// These will later be backported to Protocol +@import 'components/footer'; +@import 'components/navigation'; +@import 'components/menu'; +@import 'components/menu-item'; +@import 'components/sub-navigation'; + +// Mozilla 2024 brand variables +@import '../m24/vars/color'; +@import '../m24/vars/fonts'; +@import '../m24/vars/text'; + + +// Temporary styling until the newsletter component is updated in Protocol +// https://github.com/mozilla/protocol/issues/578 + +.mzp-c-newsletter-subtitle { + @include text-title-xs; +} + +.mzp-c-newsletter-desc { + @include text-body-md; +} + +.mzp-c-newsletter-details legend { + font-family: var(--body-font-family); +} + +#newsletter-submit + .mzp-c-fieldnote { + @include text-body-xs; + margin: 0 auto; + max-width: 30em; +} + +// style classes automatically added by python to match Protocol form error styles +.errorlist { + @include white-links; + background-color: form.$form-red; + border-radius: form.$field-border-radius; + color: $color-white; + padding: $spacing-sm; + margin-bottom: $spacing-xl; +} + +.error-msg { + @include light-links; + background-color: form.$form-red; + border-radius: form.$field-border-radius; + color: $color-white; + padding: $spacing-sm; + margin-bottom: $spacing-xl; +} + +// hide