MaxFlu

I think it was a couple of extra/redundant brackets, but I'm not 100% sure.
And on that code with the margin-top — that worked. Thanks so much!

@MaxFlu did you discover what bit of code was causing the error once you added piece by piece? I'm curious...

Meanwhile, it looks like the extra spacing under the header is caused by this bit of CSS you added at some point:
#page .page-section:nth-child(1) { margin-top: 100px !important; } If you remove that, the extra spacing should go away...

Hi, if none of your CSS code is taking effect, then there is a syntax error in your code. If that is the case, please copy and save all code somewhere, then remove everything in Custom CSS. You can then add one block of code back at a time, to make sure each is working as expected. You should be able to find the culprit fairly quickly.

@MaxFlu try replacing ALL of your CSS with this and let me know if it starts applying to the page again?
/* HEADER */ .sqs-button-element--secondary:hover { background-color:#d8463f!important; color: #fff!important; font-weight: 900!important; } .sqs-button-element--tertiary:hover { background-color:white!important; color: #d8463f!important; font-weight: 900!important; } .sqs-button-element--primary:hover { background-color:white!important; color: #d8463f!important; font-weight: 900!important; } .header-nav a:hover { background:#d8463f!important; color:white!important; font-weight:900!important; } .header-actions-action--social .icon:hover svg { fill: #d8463f!important; } .header-menu-cta .theme-btn--primary { background-color: var(--primaryButtonBackgroundColor) !important; } @media (min-width:800px) { #collection-654a8793b0142d659125cc61 .header .header-announcement-bar-wrapper { --solidHeaderBackgroundColor: transparent !important; } } /* END HEADER */ /* MOBILE SPECIFICS */ @media only screen and (max-width:640px) { [data-section-id="654a8793b0142d659125cc64"] .section-background img { opacity: 0; } [data-section-id="654a8793b0142d659125cc64"] .section-background { background-image: url(https://static1.squarespace.com/static/654a8792b0142d659125cc24/t/654c0e34b4f8c95168b4fbdc/1699483189138/Sam-Park-Home-Page-Hero-Image-Mobile.png); background-size: cover; background-position: center top; background-repeat: no-repeat; } #page .page-section:nth-child(1) { margin-top: 100px !important; } } /* MOBILE SPECIFIC HEADER */ @media only screen and (max-width:640px) { .header { background-color: #04275c!important; } .header .header-announcement-bar-wrapper { background: var(--solidHeaderBackgroundColor); } .header--menu-open .header .header-burger .top-bun, .header--menu-open .header .header-burger .patty, .header--menu-open .header .header-burger .bottom-bun { background-color: #fff !important; } .header-menu-nav * { color: white!important; background-color: #04275c!important; } :is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content { background-image: linear-gradient(#d8463f,#d8463f) !important; } } /* END MOIBLE SPECIFIC HEADER */ /* END MOBILE SPECIFICS */ /* FOOTER */ footer h4 { font-size: 1em; text-decoration: none; } footer h4:hover { background:#d8463f!important; } use.sqs-use--icon:hover { fill:#d8463f !important; } /* END FOOTER */ /* POP-UP*/ .sqs-slide-wrapper[ data-slide-type = "popup-overlay"] .form-disclaimer-text { display: none; } /* remove X */ .sqs-popup-overlay-close { display: none; } /* round corners */ .sqs-slide-wrapper[ data-slide-type = "popup-overlay"] .sqs-slide-layer-content { border-radius: 20px; } /* gradient backdrop */ .sqs-slide-wrapper[ data-slide-type = "popup-overlay"] .layer-back { background: linear-gradient(to right, #04275c, #d8463f); opacity: .65; } /* END POP-UP */  

@MaxFlu try swapping out all of your comment markers with /* */ instead of // // so for example, instead of:

// MOBILE SPECIFIC HEADER //

replace it with:

/* MOBILE SPECIFIC HEADER */
do that for all of them?

@MaxFlu I think you are right, because when I inspect the page here: https://pineapple-bullfrog-rlgh.squarespace.com/home and specifically look for ANY of your custom CSS, most of it is not being read at all... might be worthwhile running it through a validator, I can see you've got a few punctuation marks out of order and missing in a few places... but it is strange that it's not reading any of it at all...

@MaxFlu I think you've got some close brackets out of order on this section as well, which could be throwing some things off:
@media only screen and (max-width: 640px) { .header-menu-nav * { color: white!important; background-color: #04275c!important; :is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content { background-image: linear-gradient(#d8463f,#d8463f) !important; } } } replace that section with this:
@media only screen and (max-width: 640px) { .header-menu-nav * { color: white!important; background-color: #04275c!important; } :is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content { background-image: linear-gradient(#d8463f,#d8463f) !important; } }  

ah... @MaxFlu remove the "#page" selector from the mobile image code... just replace that whole section with my version instead and let me know if it's still not working? 
@media only screen and (max-width:640px) { [data-section-id="654a8793b0142d659125cc64"] .section-background img { opacity: 0; } [data-section-id="654a8793b0142d659125cc64"] .section-background { background-image: url(https://static1.squarespace.com/static/654a8792b0142d659125cc24/t/654c0e34b4f8c95168b4fbdc/1699483189138/Sam-Park-Home-Page-Hero-Image-Mobile.png); background-size: cover; background-position: center top; background-repeat: no-repeat; } }  

@MaxFlu what browser are you using? And are you testing in an incognito window when you apply the new CSS? The transparent header is also working as expected in my testing tools in Chrome, but maybe other browsers are not reading the custom style templates the same way?

hmmm it's working in my inspector tools when I test it... what's happening on your end that it's not working, is there just no background image at all? Can you leave the coding in your custom CSS so I can have a look if it's being overridden maybe? You might need to add !important to some properties...
@media only screen and (max-width: 640px) { [data-section-id="654a8793b0142d659125cc64"] .section-background img { opacity: 0; } [data-section-id="654a8793b0142d659125cc64"] .section-background { background-image: url(https://static1.squarespace.com/static/654a8792b0142d659125cc24/t/654c0e34b4f8c95168b4fbdc/1699483189138/Sam-Park-Home-Page-Hero-Image-Mobile.png); background-size: cover; background-position: center top; background-repeat: no-repeat; } }  

@MaxFlu ok for the header image, you were just missing quotes around the section id, try this:
@media only screen and (max-width: 640px) { [data-section-id="654a8793b0142d659125cc64"] .section-background img { opacity: 0; } [data-section-id="654a8793b0142d659125cc64"] .section-background { background-image: url(https://static1.squarespace.com/static/654a8792b0142d659125cc24/t/654c0e34b4f8c95168b4fbdc/1699483189138/Sam-Park-Home-Page-Hero-Image-Mobile.png); background-size: cover; background-position: center; background-repeat: no-repeat; } }  

@MaxFlu ok yes the button is blue on mine now as well, try this:
.header-menu-cta .theme-btn--primary { background-color: var(--primaryButtonBackgroundColor) !important; } The whitespace I think is a loading animation issue, I can't recreate that on my end, unfortunately so hard to troubleshoot... Does it still happen when you view the live site in an incognito window?

The syntax error is expected because the style is not in a standard CSS format, it's pulling from the custom site styles template instead, does it let you approve and publish anyway? I'll have a look at the background image for you shortly...

@MaxFlu for the first issue, I think you just need to add a SPACE between your section ID and your .background selectors, like this:
@media only screen and (max-width: 640px){ #page [data-section-id=654a8793b0142d659125cc64] .section-background img {opacity:0} #page [data-section-id=654a8793b0142d659125cc64] .section-background { background-image: url(https://static1.squarespace.com/static/654a8792b0142d659125cc24/t/654c0e34b4f8c95168b4fbdc/1699483189138/Sam-Park-Home-Page-Hero-Image-Mobile.png); background-size: cover; background-position: center; background-repeat: no-repeat; } } For mobile menu, DONATE button is red when I view it already 🙂 but to get the underline of the current page to be red also, try adding this:
:is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content { background-image: linear-gradient(#d8463f,#d8463f) !important; } and for the header to remain blue background, this:
.header .header-announcement-bar-wrapper { background: var(--solidHeaderBackgroundColor); } .header--menu-open .header .header-burger .top-bun, .header--menu-open .header .header-burger .patty, .header--menu-open .header .header-burger .bottom-bun { background-color: #fff !important; } and lastly, for the homepage desktop header:
@media (min-width:800px) { #collection-654a8793b0142d659125cc61 .header .header-announcement-bar-wrapper { --solidHeaderBackgroundColor: transparent !important; } }