All of my CSS code has stopped working

Hi Square Brains!

I have a bit of an issue . . . all of my CSS code has stopped working for a client's site and I don't know why. The only clue I have is that the Squarespace CSS field is telling me a '{' is missing but I can't find where. 

I have duplicated the site to do some testing. You can access with the password: HELPneeded

Here: https://carnation-reindeer-g4g9.squarespace.com/

Some examples of what is broken are:

I've been using this CSS for a background header colour (white) with 60% opacity on mobile:

/*mobile header*/
@media only screen and (max-width: 767px){
body#collection-652f8e9dea52a52756969ded header#header {
background-color: rgba(255, 255, 255, 0.6) !important;
  }
}

You can see this is not working at my test site here: https://carnation-reindeer-g4g9.squarespace.com/

And this code to create flip cards using the old Squarspace version image posters:

/* Inside the Square Flip effect on poster images*/ 
.design-layout-poster img{ transition: 1s}
.design-layout-poster:hover img{transform: rotateY(180deg); transition: 1s} 
.image-card-wrapper{transform:rotateY(180deg)!important; opacity:0; transition: 1s;}
.design-layout-poster:hover .image-card-wrapper {opacity:1!important; transform:rotateY(0deg)!important; background: #282D30; transition: 1s;}

/* Inside the Square Flip effect on poser images*/

/*Course list colour issue*/
[data-section-id="6576c31ac1a71b16fb46c67c"] .course-list__grid-item.course-list__grid-course-item {
    --course-list-grid-layout-course-item-text-color: #ffffff;
    --course-list-grid-layout-course-item-background-color: #232323;
}

/* for subtle hover animation */
[data-section-id="6576c31ac1a71b16fb46c67c"] .course-list__grid-item.course-list__grid-course-item:hover {
    --course-list-grid-layout-course-item-hover-background-color: #c3876a;
    --course-list-grid-layout-course-item-text-color: #000000;
}

transition-property: background-color, color;
transition-duration: 300ms;
transition-timing-function: ease;
transition-delay: 0;
transition-behavior: initial;
 

You can see this is not working in this course module: https://carnation-reindeer-g4g9.squarespace.com/next-gen/workshop-2-imposter-syndrome-lc2cy 

The full CSS sheet is attached for reference. All of this was working fine a couple of weeks ago but none is now. 

Also attached are some screenshots of some broken elements.

Thanks in advance

It looks like some new CSS may have been added in the middle of existing CSS? As a result, lines 48 to 52 aren't correct and aren't doing anything. If you delete these, your other CSS may work. This will resolve the error.

However, you'll need to work out where these lines should have been if you'd like your transitions to work.

Hey, thanks for the quick reply!

I deleted those lines but it hasn't fixed any of the issues. They originated from some CSS I used to change the colour of the course intro page tiles, as the inbuilt style sheet editor (colour palettes) wasn't working. But the colour palette is now working so I can delete that CSS without issue.

But things such as the mobile header should still work, presumably, and are not. 

Many thanks!