New MVP footer has <hr> element adding extra space

[reemhamz]

Description

The new MVP footer's pixelated design is only available on the home and about pages. However, on other pages that don't have it, there's an extra space from a leftover <hr> element

Steps to reproduce

• Go to a random page that isn't the home or about page (i.e. http://localhost:8000/en-US/advertising/)
• Scroll all the way to the bottom of the page
• Notice a grey horizontal line (<hr>) that's floating above the black footer with extra spacing above and below it.

Expected result

No <hr> element or space around it:

Actual result

An <hr> element with space around it:

What happened.

Environment

MacOS Sonoma 14.6.1, Firefox 130.0

[stephaniehobson]

I think the right thing to do here is to add the styles that transform the hr into the pixelated line. I think that means adding them to the footer's CSS files.

[janbrasna]

I have tried adding the transition divider styling everywhere in #15194, but… some pages that end with colour shapes don't work well with that, like:

Hiding the hr for now with low specificity .m24-c-transition * { display: none; } (that's only effective until the proper declaration is loaded) looks perhaps better — but that doesn't solve the issue once 2024 styles are turned on site-wide — when that divider gets styled globally and places with somewhat rectangular blocks ending the pages will display like this anyway…