Unlikely_IT

Being able to manage, approve, and deny members to a site it is definitely paramount to provide a safe and secure area.

I manage a NGO website for SEN (Special Education Needs) parents in asia and Privacy is paramount for that community, in culture here there is still a big Taboo against families with children who require special needs. 

I was able to built a private sign up & approval process on Wix. They have a solid member management system that doesn't require the need to have coders. So @jai.cheswick it's a solid platform to look at, that is affordable (we had budget restriction), if you're still looking for a way to setup a safe portal for survivors.
Good luck with your build, and feel free to reach out should you have questions.

@Stereoknob & @todd4, if you are still looking into this, you may want to check out the new Squarespace feature called Member Areas. Take a look at this guide here for more information, should you need it:
Getting started with Member Areas
Hope this helps!

If SS could build membership management into Squarespace it'd be fantastic! Do message if something ends up happening. (first time I didn't get the join beta request) 
Just need member pages + add ability for different member types which can access content according to that member type 😍. 
But alas I must come back to reality

@billydupee You don't need to load the entirety of jQuery just to apply this style.

Use the following. it's shorter and doesn't require an outside library (So your site will load faster). Place it in the same place.

 
<script> (() => { [...document.querySelectorAll('.site-title a')] .forEach((uit) => { let title = ''; uit.innerText.split('').forEach((item) => title = `${title}<span>${item}</span>`); uit.innerHTML = title; }); })(); </script>
Then for your CSS, go to the custom CSS tab found here: DESIGN -> CUSTOM CSS
Then use the following. Now this is just a template, you'll need to fill in the colors you'd like to use.
.site-title a { span:nth-child(1) { color: #333; /* the "B" */ } span:nth-child(2) { color: #333; /* the "I" */ } span:nth-child(3) { color: #333; /* the "L" */ } span:nth-child(4) { color: #333; /* the "L" */ } span:nth-child(5) { color: #333; /* the "Y" */ } span:nth-child(6) { color: #333; /* the space */ } span:nth-child(7) { color: #333; /* the "D" */ } span:nth-child(8) { color: #333; /* the "U" */ } span:nth-child(9) { color: #333; /* the "P" */ } span:nth-child(10) { color: #333; /* the "E" */ } span:nth-child(11) { color: #333; /* the "E" */ } }

I would like to point out that another option to avoid all this is just create a logo image and use that. Just make sure it's a high enough resolution so it won't become pixelated.

Happy building
Erin

** edit **
Please note that you can delete my comments in the CSS (Thats anything between the /* */). As it's just there to make it clear what each span should be linked to

** Second edit **
@billydupee I tweeked to JS for a compatibility issue.

@billydupee You don't need to load the entirety of jQuery just to apply this style.

Use the following. it's shorter and doesn't require an outside library (So your site will load faster). Place it in the same place.

 
<script> (() => { [...document.querySelectorAll('.site-title a')] .forEach((uit) => { let title = ''; uit.innerText.split('').forEach((item) => title = `${title}<span>${item}</span>`); uit.innerHTML = title; }); })(); </script>
Then for your CSS, go to the custom CSS tab found here: DESIGN -> CUSTOM CSS
Then use the following. Now this is just a template, you'll need to fill in the colors you'd like to use.
.site-title a { span:nth-child(1) { color: #333; /* the "B" */ } span:nth-child(2) { color: #333; /* the "I" */ } span:nth-child(3) { color: #333; /* the "L" */ } span:nth-child(4) { color: #333; /* the "L" */ } span:nth-child(5) { color: #333; /* the "Y" */ } span:nth-child(6) { color: #333; /* the space */ } span:nth-child(7) { color: #333; /* the "D" */ } span:nth-child(8) { color: #333; /* the "U" */ } span:nth-child(9) { color: #333; /* the "P" */ } span:nth-child(10) { color: #333; /* the "E" */ } span:nth-child(11) { color: #333; /* the "E" */ } }

I would like to point out that another option to avoid all this is just create a logo image and use that. Just make sure it's a high enough resolution so it won't become pixelated.

Happy building
Erin

** edit **
Please note that you can delete my comments in the CSS (Thats anything between the /* */). As it's just there to make it clear what each span should be linked to

** Second edit **
@billydupee I tweeked to JS for a compatibility issue.