To bring this full circle, here is the code for the larger final version with lots of padding for the thermometer container, but I ended up not using it due to lack of responsiveness on smaller screens:
https://ridgetoplakesconservancy.org/warehouse/Campaign-Thermometer-HTML-Code-(Original-Large).txt
And here is the code for the version with the tweaks necessary for the smaller screens:
https://ridgetoplakesconservancy.org/warehouse/Campaign-Thermometer-HTML-Code-(Small).txt
Note that the smaller version still shows the thermometer container having background color, border, and shadow. Just comment out those elements to get the fully transparent rendering. Certain text elements may be white, so if your implementation has a light background, adjust the font colors.
The code is heavily commented. Whack all that if it irritates you!
I have my html stack inside a Grummage 2Col stack from Big White Duck. Andrew (tav) provided some custom CSS to deal with an overflow issue that only appeared on an iPhone SE in landscape mode:
.com_bigwhiteduck_stacks_FoundationGrummage2Col_s3_stack:has(.thermometer)>.row, .com_bigwhiteduck_stacks_FoundationGrummage2Col_s3_stack:has(.thermometer)>.row>.columns{
-webkit-transform:none!important;
transform: none!important;
}
I am very pleased with how this turned out, and give Andrew (tav) a big thanks for his help.