Note: As the website is under construction, it is password protected
Hoping this is as simple as 'I missed a configuration option in the WYSIWYG editor', but if so, I haven't been able to find it 🙂
For a website I'm building, I'm wanting the footer to behave much like "Dynamic" headers do by default - I want them to inherit the foreground text color and the background of the final page section preceding them, and thereby have an 'integrated look' that does not look like a discrete footer. The footer for this website is about as minimalist as it gets - a copyright line pinned to the left corner, and a link list pinned to the right. So I am convinced that, for this website, it is the right approach to take aesthetically.
The challenge for me has been replicating this behavior consistently across the website. The last section of a particular page may use a different color theme than other pages, and on a few pages I leverage an animated art background. As aforementioned, the behavior I want for the footer is to simply behave as an extension of the preceding section from a style perspective - that is, match the text color, and extend the background of it. Therefore, I have had to customize the CSS for the footer background and text for each page, to ensure it matches the prior section.
For pages with sections that have static color backgrounds, it's easy enough to add CSS that is scoped to that page, and adjusts the footer foreground and background color to match. This looks great! The challenge is when I use an animated art background in the last section. If I simply color match the primary color of the art, it doesn't look great because the boundary between the section and footer is glaring and obvious,
After some experimentation, I just haven't been able to come up with a way to do this. I've tried absolute positioning of the footer and over-extending the prior section, but I can't get this to do anything but have the footer expose the page color beneath. I've also replicated the art background of the prior section for the footer itself, but this enacts a performance penalty on client devices, and still doesn't look convincing as the animations are separate and therefore still retain an ugly boundary line between them.
Is there any way to accomplish what I am describing with CSS (or native functionality)?