Help with customizing newsletter button and sizing

Hey y'all,

I could use some help customizing this newsletter. I've hacked together some CSS, and it's working slightly, but I still have a few issues. Screenshots of the newsletter are attached, with the middle one showing the odd rollover, and the third shot showing how the field isn't filling horizontally.

• Make the email field fill the entire block horizontally.
• The button shape on rollover is animating into a pill shape (maybe due to the SS animation?) and should just match the off state.
• Adjust the field and button height to be smaller (8-12 pixels would be nice).

You can see the page at: https://ascend-together.squarespace.com/careers password is: RiseUp
 

/* Custom Newsletter block */
.newsletter-form-button{
  border-radius: 8px !important;
}
.newsletter-form-button:hover {
  border-radius: 8px !important;
}
.newsletter-form-header-description p {
   margin-top: -20px !important;
}
.newsletter-form-footnote p {
  margin-top: -10px !important;
  font-size: .9em;
}
.newsletter-form-field-element {
  flex-grow: 1;
  border: none !important;
  border-radius: 8px;
  margin: 0;
  padding: 0;
}
button.newsletter-form-button.sqs-system-button {
  border-radius: 8px !important;
}

@Shoam Hi! You can add the following code snippets in Website > Pages > Website Tools > Custom CSS to implement the customizations you mentioned

#1 To make the email field fill the entire block horizontally:

@media screen and (min-width: 1025px) {
    .newsletter-block .newsletter-form-body {
      display: flex !important;
    }

    .newsletter-block .newsletter-form-fields-wrapper {
      width: 85% !important;
    }

    .newsletter-block .newsletter-form-field-wrapper {
       width: 100% !important;
       min-width: unset !important;
    }
}

@media screen and (max-width: 1024px) {
    .newsletter-block .newsletter-form-body {
      display: flex !important;
      flex-wrap: wrap;
      justify-content: center;
    }

    .newsletter-block .newsletter-form-fields-wrapper {
      width: 100% !important;
    }

    .newsletter-block .newsletter-form-field-wrapper {
       width: 100% !important;
    }
}

#2 To remove the button hover animation:

.tweak-global-animations-animation-type-flex.primary-button-style-solid .sqs-block-newsletter .newsletter-form-button.sqs-button-element--primary::before {
    display: none !important;
}

#siteWrapper.site-wrapper .newsletter-block .sqs-button-element--primary:hover {
    background: #000 !important;
    border-radius: 8px !important;
    color: #89ffc7 !important;
}

#3 To adjust the height of the input filed and button

.newsletter-block .newsletter-form-field-element, .newsletter-block .newsletter-form-button {
  padding-top: 0.9rem !important;
  padding-bottom: 0.9rem !important;
}