Custom CSS not working

Site URL: https://www.rusalkadance.ca/

Squarespace was not able to hep here so hoping this wonderful community can.

Custom CSS not working as intended only on this specific site. I have other sites with squaresapce where custom CSS is working no issues.
- www.desna.ca
- www.ukrainiandanceworld.ca

Appears if i have the css editor open 

 

CSS dissapears when I navigate to another page (whilst in squarespace)

 

Live site - also no custom CSS present

Custom CSS is here

//FONTS//
@font-face {
font-family: 'Titillium';
src: url('https://static1.squarespace.com/static/65a8a203c198ca6db5d991e1/t/65ad856b65edb769d5fc0491/1705870699637/TitilliumWeb-Regular.ttf');
}

h1 {font-family: 'Titillium'!important; 
letter-spacing:'0px';    
font-size:68px;     
}

h2 {font-family: 'Titillium'!important; 
letter-spacing:'0px';    
font-size:48px;     
}

h3 {font-family: 'Titillium'!important; 
letter-spacing:'0px';    
font-size:38px;     
}

h4 {font-family: 'Titillium'!important; 
letter-spacing:'0px';    
font-size:28px;     
}

@font-face {
font-family: 'NOTO';
src: url('https://static1.squarespace.com/static/65a8a203c198ca6db5d991e1/t/65ad8558b3a2643ac33f0ced/1705870682484/NotoSans-Light.ttf');
}

.sqsrte-large {font-family: 'NOTO'!important; 
letter-spacing:'0px';    
font-size:18px;     
}

p {font-family: 'NOTO'!important; 
letter-spacing:'0px';    
font-size:16px;     
}

.sqsrte-small {font-family: 'NOTO'!important; 
letter-spacing:'0px';    
font-size:14px;     
}

/*Reducing font size for screens smaller than 792px*/
@media screen and (max-width: 960px) {
  h1 {
    font-size: 48px;
  }
  h2 {
    font-size: 38px;
  }
  h3 {
    font-size: 28px;
  }
}

//------------------------------------//
//NAVIGATION//

// header folder arrow
a.header-nav-folder-title:after {
    content: "▾";
    position: realtive;
    top: 2px;
}

//hover state for dropdown//
@linkBGColor: #877540;
@linkTextColor: #fff;
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 0px!important;
  border-radius: 8px;
  .header-nav-folder-item a {
    padding:10px 18px!important;
      border-radius: 8px;
  }
  .header-nav-folder-item a:hover {
    background: @linkBGColor!important;
    color: @linkTextColor!important;
  }
}

//Register button//
.header-nav-item a[href*="/register"] {
 background-color:#877540;
 padding: 5px 20px;
 border-radius: 8px;
  box-sizing: border-box;
}
.header-nav-list {
    align-items: center;
}

.header-nav-item--active a[href*="/register"] {
   background-image: none !important;
}

//contact button//
.header-nav-item a[href*="/contact"] {
 border: 1px solid #877540;
 padding: 5px 22px;
 border-radius: 8px;
 box-sizing: border-box;
}

.header-nav-list {
    align-items: center;
}

.header-nav-item--active a[href*="/contact"] {
   background-image: none !important;
}

//------------------------------------//
//FOOTER//

// Social icons//
@media only screen and (max-width: 767px) {
#block-yui_3_17_2_1_1705877355111_3028 *{
    text-align: center !important;
  }
}

@media only screen and (max-width: 767px) {
#block-yui_3_17_2_1_1706398702633_28828 *{
    display: none
  }
}

@media only screen and (max-width: 767px) {
  section[data-section-id="65ad9fc90faab2359531d09c"]
{
    text-align: center !important;
  }
}

//------------------------------------//
//SUPPORT//
//Centre header button//
@media only screen and (max-width: 767px) {
.sqs-block-button* {
    text-align: center !important;
  }
}

//------------------------------------//
//SCHOOL//
//Tab style//
div.wm-tabs-block {
  --nav-background-opacity: .05;
  --panels-background: white;
  --panels-background-opacity: 1;

  .nav-container {
    padding-right:0px;
  }
  .wm-tab-button.active {
    background: white;
    box-shadow: var(--tabs-shadow-medium);
  }
  .section-border,
  .section-background{
    background-color: var(--panels-background);
  }

  nav > span {
    display:none;
  }
}

