Summary

GPAP Homepage Menu on Desktop has a different behavior than the main menus on other P4 Sites. Their proposal gives the site a more modern look, and their code is already there, so this might be an easy win! We won't change mobile screens for the moment, as we do encounter contrast issues with the Hamburger Menu and the Greenpeace logo on small devices... maybe we can tackle that further down the line in another ticket.

Requirements

Only on the Homepage

• The currently white menu bar should be transparent in the initial view of the homepage, with white font and white looking glass icon in the search field. 
• When scrolling down, the white bar should appear with the same transition effect that GPAP site has. When that happens the font should also change color to black to ensure legibility.
• The Greenpeace Logo should have a bigger size on the initial view of the homepage, when scrolling down the logo should decrease to the regular size (following the animated behavior of GPAP).
• The font weights should stay the way we have them. GPAP have their Menu Items in CAPSLOCK, and "Donate" is not bold. We should refrain from changing this.
• In theory, there shouldn't be any contrast issues with the font, because we use an overlay on the carrousel block that ensures enough contrast for legibility for the Headlines. But just in case, maybe we can do the UAT with particularly clear backgrounds on the carousel. 

Resources

• Figma File
• GPAP Homepage Menu on Desktop: https://www.greenpeace.org.au/