diff --git a/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html b/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html
index 2168cc53b87..20b561459ef 100644
--- a/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html
+++ b/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html
@@ -5,11 +5,12 @@
#}
{% macro browser_border(
+ id=None,
class=None,
heading=None,
aria_label=None
) -%}
-
+
{% if heading and aria_label %}
{{ heading }}
diff --git a/bedrock/firefox/templates/firefox/nothing-personal/index.html b/bedrock/firefox/templates/firefox/nothing-personal/index.html
index 9e4af0d4342..3d026b67014 100644
--- a/bedrock/firefox/templates/firefox/nothing-personal/index.html
+++ b/bedrock/firefox/templates/firefox/nothing-personal/index.html
@@ -12,6 +12,7 @@
{% block page_css %}
{{ css_bundle('firefox-nothing-personal') }}
+ {{ css_bundle('protocol-newsletter') }}
{% endblock %}
{% block page_title_prefix %}Nothing Personal{% endblock %}
@@ -181,6 +182,21 @@ Ok, what’s the privacy-catch?
{% endcall %}
+
+ {% call browser_border(id="newsletter-signup", class='mzp-l-content mzp-t-content-md mzp-t-content-nospace', heading='Newsletter') %}
+
+
[Sign up for our newsletter]
+
+ {{ email_newsletter_form(
+ include_title=False,
+ include_language=False,
+ include_country=False,
+ newsletters='mozilla-and-you, nothing-personal-college-interest',
+ )}}
+
+
By subscribing, you’ll receive Mozilla updates, along with exclusive college-related content. You may unsubscribe at any time.
+
+ {% endcall %}
@@ -219,4 +235,5 @@
Ok, what’s the privacy-catch?
{% block js %}
{{ js_bundle('firefox-nothing-personal') }}
+ {{ js_bundle('newsletter') }}
{% endblock %}
diff --git a/bedrock/newsletter/forms.py b/bedrock/newsletter/forms.py
index e1413e91f58..7795b815732 100644
--- a/bedrock/newsletter/forms.py
+++ b/bedrock/newsletter/forms.py
@@ -175,6 +175,7 @@ class NewsletterFooterForm(forms.Form):
choice_labels = {
"mozilla-foundation": ftl("multi-newsletter-form-checkboxes-label-mozilla"),
"mozilla-and-you": ftl("multi-newsletter-form-checkboxes-label-firefox"),
+ "nothing-personal-college-interest": "Exclusive college-related content", # issue 15218.
}
email = forms.EmailField(widget=EmailInput(attrs={"required": "required", "data-testid": "newsletter-email-input"}))
diff --git a/media/css/firefox/nothing-personal/_browser.scss b/media/css/firefox/nothing-personal/_browser.scss
index fea36598d6f..6623945f840 100644
--- a/media/css/firefox/nothing-personal/_browser.scss
+++ b/media/css/firefox/nothing-personal/_browser.scss
@@ -102,10 +102,10 @@
.c-browser-window-top {
h2 {
- @include text-title-xl;
line-height: 1;
margin: 0;
padding-right: $spacing-lg;
+ @include text-title-xl;
}
&::after {
diff --git a/media/css/firefox/nothing-personal/_header.scss b/media/css/firefox/nothing-personal/_header.scss
index c48f2207dd8..e324aafe309 100644
--- a/media/css/firefox/nothing-personal/_header.scss
+++ b/media/css/firefox/nothing-personal/_header.scss
@@ -56,11 +56,11 @@
justify-self: end;
p {
- @include text-body-lg;
display: block;
font-family: 'Fira Mono', 'Andale Mono', monospace;
font-weight: 500;
margin: 0 $spacing-md 0 0;
+ @include text-body-lg;
}
}
}
diff --git a/media/css/firefox/nothing-personal/_primary-cta.scss b/media/css/firefox/nothing-personal/_primary-cta.scss
index 67182c7276d..68b7a5410d6 100644
--- a/media/css/firefox/nothing-personal/_primary-cta.scss
+++ b/media/css/firefox/nothing-personal/_primary-cta.scss
@@ -121,7 +121,6 @@ html.android {
.mzp-c-button,
#protocol-nav-download-firefox > .mzp-c-button {
- @include text-body-lg;
padding: $spacing-sm $spacing-lg;
background-color: $color-yellow-20;
background-image: linear-gradient(to right,$color-yellow-20, $color-orange-50, $color-yellow-20, $color-yellow-20);
@@ -130,6 +129,7 @@ html.android {
color: $color-black;
border-color: $color-black;
transition: all 0.3s ease-out;
+ @include text-body-lg;
@media (prefers-reduced-motion: reduce) {
background-image: linear-gradient(to right,$color-yellow-20, $color-orange-50);
diff --git a/media/css/firefox/nothing-personal/_sticky-note.scss b/media/css/firefox/nothing-personal/_sticky-note.scss
index 7f7f9fe7fb1..483dcef66ca 100644
--- a/media/css/firefox/nothing-personal/_sticky-note.scss
+++ b/media/css/firefox/nothing-personal/_sticky-note.scss
@@ -3,7 +3,6 @@
// file, You can obtain one at https://mozilla.org/MPL/2.0/.
.c-sticky-note {
- @include text-body-lg;
background-image: url('/media/img/firefox/nothing-personal/sticky-note-bg.svg');
background-repeat: no-repeat;
background-size: contain;
@@ -13,6 +12,7 @@
padding: $spacing-xl;
transform: rotate(11deg);
text-align: center;
+ @include text-body-lg;
&.c-detached-sticky {
position: relative;
@@ -67,11 +67,11 @@
margin-bottom: 0;
a {
- @include text-body-lg;
border: 0;
background: transparent;
color: $color-black;
padding: 0;
+ @include text-body-lg;
&:hover,
&:focus,
diff --git a/media/css/firefox/nothing-personal/styles.scss b/media/css/firefox/nothing-personal/styles.scss
index 4698656d81e..0bbb5fb412f 100644
--- a/media/css/firefox/nothing-personal/styles.scss
+++ b/media/css/firefox/nothing-personal/styles.scss
@@ -86,8 +86,8 @@ $mq-tad-smaller-sm: 455px;
}
.c-sign-off {
- @include text-title-xs;
margin: $layout-lg 0;
+ @include text-title-xs;
.c-nothing-personal {
padding: 12px;