//tabs colour and font//
div.wm-tabs-block {
  //Shadow: change medium to "low", "high" or "none"
  box-shadow: var(--tabs-shadow-medium);

  //Background Colors
  .nav-background {
    background-color: #E5E5E5;
    opacity: 1;
  }
  .panels-background {
    background-color: #000000;
    opacity: 1;
  }

  //Default Button Styles
  nav button.wm-tab-button {
    padding: 1em 1.67em;
    background-color: transparent;
    opacity: 0.5;

    color: currentColor;
    font-size: inherit;
    font-family: inherit;
    font-weight: initial;
    letter-spacing: initial;
  }

  //Hover Button Styles
  nav button.wm-tab-button:hover {
    background-color: inherit;
    opacity: 1;
    color: currentColor;
  }

  //Active Button Style
  nav button.wm-tab-button.active {
    background-color: #ffffff;
    opacity: 1;
    color: currentColor;
  }

  //Nav Indicators
  --indicator-size: px;
  nav > .indicator{
    background: black;
  }
  nav > .indicator-track{
    background: black;
    opacity: 0.25;
  }

  //Tablet Styles
  @media(max-width:1024px) {

  }

  //Mobile Styles
  @media(max-width:767px) {

  }
}

//Sticky tabsNavbar//
div.wm-tabs-block {
  .nav-container{
    position:sticky !important;
    top: var(--header-bottom,0px);
  }
  .nav-background {
    background-color: hsla(0,0%,90%, 1);
    opacity:1;
  }
}

//Hide class section mobile//
@media screen and (max-width:768px) {section[data-section-id="65d29cc42e41a64e86d7fe7f"] {
    display: none;
}
}

@media screen and (max-width:768px) {section[data-section-id="65d2a15471d9f43999db7eb4"] {
    display: none;
}
}

@media screen and (max-width:768px) {section[data-section-id="65d29a695af1895bbf4606d8"]{
    display: none;
}
}

@media screen and (max-width:768px) { #block-yui_3_17_2_1_1708299974024_35546 {display: none;
}
}

//Hide class section desktop//
.user-items-list-carousel__slide {
    border-radius: 16px;
}

@media screen and (min-width:768px) { section[data-section-id="662439515b6abb3c12bcb406"]
 {
    display: none;
}
}

/

@paul2009

i saw that you were active in a older thread regarding this issue back in 2022/2023? Could it be the same thing happening again ? 

Edited October 15 by Maksymrewko

You have some problems with the CSS, but the one that is causing all of the problems is the single / at the end of your CSS. Remove that and it should start working.

I've gone through and fixed a number of the other problems such as putting quote marks around the letter-spacing value and unnecessary use of !important. Let me know if that gets things working.

//FONTS//
@font-face {
  font-family: 'Titillium';
  src: url('https://static1.squarespace.com/static/65a8a203c198ca6db5d991e1/t/65ad856b65edb769d5fc0491/1705870699637/TitilliumWeb-Regular.ttf');
}

h1 {
  font-family: 'Titillium'; 
  letter-spacing:0px;    
  font-size:68px;     
}

h2 {font-family: 'Titillium'; 
  letter-spacing:0px;    
  font-size:48px;     
}

h3 {font-family: 'Titillium'; 
  letter-spacing:0px;    
  font-size:38px;     
}

h4 {font-family: 'Titillium'; 
  letter-spacing:0px;    
  font-size:28px;     
}

@font-face {
  font-family: 'NOTO';
  src: url('https://static1.squarespace.com/static/65a8a203c198ca6db5d991e1/t/65ad8558b3a2643ac33f0ced/1705870682484/NotoSans-Light.ttf');
}

.sqsrte-large {
  font-family: 'NOTO'; 
  letter-spacing:0px;    
  font-size:18px;     
}

p {
  font-family: 'NOTO'; 
  letter-spacing:0px;    
  font-size:16px;     
}

.sqsrte-small {
  font-family: 'NOTO'; 
  letter-spacing:0px;    
  font-size:14px;     
}

/*Reducing font size for screens smaller than 792px*/
@media screen and (max-width: 960px) {
  h1 {
    font-size: 48px;
  }
  h2 {
    font-size: 38px;
  }
  h3 {
    font-size: 28px;
  }
}

//--------------------------------//
//NAVIGATION//

// header folder arrow
a.header-nav-folder-title:after {
  content: "▾";
  position: realtive;
  top: 2px;
}

//hover state for dropdown//
@linkBGColor: #877540;
@linkTextColor: #fff;
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 0px !important;
  border-radius: 8px;
  .header-nav-folder-item a {
    padding:10px 18px !important;
    border-radius: 8px;
  }
  .header-nav-folder-item a:hover {
    background: @linkBGColor!important;
    color: @linkTextColor!important;
  }
}

//Register button//
.header-nav-item a[href="/contact"] {
  background-color:#877540;
  padding: 5px 20px;
  border-radius: 8px;
  box-sizing: border-box;
}
.header-nav-list {
  align-items: center;
}

.header-nav-item--active a[href="/contact"] {
  background-image: none !important;
}

