Header banner for YEC '22

Hey @HackerNCoder! This year we're aiming to launch the Year End Campaign by October 13th (with some wiggle room to the following week if necessary). We position this banner above the site header on torproject.org, donate.torproject.org, community.torproject.org and support.torproject.org (you can see last year's on the wayback machine here).

Here's a mockup of this year's banner for mobile pending any edits from @duncan:

Desktop:

You can inspect files here: Figma

Mobile background image:

• yec-bg-mobile-2x
• yec-bg-mobile-3x

Mobile foreground image:

• yec-foreground-mobile-2x
• yec-foreground-mobile-3x

Desktop background image:

• yec-bg-desktop-banner-2x
• yec-bg-desktop-banner-3x

Desktop foreground image:

• yec-foreground-2x
• yec-foreground-3x

Fonts:

• Space Mono
• Space Grotesk
• I don't have the best understanding of what the devs have been doing so far to make these fonts work best for localization, but I think everything you might need to reference is here: tpo/applications/torbutton!92 (comment 2837686)

Buttons:

• Most of the button states are in the figma file
• Focus is not in the file but should follow what's being implemented in about:tor, which I believe is a 2px outline-offset, 2px width, and #C0FF00 for outline-color

Other notes:

• Minimum banner height should be 360px but will need to expand with localization
• Last year, there was this note from Duncan "I think it would work best if the button anchor links down to the main content area of donate.torproject.org" - not sure if that is the case again this year, tagging @smith here to weigh in

Let me know if you have any questions or if there's anything here that I should change. Thank you!!