isolating pages to change the look of one section of the site - 7.0

Hi - I've created a section of the school's website (Post 16) to look different to the rest of the site / different logo etc...  I've added this code to each of the pages in the post 16 section:

<style>.has-logo-image .Header-branding img{content:url(https://static1.squarespace.com/static/61093bde32e48d7f4093051d/t/64afdbaa9871ca44d701a46c/1689246635441/POST16+.png); 
background-size: contain; background-repeat: no-repeat; background-position: center}</style>

<style>
.Main {background-color: rgba(161,192,212,.5) !important;
}
</style>

<style>h1 {color: #314f66;}</style>

<style>.Header-inner--bottom {background-color: #314f66;} !important; </style>
<style>.Header-inner--top{background-color: #929292;} !important; </style>

However when I navigate around the site, the new format is following to area where it shouldn't be. Works great when checking through the backend , but when viewing as a user it's not working unless you keep refreshing the page.

Can anyone help please?

Lower / main school should be red and gold, post 16 pages, blue and grey

Thank you in advance

Sorry forgot address: https://www.stonehillschool.org

I assume you are adding this to the individual pages header code injection? I don't actually see it working anywhere currently.

I noticed a couple of errors in your code towards the end, so I've cleaned that up.

<style>
.has-logo-image .Header-branding img {  content:url(https://static1.squarespace.com/static/61093bde32e48d7f4093051d/t/64afdbaa9871ca44d701a46c/1689246635441/POST16+.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
</style>

<style>
.Main {
  background-color: rgba(161,192,212,.5) !important;
}
</style>

<style>
  h1 {color: #314f66;}
</style>

<style>.Header-inner--bottom {background-color: #314f66 !important;} </style>
<style>.Header-inner--top{background-color: #929292 !important;}</style>

1 hour ago, Ziggy said:

I assume you are adding this to the individual pages header code injection? I don't actually see it working anywhere currently.

I noticed a couple of errors in your code towards the end, so I've cleaned that up.

<style>
.has-logo-image .Header-branding img {  content:url(https://static1.squarespace.com/static/61093bde32e48d7f4093051d/t/64afdbaa9871ca44d701a46c/1689246635441/POST16+.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
</style>

<style>
.Main {
  background-color: rgba(161,192,212,.5) !important;
}
</style>

<style>
  h1 {color: #314f66;}
</style>

<style>.Header-inner--bottom {background-color: #314f66 !important;} </style>
<style>.Header-inner--top{background-color: #929292 !important;}</style>

 

Thanks, Ziggy - I've updated the code - much appreciated but it's still not working properly.  If you go to the Post 16 tab, and refresh the page it will turn blue.  However if you navigate away to a different part of the website, the  blue will follow you unless you refresh the browser again.  Yes, I've added the code to Page >settings > Advanced for each of the pages in the Post 16 section.  I'm not really sure what else to do - all advice gratefully received,

Cheers

Ruth