//contact button//
.header-nav-item a[href="/contact"] {
  border: 1px solid #877540;
  padding: 5px 22px;
  border-radius: 8px;
  box-sizing: border-box;
}

.header-nav-list {
  align-items: center;
}

.header-nav-item--active a[href="/contact"] {
  background-image: none !important;
}

//--------------------------------//
//FOOTER//

// Social icons//
@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1705877355111_3028 *{
    text-align: center !important;
  }
}

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1706398702633_28828 *{
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  section[data-section-id="65ad9fc90faab2359531d09c"]
  {
    text-align: center !important;
  }
}

//------------------------------------//
//SUPPORT//
//Centre header button//
@media only screen and (max-width: 767px) {
  .sqs-block-button* {
    text-align: center !important;
  }
}

//-------------------------------//
//SCHOOL//
//Tab style//
div.wm-tabs-block {
  --nav-background-opacity: .05;
  --panels-background: white;
  --panels-background-opacity: 1;

  .nav-container {
    padding-right:0px;
  }
  .wm-tab-button.active {
    background: white;
    box-shadow: var(--tabs-shadow-medium);
  }
  .section-border,
  .section-background {
    background-color: var(--panels-background);
  }

  nav > span {
    display:none;
  }
}

//tabs colour and font//
div.wm-tabs-block {
  //Shadow: change medium to "low", "high" or "none"
  box-shadow: var(--tabs-shadow-medium);

  //Background Colors
  .nav-background {
    background-color: #E5E5E5;
    opacity: 1;
  }
  .panels-background {
    background-color: #000000;
    opacity: 1;
  }

  //Default Button Styles
  nav button.wm-tab-button {
    padding: 1em 1.67em;
    background-color: transparent;
    opacity: 0.5;
    color: currentColor;
    font-size: inherit;
    font-family: inherit;
    font-weight: initial;
    letter-spacing: initial;
  }

  //Hover Button Styles
  nav button.wm-tab-button:hover {
    background-color: inherit;
    opacity: 1;
    color: currentColor;
  }

  //Active Button Style
  nav button.wm-tab-button.active {
    background-color: #ffffff;
    opacity: 1;
    color: currentColor;
  }

  //Nav Indicators
  --indicator-size: px;
  nav > .indicator{
    background: black;
  }
  nav > .indicator-track{
    background: black;
    opacity: 0.25;
  }

  //Tablet Styles
  @media(max-width:1024px) {

  }

  //Mobile Styles
  @media(max-width:767px) {

  }
}

//Sticky tabsNavbar//
div.wm-tabs-block {
  .nav-container{
    position:sticky !important;
    top: var(--header-bottom,0px);
  }
  .nav-background {
    background-color: hsla(0,0%,90%, 1);
    opacity:1;
  }
}

//Hide class section mobile//
@media screen and (max-width:768px) {
  section[data-section-id="65d29cc42e41a64e86d7fe7f"] {
    display: none;
  }
}

@media screen and (max-width:768px) {
  section[data-section-id="65d2a15471d9f43999db7eb4"] {
    display: none;
  }
}

@media screen and (max-width:768px) {
  section[data-section-id="65d29a695af1895bbf4606d8"]{
    display: none;
  }
}

@media screen and (max-width:768px) { #block-yui_3_17_2_1_1708299974024_35546 {
  display: none;
  }
}

//Hide class section desktop//
.user-items-list-carousel__slide {
  border-radius: 16px;
}

@media screen and (min-width:768px) { section[data-section-id="662439515b6abb3c12bcb406"]
  {
    display: none;
  }
}

 

@Ziggy slightly off topic but just found this thread and thought maybe you could help.
I've added sweet sans pro to as my "miscellaneous" font on my site, and am trying to use the following code to add use it as an option throughout the site. but its not working ...I swear I've done this before, maybe something changed? thanks in advance! 
h4 strong 
{font-family: 'sweet-sans- pro' !important;
  font-size: 1.1rem;
  font-weight: 500!important;
  line-height: 0.8em;
}

45 minutes ago, ilseS said:

@Ziggy slightly off topic but just found this thread and thought maybe you could help.

Did the code I bug checked work?

4 minutes ago, Ziggy said:

Did the code I bug checked work?

ah! I didn't try that 🙂 will attempt now. Im wondering if Im adding sweet-sans-pro correctly, as Im trying to use it in a few different code snippets

1 minute ago, ilseS said:

Im wondering if Im adding sweet-sans-pro correctly, as Im trying to use it in a few different code snippets

It looks okay, but it's only half of the code needed if it's a custom font.

@ZiggyIts not a custom font. Its a built in font, added to "miscellaneous" on my site, so that the code above should work ...just tried the CSS debugger, nothing seems to be wrong 😞