Update banner styling for Forge 6.7

[DFurnes]

Changes

Some fresh new CSS! This PR adds the new banner style that's going to be introduced in Forge 6.7 to the pattern library, replacing the old banner style. :art:

Screenshots

With shorter heading text:

With longer text that expands past the yellow bar:

With extra-long text that wraps to another line:

And here it is on the profile page:

And on the action page:

And finally, here's how things look on mobile devices:

---

For review: @DoSomething/front-end @lkpttn

[DFurnes]

Ignore the :red_circle: from Wercker, that got fixed up in #535.

[weerd]

Does it make sense to still call this modifier .-banner? Just throwing that out there... I like the new look, but doesn't really seem like a banner now. Maybe .-emphasized

[weerd]

Not a huge deal though.. just thought I'd mention it. If otherwise fine, I'm cool with it ;) Would mean updating the templates, which is probs not much fun...

[DFurnes]

Mmm, I'd be open to adding .-emphasized as an alternative class name option (and perhaps deprecating .-banner), but since this is replacing the existing banner pattern I don't want to do anything that'd break existing client applications.

[lkpttn]

+1 C'Thun +1 Design

We might have to revisit the bottom space after we update the typographic scale..

[weerd]

@DFurnes yeah, good points. Maybe add a note regarding that somewheres?

:+1:

[DFurnes]

@weerd Good idea! Added #537 to track that.

Also just added a .-banner.-inverse for the "prove it" section in 0e4fb55.

[weerd]

:+1: :dancers: