Clicky-expandy with no need for cut tags.

OOC permissions

backtagging YOUR ANSWER HERE
threadhopping YOUR ANSWER HERE
fourthwalling YOUR ANSWER HERE
off-limits YOUR ANSWER HERE

IC permissions

physical contact YOUR ANSWER HERE
mental contact YOUR ANSWER HERE
fighting/injury YOUR ANSWER HERE
death YOUR ANSWER HERE
other Here is where we demonstrate what happens when a lot of freaking text goes into one of these spots.

SHIPPING

otp ✓✓✓ NOTES
good ship ✓ NOTES
okay ship ✓/✗ NOTES
bad ship ✗ NOTES
notp ✗✗✗ NOTES

Other

powers and abilities
kink list
contact info
anything else you need a box for

blue code

<raw-code><div style="font-family: 'Palatino', 'Book Antiqua', serif; font-size: 13pt; width: 500px; margin: auto; border-right: 2px solid #5f9fb0;">

<details open><summary style="font-size: 16pt; text-transform: uppercase; margin: 1em auto; padding: .28em; background: #425863; background: linear-gradient(to right, #425863 0%, #75bdd1 20%, #5f9fb0 100%); color: #fff; border-top-left-radius: 8px; border-bottom-left-radius: 8px;">OOC permissions</summary>
	
	<ul style="list-style: none; border: 0.5em solid transparent;">
		<li>backtagging YOUR ANSWER HERE</li>
		<li>threadhopping YOUR ANSWER HERE</li>
		<li>fourthwalling YOUR ANSWER HERE</li>
		<li>off-limits YOUR ANSWER HERE</li>
	</ul></details>
	
	<details><summary style="font-size: 16pt; text-transform: uppercase; margin: 1em auto; padding: .28em; background: #425863; background: linear-gradient(to right, #425863 0%, #75bdd1 40%, #5f9fb0 100%); color: #fff; border-top-left-radius: 8px; border-bottom-left-radius: 8px;">IC permissions</summary>
	
	<ul style="list-style: none; border: 0.5em solid transparent;">
		<li>physical contact YOUR ANSWER HERE</li>
		<li>mental contact YOUR ANSWER HERE</li>
		<li>fighting/injury YOUR ANSWER HERE</li>
		<li>death YOUR ANSWER HERE</li>
		<li>other Here is where we demonstrate what happens when a lot of freaking text goes into one of these spots.</li>
	</ul></details>
	
	<details><summary style="font-size: 16pt; text-transform: uppercase; margin: 1em auto; padding: .28em; background: #425863; background: linear-gradient(to right, #425863 0%, #75bdd1 60%, #5f9fb0 100%); color: #fff; border-top-left-radius: 8px; border-bottom-left-radius: 8px;">SHIPPING</summary>
	
	<ul style="list-style: none; border: 0.5em solid transparent;">
		<li>otp ✓✓✓ NOTES</li>
		<li>good ship ✓ NOTES</li>
		<li>okay ship ✓/✗ NOTES</li>
		<li>bad ship ✗ NOTES</li>
		<li>notp ✗✗✗ NOTES</li>
	</ul></details>
	
	<details><summary style="font-size: 16pt; text-transform: uppercase; margin: 1em auto; padding: .28em; background: #425863; background: linear-gradient(to right, #425863 0%, #75bdd1 80%, #5f9fb0 100%); color: #fff; border-top-left-radius: 8px; border-bottom-left-radius: 8px;">Other</summary>
	
	<ul style="list-style: none; border: 0.5em solid transparent;">
		<li>powers and abilities</li>
		<li>kink list</li>
		<li>contact info</li>
		<li>anything else you need a box for</li>
	</ul></details>

</div></raw-code>

gold code

<raw-code><div style="font-family: 'Palatino', 'Book Antiqua', serif; font-size: 13pt; width: 500px; margin: auto; border-right: 2px solid #b68d4c;">

<details open><summary style="font-size: 16pt; text-transform: uppercase; margin: 1em auto; padding: .28em; background: #425863; background: linear-gradient(to right, #c19e67 0%, #f3e2c7 20%, #b68d4c 100%); color: #330; border-top-left-radius: 8px; border-bottom-left-radius: 8px;">OOC permissions</summary>
	
	<ul style="list-style: none; border: 0.5em solid transparent;">
		<li>backtagging YOUR ANSWER HERE</li>
		<li>threadhopping YOUR ANSWER HERE</li>
		<li>fourthwalling YOUR ANSWER HERE</li>
		<li>off-limits YOUR ANSWER HERE</li>
	</ul></details>
	
	<details><summary style="font-size: 16pt; text-transform: uppercase; margin: 1em auto; padding: .28em; background: #425863; background: linear-gradient(to right, #c19e67 0%, #f3e2c7 40%, #b68d4c 100%); color: #330; border-top-left-radius: 8px; border-bottom-left-radius: 8px;">IC permissions</summary>
	
	<ul style="list-style: none; border: 0.5em solid transparent;">
		<li>physical contact YOUR ANSWER HERE</li>
		<li>mental contact YOUR ANSWER HERE</li>
		<li>fighting/injury YOUR ANSWER HERE</li>
		<li>death YOUR ANSWER HERE</li>
		<li>other Here is where we demonstrate what happens when a lot of freaking text goes into one of these spots.</li>
	</ul></details>
	
	<details><summary style="font-size: 16pt; text-transform: uppercase; margin: 1em auto; padding: .28em; background: #425863; background: linear-gradient(to right, #c19e67 0%, #f3e2c7 60%, #b68d4c 100%); color: #330; border-top-left-radius: 8px; border-bottom-left-radius: 8px;">SHIPPING</summary>
	
	<ul style="list-style: none; border: 0.5em solid transparent;">
		<li>otp ✓✓✓ NOTES</li>
		<li>good ship ✓ NOTES</li>
		<li>okay ship ✓/✗ NOTES</li>
		<li>bad ship ✗ NOTES</li>
		<li>notp ✗✗✗ NOTES</li>
	</ul></details>
	
	<details><summary style="font-size: 16pt; text-transform: uppercase; margin: 1em auto; padding: .28em; background: #425863; background: linear-gradient(to right, #c19e67 0%, #f3e2c7 80%, #b68d4c 100%); color: #330; border-top-left-radius: 8px; border-bottom-left-radius: 8px;">Other</summary>
	
	<ul style="list-style: none; border: 0.5em solid transparent;">
		<li>powers and abilities</li>
		<li>kink list</li>
		<li>contact info</li>
		<li>anything else you need a box for</li>
	</ul></details>

</div></raw-code>

find and replace:

blue gradient #425863, #75bdd1, #5f9fb0 & heading text #fff
gold gradient #c19e67, #f3e2c7, #b68d4c & heading text #330

Flat | Top-Level Comments Only

I admittedly haven't dug into this too far, but is it possible with the code to add additional sections? This would make a baller timeline code, if it's easily possible.

Absolutely, the only caveat is that if you want the gradients to align smoothly you'll have to tweak the percentages depending on how many sections you end up with.

Perfect, I'll keep that in mind as I look to tweak it! Thank you!

permissions: tesseract

blue code

gold code

no subject

no subject

no subject