Replace Logo on single page, hide current logo - CSS

Hey all,

I need your assistance with CSS.
I've successfully made code to add a custom logo that I've uploaded to custom files, the problem is the main site logo I want to replace (on this page only) is still visible. 

How can I hide the main site-wide logo on one page, but keep the new one I've added?

The page I want to do this on is /photo

The photo page should have the dark logo. The main logo is light.

Code I used to successfully add new logo:
 

#collection-63d1a5abb1fbe8770971fe49 {
  .header-title-logo img {
background-image: url(https://static1.squarespace.com/static/5f8f8579bd28b521edb70235/t/63db65ded0085b54d15159f7/1675322846377/thelandofdustin_logo_photo_dark.png);
}
}

It's important that I can achieve this with CSS as I can't add page specific code via code injection. Personal plan is what I have. 

www.dustin.land/photo
Site password is: SQtemp123

Your help is always appreciated! Thank you! 😊

The easiest way is to use CSS to invert your logo, which might not work given your logo colour, but it's an option:

#collection-63d1a5abb1fbe8770971fe49 {
  .header-title-logo img {
    filter: invert(1);
  }
}

This code to swap the logo is different to yours and worth a try:

#collection-63d1a5abb1fbe8770971fe49 {
  #logo {
    background-image: url('https://static1.squarespace.com/static/5f8f8579bd28b521edb70235/t/63db65ded0085b54d15159f7/1675322846377/thelandofdustin_logo_photo_dark.png');
  }
}

Let me know if either solution works!

The code to swap does not work. using #logo doesn't work. It just hides all logos.

 

Thank you so much! This worked!