Fonts Colour different in preview versus live site

Site URL: https://city-ants.squarespace.com

Hi everyone, 

I have the weird problem that the colours of body text in my live website look different then the ones in my building environment. I added a bit of custom code to change the form block and hide navigation, but when that code was added problem didn't occur, it only started later on. I added screenshots of both versions and added the piece of custom code. 

The problem also appears below (which it didn't do before). 

Custom code inserted:

(1) Custom CSS

.form-wrapper .field-list .field .caption {
  font-family: poppins;
  font-size: 4px;
  color: #FFFFFF;
  letter-spacing: .em;
}

.form-wrapper {
    border: 2px solid #FFA400;
    padding: 20px;
    background: #FFFFFF;
}

.form-wrapper .field-list .field .field-element {
  background-color: #FFFFF;
  border: none;
  border-radius: 4;
}

.form-wrapper input[type=submit] {
  transition: all .6s ease 0s !important;
}
.form-wrapper input[type=submit]:hover {
  background-color: #FFA400;
}

(2) Header CSS 

<style>
  .header-nav, .burger-box {
    visibility: hidden;
}
  
/* First name */
.field.first-name .caption-text {
    visibility: hidden;
}
.field.first-name .caption-text:before {
    visibility: visible;
    content: "Voornaam";
}
/* last name */
.field.last-name .caption-text {
    visibility: hidden;
}
.field.last-name .caption-text:before {
    visibility: visible;
    content: "Naam";
}

We're in the newspaper tomorrow and this happened only after a couple of days of working on it, appreciate all the help! 

Kindest regards, 

Oberon

Hi. Do you still need help on this?