Phase banner placement guidance incorrect and shares same background as cookie banner

[jrbarnes9]

Phase banner has no landmark role so it should be placed within <header> to be contained within the same, single "banner" landmark. This is the case when using base page template, but if not, the guidance only states:

The phase banner must be placed directly above the ONS header at the very top of the page.

...so it's not clear that it should be within {% block header %}

It also shares the same background as cookie banner so there is no distinction between the two banners.

Originally posted by @jrbarnes9 in #8 (comment)

[yatesn]

Documentation aspect has been done

[alessioventuriniAND]

Do we need to update the colour of the phase banner? @emilymaylawes can you please advice on this?

I have checked the documentations and it's now clear where to place the phase banner within the layout . Below if the doc reference :

Base page template
The phase banner component can be added to the top of the header using the base page template.

You can override this by manually adding it using the header block.

[emilymaylawes]

Design pushed into change looks like the below

Replacing the phase banner background colour with white, and adding a 1px bottom border with var(--ons-color-borders) to distinguish from both the cookie banner and the top section of the header that holds the ONS logo.