diff --git a/bedrock/mozorg/redirects.py b/bedrock/mozorg/redirects.py index 92c5a1bf93e..08f70759eda 100644 --- a/bedrock/mozorg/redirects.py +++ b/bedrock/mozorg/redirects.py @@ -559,8 +559,6 @@ def decider(request, **kwargs): redirect(r"^about/leadership/boards-of-directors/$", "/about/leadership/#boards"), # Issue 13672 redirect(r"/VendorDPA/?$", "https://assets.mozilla.net/pdf/VendorDPA.pdf", re_flags="i"), - # Issue 13754 - redirect(r"^rise-?25/?$", "https://rise25.mozilla.org/"), # Issue 14221 redirect(r"^firefox/products/?$", "/products/"), ) diff --git a/bedrock/mozorg/templates/mozorg/rise25/includes/hero-video.html b/bedrock/mozorg/templates/mozorg/rise25/includes/hero-video.html new file mode 100644 index 00000000000..52664e3c2fe --- /dev/null +++ b/bedrock/mozorg/templates/mozorg/rise25/includes/hero-video.html @@ -0,0 +1,32 @@ +{# + 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/. +#} + +
+ + + + {{ resp_img( + url='img/mozorg/rise25/hero-poster.jpg', + srcset={ + 'img/mozorg/rise25/hero-poster-high-res.jpg': '1.5x' + }, + optional_attributes={ + 'width': '680', + 'height': '383', + 'class': 'fallback', + 'alt': '' + } + ) }} + +
+ + diff --git a/bedrock/mozorg/templates/mozorg/rise25/includes/social-share.html b/bedrock/mozorg/templates/mozorg/rise25/includes/social-share.html new file mode 100644 index 00000000000..30939ca9dd7 --- /dev/null +++ b/bedrock/mozorg/templates/mozorg/rise25/includes/social-share.html @@ -0,0 +1,55 @@ +{# +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/. +#} + +
+

Share

+ +
diff --git a/bedrock/mozorg/templates/mozorg/rise25/landing.html b/bedrock/mozorg/templates/mozorg/rise25/landing.html new file mode 100644 index 00000000000..2bb4559f35a --- /dev/null +++ b/bedrock/mozorg/templates/mozorg/rise25/landing.html @@ -0,0 +1,243 @@ +{# + 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/. +#} + +{% extends "base-protocol.html" %} + +{% from "macros-protocol.html" import split with context %} + +{% block page_title %}Rise25 Awards: Call for Nominations{% endblock %} +{% block page_desc %}We’re seeking 25 visionaries using AI to drive social impact, offering them global recognition at our Dublin awards event.{% endblock %} +{% block page_image %}{{ static('img/mozorg/rise25/page-image.jpg') }}{% endblock %} + +{% block page_css %} + {{ css_bundle('protocol-split') }} + {{ css_bundle('rise25') }} +{% endblock %} + +{% block body_class %}rise25{% endblock %} + +{% set utm_params = '?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=rise25&utm_content=nominations-page' %} + +{% block content %} + + {% call split( + block_class='mzp-l-split-center-on-sm-md r25-hero', + media_class='mzp-l-split-v-center', + media_include='mozorg/rise25/includes/hero-video.html', + media_after=True, + ) %} +

Rise25

+

AI for the people

+

We’re seeking 25 visionaries using AI to drive social + impact, offering them global recognition at our Dublin awards event. By sharing + their stories widely, we’ll amplify their work and connect them with a community + dedicated to supporting responsible AI initiatives that benefit humanity. Know + an innovator making a difference with AI?

+

+ Call for nominees closes on
 + + Nominate someone + + + {{ resp_img( + url='img/mozorg/rise25/hero-thumb.jpg', + srcset={ + 'img/mozorg/rise25/hero-thumb-high-res.jpg': '1.5x' + }, + optional_attributes={ + 'width': '178', + 'height': '100', + 'class': 'fallback', + 'alt': '' + } + ) }} + +

+ {% endcall %} + +
+
+
+

Join us in spreading the word

+

Share the Rise25 call for nominations and help celebrate those shaping the future of AI to benefit people, not large corporations.

+ {% include "mozorg/rise25/includes/social-share.html" %} +
+ +
+ + + {{ resp_img( + url='img/mozorg/rise25/winners-poster.jpg', + srcset={ + 'img/mozorg/rise25/winners-poster-high-res.jpg': '1.5x' + }, + optional_attributes={ + 'width': '450', + 'height': '450', + 'class': 'fallback', + 'alt': '' + } + ) }} + +

See last year’s Rise25 winners

+
+
+
+ +
+

Nomination Categories

+ +
+
+

Advocates

+

Guiding AI towards a responsible future.

+

+ These are the policymakers, activists and thinkers ensuring AI is + developed ethically, inclusively and transparently. This category also + includes those who are adept at translating complex AI concepts for the + broader public — including journalists, content creators and cultural + commentators. They champion digital rights and accessible AI, striving + to make AI a force for societal good. +

+
+ +

+ Nominate +

+
+ +
+
+

Builders

+

Developing AI through ethical innovation.

+

+ They’re the architects of trustworthy AI, including engineers and data + scientists dedicated to the principles of open source, open data and + open science. They focus on technical proficiency and responsible and + ethical construction. Their work ensures AI is secure, accessible and + reliable, aiming to create tools that empower and advance society. +

+
+ +

+ Nominate +

+
+ +
+
+

Artists

+

Reimagining AI’s creative potential.

+

+ They transcend traditional AI applications, like synthesizing visuals + or using large language models. Their projects, whether interactive + websites, films, or digital media, challenge our perceptions and + demonstrate how AI can amplify and empower human creativity. Their work + provokes thought and offers fresh perspectives on the intersection of + AI and art. +

+
+ +

+ Nominate +

+
+ +
+
+

Entrepreneurs

+

Fueling AI’s evolution with visionary ventures.

+

+ These daring individuals are transforming imaginative ideas into reality. + They’re crafting businesses and solutions with AI to meet societal needs, + improve everyday life and forge new technological paths. They embody + innovation, steering startups and projects with a commitment to ethical + standards, inclusiveness and enhancing human welfare through technology. +

+
+ +

+ Nominate +

+
+ +
+
+

Change Agents

+

Cultivating inclusive AI.

+

+ Challengers lead the way in diversifying AI, bringing varied community + voices into tech. They focus on inclusivity in AI development, ensuring + technology serves and represents everyone, especially those historically + excluded from the tech narrative. They are community leaders, corporate + leaders, activists and outside-the-box thinkers finding ways to amplify + the impacts of AI for marginalized communities. Their work fosters an + AI environment of equality and empowerment. +

+
+ +

+ Nominate +

+
+
+ +
+
+
+

Who’s shaping the future of AI? We’re on the hunt.

+

+ Read our blog post +

+
+ + {{ resp_img( + url='img/mozorg/rise25/blog-thumbnail.jpg', + srcset={ + 'img/mozorg/rise25/blog-thumbnail-high-res.jpg': '1.5x' + }, + optional_attributes={ + 'width': '230', + 'height': '153', + 'class': 'r25-blog-image' + } + ) }} +
+ +
+

Help us spread the word!

+ {% include "mozorg/rise25/includes/social-share.html" %} +
+
+ +
+

FAQs

+ +
+

Why should I nominate someone for Rise25?

+

The selected honorees will be celebrated in Dublin this August and invited + to join the Rise25 cohort with past and current winners and part of the + Mozilla community. Mozilla will be covering the flight and hotel expenses + for the honorees and a plus one.

+ +

How much does it cost to enter?

+

There are no nomination fees or costs associated with the nomination form.

+ +

How will honorees be notified?

+

Mozilla will reach out to honorees via email later this year.

+ +

Who can I contact for more information?

+

Give us a shout at rise25@mozilla.com.

+
+
+{% endblock %} + +{% block js %} + {{ js_bundle('protocol-modal') }} + {{ js_bundle('rise25-landing') }} +{% endblock %} diff --git a/bedrock/mozorg/templates/mozorg/rise25/thanks.html b/bedrock/mozorg/templates/mozorg/rise25/thanks.html new file mode 100644 index 00000000000..c5e8d414f22 --- /dev/null +++ b/bedrock/mozorg/templates/mozorg/rise25/thanks.html @@ -0,0 +1,37 @@ +{# + 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/. +#} + +{% extends "base-protocol.html" %} + +{% block page_title %}Thanks for submitting your nomination for Rise 25{% endblock %} + +{% block page_css %} + {{ css_bundle('protocol-newsletter') }} + {{ css_bundle('rise25') }} +{% endblock %} + +{% block body_class %}rise25{% endblock %} + +{% block content %} +
+
+

Thanks for submitting your nomination

+
+ +
+ {{ email_newsletter_form( + newsletters='knowledge-is-power', + include_title=True, + title='Want to keep in touch? Stay connected with our mission to create a happier, healthier, and safer internet.', + button_class='r25-c-button t-fancy', + spinner_color='#fff' + ) }} +
+{% endblock %} + +{% block js %} + {{ js_bundle('newsletter') }} +{% endblock %} diff --git a/bedrock/mozorg/urls.py b/bedrock/mozorg/urls.py index e081766c700..381475b64a5 100644 --- a/bedrock/mozorg/urls.py +++ b/bedrock/mozorg/urls.py @@ -160,6 +160,8 @@ active_locales=["en-US", "de", "fr", "it"], ), path("antiharassment-tool/", views.anti_harassment_tool_view, name="mozorg.antiharassment-tool"), + page("rise25/", "mozorg/rise25/landing.html"), + page("rise25/thanks/", "mozorg/rise25/thanks.html"), ) if settings.DEV: diff --git a/media/css/mozorg/rise25/_lib.scss b/media/css/mozorg/rise25/_lib.scss new file mode 100644 index 00000000000..fb1b34eb79a --- /dev/null +++ b/media/css/mozorg/rise25/_lib.scss @@ -0,0 +1,11 @@ +// 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/. + +@import '~@mozilla-protocol/core/protocol/css/includes/lib'; + +$red: #b75d72; +$orange: #f37925; +$green: #79ff97; +$teal: #118a8a; +$purple: #a285d0; diff --git a/media/css/mozorg/rise25/components/blog.scss b/media/css/mozorg/rise25/components/blog.scss new file mode 100644 index 00000000000..2cbec53bcc9 --- /dev/null +++ b/media/css/mozorg/rise25/components/blog.scss @@ -0,0 +1,85 @@ +// 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/. + +@use '../lib' as r25; + +@import '~@mozilla-protocol/core/protocol/css/includes/lib'; + +// * -------------------------------------------------------------------------- */ +// Blog promo + +.r25-blog { + @include white-links; + background-image: linear-gradient(-40deg, fade-out(r25.$teal, 0.6) -100px, fade-out(r25.$teal, 1) 80%); + border-image: linear-gradient(-90deg, fade-out($color-white, 0.8), fade-out($color-white, 1) 60%) 1; + border-style: solid; + border-width: 1px 1px 1px 0; + padding: $spacing-lg; + + .r25-blog-title { + @include text-title-2xs; + } + + .r25-blog-image { + display: block; + margin: $spacing-lg auto 0; + border: 1px solid fade-out($color-black, 0.5); + } + + .r25-blog-cta { + font-weight: bold; + margin: 0; + + a:link, + a:visited { + text-decoration: none; + + &:hover, + &:focus { + text-decoration: underline; + } + + &::after { + content: " →"; + white-space: nowrap; + } + } + } + + @media #{$mq-sm} { + align-items: center; + column-gap: $layout-md; + display: grid; + grid-template-areas: "media body"; + + .r25-blog-body { + grid-area: body; + } + + .r25-blog-image { + grid-area: media; + } + } +} + +.r25-spread-secondary { + margin: $layout-md auto 0; + text-align: center; + + h3 { + @include text-title-xs; + margin: 0 auto $spacing-md; + } + + @media #{$mq-md} { + display: flex; + align-items: center; + column-gap: $layout-md; + justify-content: center; + + h3 { + margin: 0; + } + } +} diff --git a/media/css/mozorg/rise25/components/category.scss b/media/css/mozorg/rise25/components/category.scss new file mode 100644 index 00000000000..c66538f2fe5 --- /dev/null +++ b/media/css/mozorg/rise25/components/category.scss @@ -0,0 +1,163 @@ +// 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/. + +@use '../lib' as r25; + +@import '~@mozilla-protocol/core/protocol/css/includes/lib'; + +// * -------------------------------------------------------------------------- */ +// Nomination categories + +.r25-c-category { + @include text-body-lg; + border-top: 1px solid fade-out($color-white, 0.8); + padding: $layout-md 0; + + &:last-child { + border-bottom: 1px solid fade-out($color-white, 0.8); + } + + .r25-c-category-body { + max-width: $content-lg; + } + + .r25-c-category-desc { + @include text-body-xl; + margin: 0; + } + + .r25-c-category-expand { + @include text-body-md; + margin: $spacing-lg 0 $spacing-xl; + } + + .r25-c-category-cta { + .r25-c-button::after { + content: " →"; + } + } + + &:hover .r25-c-button { + background: $color-white; + color: $color-black; + } + + @supports (background-clip: text) { + .r25-c-category-title { + display: inline-block; + background-clip: text; + color: #fff8; + } + } + + @media #{$mq-md} { + column-gap: $layout-xl; + display: flex; + justify-content: space-between; + + .r25-c-category-expand { + margin-bottom: 0; + } + } + + &.r25-t-orange { + .r25-c-button { + background: $color-black radial-gradient(90% 500% at 90% 200%, fade-out(r25.$orange, 0.6) 0%, $color-black 100%); + } + + &:hover { + background: radial-gradient(50% 320% at 50% 50%, fade-out(r25.$orange, 0.65) 6%, fade-out(r25.$orange, 1) 100%); + + .r25-c-button { + background: $color-white radial-gradient(90% 500% at 90% 200%, fade-out(r25.$orange, 0.6) 0%, $color-white 100%); + } + } + + @supports (background-clip: text) { + .r25-c-category-title { + background-image: linear-gradient(to left, r25.$orange, $color-white); + } + } + } + + &.r25-t-green { + .r25-c-button { + background: $color-black radial-gradient(90% 500% at 90% 200%, fade-out(r25.$green, 0.5) 0%, $color-black 100%); + } + + &:hover { + background: radial-gradient(50% 320% at 50% 50%, fade-out(r25.$green, 0.75) 6%, fade-out(r25.$green, 1) 100%); + + .r25-c-button { + background: $color-white radial-gradient(90% 500% at 90% 200%, fade-out(r25.$green, 0.5) 0%, $color-white 100%); + } + } + + @supports (background-clip: text) { + .r25-c-category-title { + background-image: linear-gradient(to left, r25.$green, $color-white); + } + } + } + + &.r25-t-purple { + .r25-c-button { + background: $color-black radial-gradient(90% 500% at 90% 200%, fade-out(r25.$purple, 0.5) 0%, $color-black 100%); + } + + &:hover { + background: radial-gradient(50% 320% at 50% 50%, fade-out(r25.$purple, 0.65) 6%, fade-out(r25.$purple, 1) 100%); + + .r25-c-button { + background: $color-white radial-gradient(90% 500% at 90% 200%, fade-out(r25.$purple, 0.5) 0%, $color-white 100%); + } + } + + @supports (background-clip: text) { + .r25-c-category-title { + background-image: linear-gradient(to left, r25.$purple, $color-white); + } + } + } + + &.r25-t-teal { + .r25-c-button { + background: $color-black radial-gradient(90% 500% at 90% 200%, fade-out(r25.$teal, 0.5) 0%, $color-black 100%); + } + + &:hover { + background: radial-gradient(50% 320% at 50% 50%, fade-out(r25.$teal, 0.55) 6%, fade-out(r25.$teal, 1) 100%); + + .r25-c-button { + background: $color-white radial-gradient(90% 500% at 90% 200%, fade-out(r25.$teal, 0.5) 0%, $color-white 100%); + } + } + + @supports (background-clip: text) { + .r25-c-category-title { + background-image: linear-gradient(to left, r25.$teal, $color-white); + } + } + } + + &.r25-t-red { + .r25-c-button { + background: $color-black radial-gradient(90% 500% at 90% 200%, fade-out(r25.$red, 0.5) 0%, $color-black 100%); + } + + &:hover { + background: radial-gradient(50% 320% at 50% 50%, fade-out(r25.$red, 0.65) 6%, fade-out(r25.$red, 1) 100%); + + .r25-c-button { + background: $color-white radial-gradient(90% 500% at 90% 200%, fade-out(r25.$red, 0.5) 0%, $color-white 100%); + } + } + + @supports (background-clip: text) { + .r25-c-category-title { + background-image: linear-gradient(to left, r25.$red, $color-white); + } + } + } +} diff --git a/media/css/mozorg/rise25/components/faq.scss b/media/css/mozorg/rise25/components/faq.scss new file mode 100644 index 00000000000..eaab110969a --- /dev/null +++ b/media/css/mozorg/rise25/components/faq.scss @@ -0,0 +1,65 @@ +// 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/. + +@use '../lib' as r25; + +@import '~@mozilla-protocol/core/protocol/css/includes/lib'; + +// * -------------------------------------------------------------------------- */ +// FAQs + +.r25-faq { + @include white-links; + margin-top: $layout-md; + + .r25-faq-heading { + @include text-title-2xs; + margin: $spacing-xl 0; + + &::before { + content: ""; + display: block; + width: 100%; + border-top: 1px solid fade-out($color-white, 0.8); + position: relative; + top: -$spacing-md; + } + } + + p { + max-width: $content-md; + margin-bottom: $layout-lg; + } + + &.mzp-c-details .is-summary button::before { + width: 30px; + height: 30px; + border-radius: 1em; + margin-top: -1em; + transition: background-color 100ms ease-in, transform 100ms ease-in; + background-position: center center; + background-size: 14px 14px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='m0 8.2 1.8-1.8 4.8 4.7V0h2.7v11.1l4.8-4.7L16 8.2 8 16 0 8.2z'/%3E%3C/svg%3E"); + + @media #{$mq-md} { + margin-top: -0.75em; + } + } + + &.mzp-c-details .is-summary button[aria-expanded="true"]::before { + background-color: $color-white; + transform: rotate(180deg); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='m0 8.2 1.8-1.8 4.8 4.7V0h2.7v11.1l4.8-4.7L16 8.2 8 16 0 8.2z'/%3E%3C/svg%3E"); + } + + &.mzp-c-details .is-summary:hover button::before, + &.mzp-c-details .is-summary:focus button::before { + background-color: #555; + } + + &.mzp-c-details .is-summary:hover button[aria-expanded="true"]::before, + &.mzp-c-details .is-summary:focus button[aria-expanded="true"]::before { + background-color: #ddd; + } +} diff --git a/media/css/mozorg/rise25/components/hero.scss b/media/css/mozorg/rise25/components/hero.scss new file mode 100644 index 00000000000..eb1cda1acce --- /dev/null +++ b/media/css/mozorg/rise25/components/hero.scss @@ -0,0 +1,192 @@ +// 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/. + +@use '../lib' as r25; + +@import '~@mozilla-protocol/core/protocol/css/includes/lib'; + +// * -------------------------------------------------------------------------- */ +// Hero + +.r25-hero { + background-color: transparent; + + .r25-hero-intro { + @include text-body-lg; + } + + .r25-hero-cta { + .r25-hero-notice { + display: block; + margin: 0 auto $spacing-lg; + max-width: $content-sm; + text-align: center; + + @supports (background-clip: text) { + background-image: linear-gradient(110deg, $color-white -5%, r25.$orange 108%); + background-clip: text; + color: fade-out($color-white, 0.8); + } + } + + .video-play { + display: block; + position: relative; + margin: $spacing-xl auto 0; + + img, + video { + border: 1px solid fade-out($color-black, 0.5); + } + + &::after { + background: url("/media/img/mozorg/rise25/play-button.svg") center center no-repeat; + background-size: 50px 50px; + top: 50%; + content: ""; + display: block; + margin: -27px 0 0 -27px; + height: 54px; + width: 54px; + position: absolute; + left: 50%; + transition: background-size 100ms ease-in-out; + z-index: 2; + } + + &:focus-visible { + outline: 0; + } + + &:hover::after, + &:focus::after { + background-size: 54px 54px; + } + } + + .r25-c-button { + span { + display: none; + } + + &::after { + content: " ↓"; + white-space: nowrap; + } + } + + @media #{$mq-sm} { + align-items: center; + display: grid; + gap: $spacing-lg; + grid-template-areas: "notice notice" + "video button"; + justify-content: center; + + .r25-hero-notice { + grid-area: notice; + + br { + display: none; + } + } + + .video-play { + grid-area: video; + margin: 0; + } + + .r25-c-button { + grid-area: button; + } + } + + @media #{$mq-md} { + justify-content: start; + row-gap: $spacing-xl; + grid-template-areas: "notice" + "button"; + + .r25-hero-notice { + text-align: start; + margin: 0; + } + + .r25-c-button span { + display: inline; + } + + .video-play { + display: none; + } + } + + @media #{$mq-lg} { + grid-template-areas: "button notice"; + column-gap: $spacing-2xl; + } + + @media #{$mq-xl} { + .r25-hero-notice br { + display: block; + } + } + } + + .r25-hero-video { + display: none; + + .video-play { + &::after { + @include border-box; + background: url("/media/img/mozorg/rise25/play-button.svg") right 2px center no-repeat; + background-size: 50px 50px; + bottom: $spacing-lg; + color: $color-white; + content: "Play video"; + display: block; + font-weight: bold; + min-height: 50px; + padding: $spacing-md 70px $spacing-md; + position: absolute; + right: $spacing-lg; + transition: background-size 100ms ease-in-out, background-position 100ms ease-in-out; + z-index: 2; + } + + &:focus-visible { + outline: 0; + } + + &:hover::after, + &:focus::after { + background-size: 54px 54px; + background-position: right 0 center; + } + } + + video, + img { + border: 1px solid fade-out($color-black, 0.5); + } + + .fallback { + display: none; + } + + @media #{$mq-md} { + display: block; + } + + @media (prefers-reduced-motion: reduce) { + video { + display: none; + } + + .fallback { + display: inline-block; + } + } + } +} diff --git a/media/css/mozorg/rise25/components/promote.scss b/media/css/mozorg/rise25/components/promote.scss new file mode 100644 index 00000000000..bec1abbe8bb --- /dev/null +++ b/media/css/mozorg/rise25/components/promote.scss @@ -0,0 +1,129 @@ +// 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/. + +@use '../lib' as r25; + +@import '~@mozilla-protocol/core/protocol/css/includes/lib'; + +// * -------------------------------------------------------------------------- */ +// Past winners and spread the word + +.r25-promote { + .r25-promote-body { + background-image: linear-gradient(330deg, fade-out(r25.$purple, 0.6) -100px, fade-out(r25.$purple, 1) 80%); + border-image: linear-gradient(350deg, fade-out(r25.$purple, 0.5), fade-out(r25.$purple, 1) 70%) 1; + border-style: solid; + border-width: 0 1px 1px; + padding: $spacing-xl; + margin-top: -$spacing-2xl; + text-align: center; + } + + .r25-promote-video { + text-align: center; + margin-top: $layout-md; + + .video { + display: none; + } + + .fallback { + display: block; + } + + img, + video { + margin: 0 auto; + border: 1px solid fade-out($color-black, 0.5); + } + } + + @media #{$mq-md} { + .r25-promote-container { + align-items: center; + background-image: linear-gradient(-40deg, fade-out(r25.$purple, 0.6) -100px, fade-out(r25.$purple, 1) 80%); + border-image: linear-gradient(-45deg, fade-out(r25.$purple, 0.5), fade-out(r25.$purple, 1) 80%) 1; + border-style: solid; + border-width: 0 1px 1px 0; + column-gap: $spacing-2xl; + display: grid; + grid-template-areas: "video body"; + grid-template-columns: 40% 1fr; + margin-top: -$spacing-2xl; + padding: $spacing-2xl; + } + + .r25-promote-body { + @include text-body-xl; + background: transparent none; + border-image: none; + border: 0; + grid-area: body; + margin: 0; + padding: 0; + text-align: start; + } + + .r25-promote-video { + grid-area: video; + margin: 0 auto; + + .video { + display: block; + } + + .fallback { + display: none; + } + } + } + + @media #{$mq-md} and (prefers-reduced-motion: reduce) { + .r25-promote-video { + .video { + display: none; + } + + .fallback { + display: block; + } + } + } +} + +.r25-c-past-cta { + margin: $spacing-md 0 0; + + a:link, + a:visited { + @include text-body-lg; + font-weight: bold; + text-decoration: none; + + &::after { + content: " →"; + transition: margin 100ms ease-in, padding 100ms ease-in; + white-space: nowrap; + } + + &:hover::after, + &:focus::after { + left: $spacing-xs; + margin-right: -$spacing-xs; + padding-left: $spacing-xs; + } + + @supports (background-clip: text) { + background-image: linear-gradient(110deg, r25.$orange -5%, r25.$red 35%, r25.$purple 70%, r25.$teal 108%); + background-clip: text; + color: fade-out($color-white, 0.8); + transition: color 100ms ease-in; + + &:hover, + &:focus { + color: $color-white; + } + } + } +} diff --git a/media/css/mozorg/rise25/components/social.scss b/media/css/mozorg/rise25/components/social.scss new file mode 100644 index 00000000000..6577492442b --- /dev/null +++ b/media/css/mozorg/rise25/components/social.scss @@ -0,0 +1,134 @@ +// 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/. + +@use '../lib' as r25; + +@import '~@mozilla-protocol/core/protocol/css/includes/lib'; + +// * -------------------------------------------------------------------------- */ +// Social share widget + +.r25-c-social-share { + --social-share-color: #bbb; + @include text-body-sm; + display: flex; + align-items: center; + justify-content: center; + color: var(--social-share-color); + + .social-share-title { + font-weight: 900; + margin-bottom: 0; + margin-right: $spacing-sm; + text-transform: uppercase; + } + + @media #{$mq-md} { + justify-content: flex-start; + } + + .social-share-list { + display: flex; + margin: 0; + + .visually-hidden { + @include visually-hidden; + } + + a, + button { + background: transparent; + width: 30px; + height: 30px; + margin-left: $spacing-xs; + margin-right: $spacing-xs; + border: 1px solid var(--social-share-color); + border-radius: $border-radius-lg; + display: flex; + color: var(--social-share-color); + align-items: center; + justify-content: center; + appearance: none; + + &:hover, + &:focus { + --social-share-color: #fff; + } + } + + button { + height: 32px; + width: 32px; + position: relative; + + &:hover { + cursor: pointer; + } + + .social-share-copy, + .social-share-copied { + @include text-body-sm; + background: $color-white; + border-radius: $border-radius-sm; + bottom: -50px; + color: $color-black; + display: block; + height: auto; + left: -100%; + opacity: 0; + padding: $spacing-xs $spacing-sm; + pointer-events: none; + position: absolute; + text-align: center; + width: max-content; + + &::after { + border-color: transparent transparent #fff; + border-style: solid; + border-width: 9px; + content: ''; + left: calc(25% + 1px); + opacity: 0; + position: absolute; + top: 1px; + transform: translateY(-100%); + } + } + + .social-share-copied { + display: none; + opacity: 1; + left: -75%; + + &::after { + content: ''; + position: absolute; + border-width: 9px; + border-style: solid; + border-color: transparent transparent #fff; + opacity: 1; + top: 1px; + left: calc(25% + 1px); + transform: translateY(-100%); + } + } + + @media #{$mq-md} { + .social-share-copied { + &::before { + bottom: $spacing-xs; + } + } + + &:hover, + &:active { + .social-share-copy, + .social-share-copy::after { + opacity: 1; + } + } + } + } + } +} diff --git a/media/css/mozorg/rise25/rise25.scss b/media/css/mozorg/rise25/rise25.scss new file mode 100644 index 00000000000..9c6685c2e97 --- /dev/null +++ b/media/css/mozorg/rise25/rise25.scss @@ -0,0 +1,167 @@ +// 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/. + +@use "~@mozilla-protocol/core/protocol/css/includes/lib" as * with ($image-path: "/media/protocol/img"); + +@use 'lib' as r25; + +@use "./components/hero.scss"; +@use "./components/promote.scss"; +@use "./components/social.scss"; +@use "./components/category.scss"; +@use "./components/blog.scss"; +@use "./components/faq.scss"; + +@use "~@mozilla-protocol/core/protocol/css/components/modal"; +@use "~@mozilla-protocol/core/protocol/css/components/video"; + +@font-face { + font-display: swap; + font-family: Inter; + font-style: normal; + font-weight: 900; + src: + url("/media/fonts/rise25/Inter-ExtraBold.woff2") format("woff2"), + url("/media/fonts/rise25/Inter-ExtraBold.woff") format("woff"); +} + +// * -------------------------------------------------------------------------- */ +// Smooth scroll + +html { + scroll-behavior: smooth; + + @media (prefers-reduced-motion: reduce) { + scroll-behavior: auto; + } +} + +// * -------------------------------------------------------------------------- */ +// Common elements + +body.rise25 { + #outer-wrapper { + background-color: $color-black; + background-image: linear-gradient(135deg, fade-out(r25.$orange, 0.5) -100px, fade-out(r25.$orange, 1) 500px), + linear-gradient(-135deg, fade-out(r25.$teal, 0.25) -100px, fade-out(r25.$teal, 1) 500px); + color: #d9d9d9; + } + + h1, h2, h3 { + @include font-base; + color: #d9d9d9; + } + + .r25-fancy-title { + @include text-title-xl; + font-weight: 900; + display: inline-block; + + @supports (background-clip: text) { + background-image: linear-gradient(110deg, r25.$teal -10%, r25.$purple 35%, r25.$red 60%, r25.$orange 108%); + background-clip: text; + color: fade-out($color-white, 0.8); + } + } +} + +.r25-c-wordmark { + @include image-replaced; + background: url("/media/img/mozorg/rise25/rise25-wordmark-white.svg") center top no-repeat; + background-size: contain; + display: block; + height: 30px; + margin: 0 auto $spacing-md; + width: 150px; + + @media #{$mq-md} { + margin: 0 0 $spacing-md; + } +} + +.r25-section-title { + @include text-title-xl; +} + +.r25-c-button { + @include border-box; + @include font-size(16px); + background: $color-black; + border-radius: 2em; + box-shadow: 0 -1px 2px fade-out($color-white, 0.4); + color: $color-white; + display: inline-block; + font-weight: bold; + padding: $spacing-sm $spacing-xl; + text-align: center; + text-decoration: none !important; /* stylelint-disable-line declaration-no-important */ + transition: background-color 100ms ease-in, color 100ms ease-in; + white-space: nowrap; + + &::-moz-focus-inner { + border: 0; + } + + &:hover, + &:focus { + background: $color-white; + color: $color-black; + } + + &.t-fancy { + background: hotpink linear-gradient(115deg, fade-out(r25.$orange, 0.2) -10%, fade-out(r25.$red, 0.2) 35%, fade-out(r25.$purple, 0.2) 70%, fade-out(r25.$teal, 0.2) 105%); + border: 0; + box-shadow: none; + padding: 6px $spacing-md; + text-shadow: 0 1px 0 fade-out($color-black, 0.8); + + &:hover, + &:focus { + background-color: darkmagenta; + color: $color-white; + } + + @media #{$mq-md} { + padding: 12px $spacing-xl; + } + } +} + +// * -------------------------------------------------------------------------- */ +// Thanks page + +.r25-thanks-body { + text-align: center; + + .r25-c-wordmark { + margin: 0 auto $layout-md; + } + + .r25-fancy-title { + max-width: $content-md; + } +} + +.r25-thanks-newsletter { + .mzp-c-newsletter-form { + @include white-links; + + .mzp-c-newsletter-title { + @include text-body-lg; + font-weight: normal; + text-align: center; + margin: 0 auto $spacing-lg; + } + + .mzp-c-newsletter-content { + max-width: $content-sm; + margin: 0 auto; + } + + .mzp-c-button { + width: auto; + border: 0; + } + } +} diff --git a/media/fonts/rise25/Inter-Black.woff b/media/fonts/rise25/Inter-Black.woff deleted file mode 100644 index a18593a096e..00000000000 Binary files a/media/fonts/rise25/Inter-Black.woff and /dev/null differ diff --git a/media/fonts/rise25/Inter-Black.woff2 b/media/fonts/rise25/Inter-Black.woff2 deleted file mode 100644 index 68f64c9ed98..00000000000 Binary files a/media/fonts/rise25/Inter-Black.woff2 and /dev/null differ diff --git a/media/fonts/rise25/Inter-ExtraBold.woff b/media/fonts/rise25/Inter-ExtraBold.woff new file mode 100644 index 00000000000..c2c17edead6 Binary files /dev/null and b/media/fonts/rise25/Inter-ExtraBold.woff differ diff --git a/media/fonts/rise25/Inter-ExtraBold.woff2 b/media/fonts/rise25/Inter-ExtraBold.woff2 new file mode 100644 index 00000000000..c24c2bdc2f0 Binary files /dev/null and b/media/fonts/rise25/Inter-ExtraBold.woff2 differ diff --git a/media/img/mozorg/rise25/blog-thumbnail-high-res.jpg b/media/img/mozorg/rise25/blog-thumbnail-high-res.jpg new file mode 100644 index 00000000000..bf8410d5e99 Binary files /dev/null and b/media/img/mozorg/rise25/blog-thumbnail-high-res.jpg differ diff --git a/media/img/mozorg/rise25/blog-thumbnail.jpg b/media/img/mozorg/rise25/blog-thumbnail.jpg new file mode 100644 index 00000000000..875b996ff93 Binary files /dev/null and b/media/img/mozorg/rise25/blog-thumbnail.jpg differ diff --git a/media/img/mozorg/rise25/hero-poster-high-res.jpg b/media/img/mozorg/rise25/hero-poster-high-res.jpg new file mode 100644 index 00000000000..325d4abe831 Binary files /dev/null and b/media/img/mozorg/rise25/hero-poster-high-res.jpg differ diff --git a/media/img/mozorg/rise25/hero-poster.jpg b/media/img/mozorg/rise25/hero-poster.jpg new file mode 100644 index 00000000000..374d0e25e5b Binary files /dev/null and b/media/img/mozorg/rise25/hero-poster.jpg differ diff --git a/media/img/mozorg/rise25/hero-thumb-high-res.jpg b/media/img/mozorg/rise25/hero-thumb-high-res.jpg new file mode 100644 index 00000000000..0457490a42e Binary files /dev/null and b/media/img/mozorg/rise25/hero-thumb-high-res.jpg differ diff --git a/media/img/mozorg/rise25/hero-thumb.jpg b/media/img/mozorg/rise25/hero-thumb.jpg new file mode 100644 index 00000000000..66e26ee24be Binary files /dev/null and b/media/img/mozorg/rise25/hero-thumb.jpg differ diff --git a/media/img/mozorg/rise25/page-image.jpg b/media/img/mozorg/rise25/page-image.jpg new file mode 100644 index 00000000000..ed293e9c54e Binary files /dev/null and b/media/img/mozorg/rise25/page-image.jpg differ diff --git a/media/img/mozorg/rise25/play-button.svg b/media/img/mozorg/rise25/play-button.svg new file mode 100644 index 00000000000..46a81a1be18 --- /dev/null +++ b/media/img/mozorg/rise25/play-button.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/media/img/mozorg/rise25/rise25-wordmark-white.svg b/media/img/mozorg/rise25/rise25-wordmark-white.svg new file mode 100644 index 00000000000..7af942dbc95 --- /dev/null +++ b/media/img/mozorg/rise25/rise25-wordmark-white.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/media/img/mozorg/rise25/winners-poster-high-res.jpg b/media/img/mozorg/rise25/winners-poster-high-res.jpg new file mode 100644 index 00000000000..f5cf62264a9 Binary files /dev/null and b/media/img/mozorg/rise25/winners-poster-high-res.jpg differ diff --git a/media/img/mozorg/rise25/winners-poster.jpg b/media/img/mozorg/rise25/winners-poster.jpg new file mode 100644 index 00000000000..ea3513cad37 Binary files /dev/null and b/media/img/mozorg/rise25/winners-poster.jpg differ diff --git a/media/js/mozorg/rise25/rise25.js b/media/js/mozorg/rise25/rise25.js new file mode 100644 index 00000000000..ab1e61d956e --- /dev/null +++ b/media/js/mozorg/rise25/rise25.js @@ -0,0 +1,226 @@ +/* + * 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/. + */ + +/* eslint no-unused-vars: [2, { "varsIgnorePattern": "onYouTubeIframeAPIReady" }] */ + +// YouTube API hook has to be in global scope, ugh. +window.onYouTubeIframeAPIReady = function () { + 'use strict'; + + // Play the video only once the API is ready. + Mozilla.heroVideoPlay(); +}; + +(function () { + 'use strict'; + + var facebookShare = document.querySelectorAll( + '.r25-c-social-share .facebook' + ); + var twitterShare = document.querySelectorAll( + '.r25-c-social-share .twitter' + ); + var emailShare = document.querySelectorAll('.r25-c-social-share .email'); + var copyLinks = document.querySelectorAll('.r25-c-social-share .copy-text'); + var timeout; + + function generateTweet() { + var tweetUrl = encodeURIComponent( + 'https://www.mozilla.org/rise25/?utm_campaign=rise25&utm_medium=organicsocial&utm_source=twitter&utm_content=rise25-share' + ); + var tweetText = encodeURIComponent( + 'Mozilla is on the hunt for 25 visionaries making AI better for the people — not big corporations. \n\nWinners will be honored at the upcoming Rise25 awards in Dublin, Ireland. Submit your nomination today! \n\n' + ); + return ( + 'https://www.twitter.com/intent/tweet?url=' + + tweetUrl + + '&text=' + + tweetText + ); + } + + function generateFacebookShare() { + var shareUrl = encodeURIComponent( + 'https://www.mozilla.org/rise25/?utm_campaign=rise25&utm_medium=organicsocial&utm_source=facebook&utm_content=rise25-share' + ); + var shareText = encodeURIComponent( + 'Mozilla is on the hunt for 25 visionaries making AI better for the people — not big corporations. \n\nWinners will be honored at the upcoming Rise25 awards in Dublin, Ireland. Submit your nomination today! \n\n' + ); + return ( + 'https://facebook.com/sharer.php?u=' + + shareUrl + + '"e=' + + shareText + ); + } + + function handleCopyLink(e) { + e.preventDefault; + navigator.clipboard.writeText('https://www.mozilla.com/rise25/'); + + var copyText = e.currentTarget.querySelector('.social-share-copy'); + var copiedText = e.currentTarget.querySelector('.social-share-copied'); + + clearTimeout(timeout); + + copiedText.style.display = 'block'; + copyText.style.display = 'none'; + + timeout = setTimeout(function () { + copiedText.style.display = 'none'; + copyText.style.display = 'block'; + }, 2000); + } + + // used iifies to set attributes since the variables for `index` was being overwritten by each other + (function () { + for (var index = 0; index < facebookShare.length; index++) { + var element = facebookShare[index]; + element.href = generateFacebookShare(); + } + })(); + + (function () { + for (var index = 0; index < twitterShare.length; index++) { + var element = twitterShare[index]; + element.href = generateTweet(); + } + })(); + + (function () { + var subject = encodeURIComponent('Who will you nominate for Rise 25?'); + var body = encodeURIComponent( + 'Mozilla is searching for 25 visionaries making AI better for the people — not big corporations. Seeking individuals across 5 categories: Advocates, Builders, Artists, Entrepreneurs, and Change Agents. \n\nWinners will be honored at the upcoming Rise25 awards in Dublin, Ireland. Nominations close March 29. Get your nomination in today! \n\nNominate someone: https://www.mozilla.org/rise25/' + ); + for (var index = 0; index < emailShare.length; index++) { + var element = emailShare[index]; + element.href = 'mailto:?subject=' + subject + '&body=' + body; + } + })(); + + for (var index = 0; index < copyLinks.length; index++) { + var element = copyLinks[index]; + element.addEventListener('click', handleCopyLink); + } + + // Video + var heroVideo = document.querySelector('.r25-hero .video-player'); + var videoTitle = heroVideo.getAttribute('data-video-title'); + var videoId = heroVideo.getAttribute('data-video-id'); + var src = 'https://www.youtube.com/iframe_api'; + var player; + + function loadScript() { + var tag = document.createElement('script'); + tag.src = src; + var firstScriptTag = document.getElementsByTagName('script')[0]; + firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); + } + + function isScriptLoaded() { + return document.querySelector('script[src="' + src + '"]') + ? true + : false; + } + + function playVideo() { + // if youtube API fails or is blocked, try redirecting to youtube.com + if (typeof window.YT === 'undefined') { + window.location.href = 'https://www.youtube.com/watch?v=' + videoId; + } + + player = new window.YT.Player(heroVideo, { + width: 640, + height: 360, + videoId: videoId, + playerVars: { + modestbranding: 1, // hide YouTube logo. + rel: 0 // do not show related videos on end. + }, + events: { + onReady: onPlayerReady, + onStateChange: onPlayerStateChange + } + }); + + function onPlayerReady(event) { + event.target.playVideo(); + } + + function onPlayerStateChange(event) { + var state; + + switch (event.data) { + case window.YT.PlayerState.PLAYING: + state = 'video play'; + break; + case window.YT.PlayerState.PAUSED: + state = 'video paused'; + break; + case window.YT.PlayerState.ENDED: + state = 'video complete'; + break; + } + + if (state) { + window.dataLayer.push({ + event: 'video-interaction', + videoTitle: videoTitle, + interaction: state + }); + } + } + } + + function initVideoPlayer() { + // check to see if you youtube API is loaded before trying to play the video. + if (!isScriptLoaded()) { + loadScript(); + } else { + playVideo(); + } + } + + function destroyVideoPlayer() { + if (player) { + player.destroy(); + } + } + + function openVideoModal(e) { + e.preventDefault(); + + var content = document.querySelector('.mzp-u-modal-content'); + + window.MzpModal.createModal(e.target, content, { + title: videoTitle, + className: 'mzp-has-media', + onCreate: initVideoPlayer, + onDestroy: destroyVideoPlayer + }); + } + + function initVideo() { + var heroVideoButtons = document.querySelectorAll( + '.r25-hero .js-video-play' + ); + + for (var i = 0; i < heroVideoButtons.length; i++) { + heroVideoButtons[i].setAttribute('role', 'button'); + heroVideoButtons[i].addEventListener( + 'click', + openVideoModal, + false + ); + } + } + + Mozilla.heroVideoPlay = playVideo; + + if (heroVideo) { + initVideo(); + } +})(); diff --git a/media/static-bundles.json b/media/static-bundles.json index ae9a6d69baa..47ad7019af1 100644 --- a/media/static-bundles.json +++ b/media/static-bundles.json @@ -1307,6 +1307,12 @@ "css/mozorg/antiharassment-tool.scss" ], "name": "antiharassment-tool" + }, + { + "files": [ + "css/mozorg/rise25/rise25.scss" + ], + "name": "rise25" } ], "js": [ @@ -1978,7 +1984,12 @@ "js/mozorg/home/monitor-banner-init.js" ], "name": "monitor-banner" + }, + { + "files": [ + "js/mozorg/rise25/rise25.js" + ], + "name": "rise25-landing" } - ] } diff --git a/tests/redirects/map_globalconf.py b/tests/redirects/map_globalconf.py index 6b746a99bd1..498f4678d9d 100644 --- a/tests/redirects/map_globalconf.py +++ b/tests/redirects/map_globalconf.py @@ -1220,9 +1220,6 @@ url_test("/vendordpa/", "https://assets.mozilla.net/pdf/VendorDPA.pdf"), # Issue 13732 url_test("/firefox/welcome/3/", "/firefox/accounts/"), - # Issue 13754 - url_test("/rise25/", "https://rise25.mozilla.org/"), - url_test("/rise-25/", "https://rise25.mozilla.org/"), url_test("/firefox/mobile/get-app/", "/firefox/browsers/mobile/get-app/"), url_test("/contact/spaces/paris/", "/contact/spaces/"), # Issue 13924