ReformDesign

P.S. Squarespace integrates with Mailchimp with it's native newsletter block; is there a reason you don't want to use that? 

Settings in Edit > Edit Header > Layout will help you fine tune this as well as adjusting the padding numbers in the code. This code doesn't update in real-time as you edit like in Custom CSS, so save to see changes. 

Thank you! Worked perfectly. 

Nevermind... I found a misplaced bracket in my CSS that was applying it to another collection. 
If anyone want's to offer guidance on doing this with an SVG mask I'd still love to learn that! 

First, edit the image >> Make white to transparent
Next, add this to Design > Custom CSS
section[data-section-id="63da9ac6c9844e3c54f8ac1a"] .section-background { top: -20px; z-index: 9999999999; } footer.sections, footer.sections section { z-index: 9999999 !important; }  

This should fix the section header font:
.user-items-list .list-section-title p{   font-famiily: 'cooperhewitt-heavyitalic' !important;   font-size: 4.5rem; } Button size:
.list-item-content__button { font-size: 1.2rem !important; font-weight: 700; } This might not quite get where you want just yet, but let me know. 

This should fix the section header font:
.user-items-list .list-section-title p{   font-famiily: 'cooperhewitt-heavyitalic' !important;   font-size: 4.5rem; } Button size:
.list-item-content__button { font-size: 1.2rem !important; font-weight: 700; } This might not quite get where you want just yet, but let me know. 

Is this a 7.0 or 7.1 site? 7.1 doesn't support footer navigation, but you could do it with text links. Move your existing pages to "Not Linked" in the pages panel, and link to them with text in your footer. 

I'm not sure if CSS edits to Squarespace's instagram block would be able to make it happen, but if someone out there is willing to try some javascript, Instagram does have it's own embed function that might be workable. Maybe someone could get this code to display more than 6 images; their javascript is available at: https://www.instagram.com/static/bundles/es6/EmbedSDK.js/ab12745d93c5.js
Edits to that script alongside some style edits in the code Instagrams "embed" share function (found on instagram for desktop) might get you there. 
Anyone able to take a stab at it? JS isn't my thing. 

Paste this into Custom CSS:
#block-641d470bad8b37cf62c1 .sqs-block-button-element, #block-761859652cd22c0a5970 .sqs-block-button-element { background-color: #25503f !important; } or this into the page's header code injection:
<style> #block-641d470bad8b37cf62c1 .sqs-block-button-element, #block-761859652cd22c0a5970 .sqs-block-button-element { background-color: #25503f !important; }</style> This code is specific to those two purchase buttons. If they are deleted or you add a new purchase button, this code will have to be updated with new block IDs.
 
Alternatively you could add your button via a code block, and set the class to "purchase-button" and style it with CSS.  
To make the first purchase button, add a code block and replace the sample code with:
<a href="https://uncommonpursuit.memberful.com/checkout?plan=86205"><btn class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element purchase-button">Purchase - $15</btn> </a> Notice the href is the link to your first purchase page. Then, add a second code block to make the second button by pasting code:
<a href="https://uncommonpursuit.memberful.com/checkout?plan=86210"><btn class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element purchase-button">Purchase - $15</btn> </a> Finally, head to Custom CSS and paste the following to assign the color to your newly created class of buttons: 
.purchase-button { background-color: #25503f !important; } Now, if you ever want to change the color or style of just your purchase buttons, you can do it here in CSS!

There's something going on outside of the blog pages that's affecting the content width. The page is not loading in at 100% of the viewport width on narrower sizes. I'll take another look later. 

Hello!
Did you by chance delete the file in custom files after you uploaded it and got the URL? Your CSS looks correct, but I tried visiting the source url that Cooper font was tied to and nothing seems to be there. 
(https://static1.squarespace.com/static/628b6e8c7f9fde6ff6d77a65/t/6294b3f2c5a1d636f22a0d73/1653912563551/cooperhewitt-heavyitalic.otf)
If you deleted it, you'll need to re-upload it in custom files (keep it there) and change the source URLs in your CSS. If I'm off here, sorry! Just a shot in the dark really. 

THANKS!!! That worked perfectly! I spent HOURS trying to find the code for this. Appreciate your help!
 

Ah. Now I think I have a handle on the issue.
For the Return to Main Site link, set it to / (forward slash). It is currently going to /home, which is it's actual slug but the homepage < https://clownfish-manatee-ngnn.squarespace.com/ > is a special case and is the second URL for your home page. An alias if you will that SS sets up when you make a page the home page.
If that fixes the issue then you can turn on Ajax again if you want.

Ohhhhh thank you! So I hadn't deleted them but as this was my second trial, I'd reuploaded the fonts but not changed the links in the code. Thank you for being my brain 😊