Implement amends to USAGM site landing page

This is the parent ticket for any amends to the USAGM landing page. Sub-tickets may be created for more complex amends.

Sizing/Weight

• Change size of all instances of onion padlock to 32x32px
• Change H1 type from 48px to 44px
• Change H2 type from 36px to 30px
• Change p type from 20px to 18px
• Change button typeface to NotoSans Semibold
• Change size of support graphic to 175px x 175px
• Hyperlinks within the dropdown should be the same size as paragraph, 18px
• In the 'Facing trouble' drop-down, bold all subheaders (Instructions on how to...)
• Text in div.onion.url-container at 999px screen increases, but should stay at 16px size
• At first page break (I think you have it set at 999px), type size should be adjusted as follows: h1 = 32px, h2 = 28px, h3 = 18px, p = 16px, button = 14px
• Can you change the drop down button text to be 1.00 em so its closer to 16px?
• Height of language button should only be 56px on desktop, and reduces to 48px at 999px, and then 40px at the mobile break (I think you have this currently at 575px)

Shadows

• Circumvent censorship container should have these shadow settings
• Add these shadow settings to Download Tor Browser, Get Support on Telegram, and Visit the Tor Project Forum.
• Change the footer shadow to reflect these settings

Spacing/Padding

• Add padding of 8px between onion padlock and start of URL/copy
• Language button should have 16px padding between language and carat, and should have 16px padding on both ends as well. The width of this button in the prototype has a width of 145px, height of 56px
• Should be 24px spacing between these elements in the header
• Increase spacing between Circumvent censorship div and Step 1 div to 72px
• Increase padding on Download Tor Browser so that the button height is 56px, and 16px padding on each side of the content inside button
• Add spacing between Step 1, 2, 3 divs of 72px
• Change the margin between text in div.child.step-text to 32px

Hover and click states (Figma page for component states)

• Nav bar text should follow hover and click behaviors for general links
• Language button should follow hover and click behaviors
• Onion site button should follow hover and click behaviors
• Drop-down buttons should follow hover and click behaviors

Color

• For each of these sites, we should only be using two colors, a foreground and background, in varying opacities, in addition to #000000 and #FFFFFF
• For the RFERL colors, the foreground color is #CF5C00 and the background is #EA6903
• These percentages should apply across all sites with their respective colors. If you need help figuring out what these colors are from the figma files let me know I'm happy to show you!
• Color of header bg shape is 7.5% opacity #EA6903
• Bg color of div.onion-url-container is 10% opacity #EA6903
• Type color of div.onion-url-container is #CF5C00
• Color of circle-bg element is 10% opacity #EA6903
• All hyperlink text color is #CF5C00
• Bg color of drop-down element (summary.no-marker) should be 3% opacity #000000 (same across all sites)
• Type color within all div.details-container should be 54% #000000

General

• Download Tor Browser button should be above 'facing trouble' drop-down element
• For users with javascript, change URL onion buttons to say 'Copy the onion address', and follow state patterns in the figma file here: https://www.figma.com/file/BydkbTJ87pfo7xhAGHsPGo/USAGM-Landing-Page?node-id=344%3A232
• Align the language button with the nav bar items so that they are in line with each other, centered horizontally. Example here from prototype

Responsive

• English button breaks at 1183px screen
• Circle-bg disappears at 999px screen
• We may want to break to mobile-responsive layout a little sooner, how does 575px sound?
• At 1569px screen, support buttons start wrapping text. Can we make this button size static so text doesn't wrap?
• At 575px or mobile break screen, support buttons should stack like this
• At 1090px screen, the carat breaks on the drop-down buttons. Maybe changing the type size smaller in the amend above will solve this issue?
• Something weird happening only at 1000px screen, nav bar breaks
• There's been a drastic jump at 1000px screen in the bottom support section. Line length goes from being very short to very long (can we find a static middle ground)
• The padding between social buttons is too large. It should be about 16px
• Alignment of the graphics breaks with their respective circle bgs at 1000px screen
• On mobile, there should be more padding all around the content in the header section , and the onion button should be centered.

New Amends as of 5/27

Language Drop-Down Overall, is it possible to try and get this visually a little closer to how it appears in the figma file?

• Increase padding between lines (20px in the figma file)
• Overall padding to left, right, top, and bottom should be 24px
• Type should be regular weight, not bold
• Hover state should be highlighted at 25% opacity of background color (#EA6903)
• Reduce background shadow - figma file is 5% #000000 with a blur of 20

All Buttons (besides language button)

• Remove underline hover state
• Changing padding on right to 24px

Tablet Nav Bar

• Change height of nav bar to the same as mobile (this was just a design change on our end!)

Logo

• Would it be possible to include an example logo so we can see how it works with the page? 56px height at desktop, 40px height at tablet, 24px height on mobile (to start, may have to adjust once we see it)

General

• Can we set a max-width of approximately 1200px for the main page content? Right now, the content just keeps stretching, and for larger screens it gets difficult to track information on the page.