Remove transparent gradient from menu on Blog pages

Hi, I'm trying to remove the transparent gradient behind the menu on just the main blog page and individual blog pages on my website. I need the transparent gradient on the rest of the site so that the menu is legible over the header images/videos, but the dark transparent gradient on the white background of the main blog page and individual blog pages looks strange.

I'm not a CSS whiz, or a CSS anything, but I tried the following with no success:

#collection-64add8659c05751789d8ed1a {
  div.header-announcement-bar-wrapper {
    color: #ffffff
  }
}

Any help is greatly appreciated! 

https://www.venusinpieces.com/

This worked so well! Now I need to do the same thing for the main Shop page and all individual product pages. Is there another class I can target to do this?

Shop page: https://www.venusinpieces.com/shop

Example product page: https://www.venusinpieces.com/shop/p/frosted-peppermint-candle

Use this

/* Shop + Detail product Page Header */
[class*="type-products"] .header-background-gradient {
    background-color: black !important;
}

@tuanphan Thank you so much!