Dark Romance CSS Template

<style>

#root > div {
background: #0a0000 !important;
}

.pp-page-background {
filter: none !important;
opacity: 1 !important;
}

.pp-page-background::after {
content: '';
position: absolute;
top: 0; left: 0;
height: 100%; width: 100%;
background: rgba(10,0,0,0.6);
}

.profile-page-flex {
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}

.profile-page-flex > * {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
}

.pp-uc-user-container {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}

.pp-uc-about-me {
background: transparent !important;
border: none !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}

*:hover { box-shadow: none !important; }

header { height: 4rem; }

.pp-top-bar {
position: fixed;
top: 0;
width: 100%;
left: 0;
background: #0f0000 !important;
border-bottom: 1px solid #6b0000 !important;
border-radius: 0 !important;
}

.pp-top-bar-search {
background: #1a0000 !important;
border: 1px solid #6b0000 !important;
border-radius: 4px !important;
}

#search-input {
color: #d4a0a0 !important;
font-family: 'DM Sans' !important;
}

#search-input::placeholder {
color: #6b3333 !important;
font-family: 'DM Sans' !important;
}

.pp-top-bar-create-char {
font-family: 'DM Sans' !important;
color: #d4a0a0 !important;
white-space: nowrap !important;
font-size: 13px !important;
}

svg { color: #8b0000 !important; }

.glow-logo h2 {
font-family: 'DM Sans' !important;
font-weight: 900 !important;
color: #ffffff !important;
font-size: 18px !important;
letter-spacing: -1px !important;
}

.pp-top-bar-logo-sub-name { display: none; }

.pp-top-bar-app-menu-list {
background: #0f0000 !important;
border: 1px solid #6b0000 !important;
border-radius: 8px !important;
}

.pp-top-bar-app-menu-list a {
color: #d4a0a0 !important;
font-family: 'DM Sans' !important;
}

.css-1uodvt1 {
background: rgba(15,0,0,0.9) !important;
border: none !important;
border-radius: 0 !important;
border-left: 3px solid #8b0000 !important;
}

.css-1uodvt1 * {
font-family: 'DM Sans' !important;
color: #d4a0a0 !important;
}

.pp-uc-title {
font-family: 'DM Sans' !important;
font-weight: 900 !important;
color: #ffffff !important;
font-size: clamp(28px, 5vw, 56px) !important;
letter-spacing: -2px !important;
text-transform: lowercase !important;
}

.pp-uc-avatar-container {
border: 2px solid #8b0000 !important;
border-radius: 4px !important;
}

.pp-uc-followers-count {
font-family: 'DM Sans' !important;
font-size: 14px !important;
color: #d4a0a0 !important;
}

.pp-uc-followers-count > span + span { font-size: 0 !important; }
.pp-uc-followers-count > span + span::after {
content: "bound souls";
font-size: 14px !important;
font-family: 'DM Sans' !important;
color: #d4a0a0 !important;
}

.pp-uc-member-since {
font-family: 'DM Sans' !important;
color: #6b3333 !important;
font-size: 12px !important;
}

.pp-uc-about-me * {
font-family: 'DM Sans' !important;
color: #d4a0a0 !important;
line-height: 1.8 !important;
}

.pp-uc-about-me a { color: #cc3333 !important; }

.Btn {
background: #8b0000 !important;
border: none !important;
border-radius: 4px !important;
transition: all 0.2s !important;
}

.Btn:hover { background: #aa0000 !important; }

.Btn > span { font-size: 0 !important; }

.Btn span::after {
content: "Following";
font-size: 13px !important;
color: #ffffff !important;
font-family: 'DM Sans' !important;
font-weight: 600 !important;
}

.Btn[data-following=false] span::after {
content: "Follow";
}

.css-15w88gn {
background: transparent !important;
border: 1px solid #3a0000 !important;
border-radius: 4px !important;
color: #d4a0a0 !important;
font-family: 'DM Sans' !important;
}

.pp-tabs-indicator { background: #8b0000 !important; }

#profile-tabs::before {
content: attr(data-title);
font-family: 'DM Sans';
font-weight: 900;
font-size: clamp(40px, 8vw, 100px);
color: #ffffff;
letter-spacing: -3px;
width: 100%;
display: block;
line-height: 1;
padding: 20px 0 4px;
}

#profile-tabs > div[role="tablist"] {
border-bottom: 1px solid #3a0000 !important;
}

#profile-tabs > div[role="tablist"] > button {
font-family: 'DM Sans' !important;
color: #6b3333 !important;
font-size: 13px !important;
font-weight: 600 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}

#profile-tabs > div[role="tablist"] > button[aria-selected="true"] {
color: #ffffff !important;
}

.css-1y3jyt3 { background: #8b0000 !important; }

.Btn2-purple {
background: transparent !important;
border: 1px solid #3a0000 !important;
border-radius: 4px !important;
}

.Btn2-purple strong {
font-family: 'DM Sans' !important;
color: #d4a0a0 !important;
}

.pp-pg-total p { font-size: 0 !important; }
.pp-pg-total p::after {
content: "sinners";
font-size: 13px !important;
font-family: 'DM Sans' !important;
color: #8b0000 !important;
font-weight: 700 !important;
}

.pp-fl-search-input {
font-family: 'DM Sans' !important;
background: #0f0000 !important;
border: 1px solid #3a0000 !important;
border-radius: 4px !important;
color: #d4a0a0 !important;
}

.pp-fl-search-input:focus {
border-color: #8b0000 !important;
box-shadow: none !important;
}

:is(.css-1n2in4t, .css-8l42c1) {
background: #0f0000 !important;
border: 1px solid #3a0000 !important;
border-radius: 4px !important;
}

.css-b62m3t-container {
background: #0f0000 !important;
border: 1px solid #3a0000 !important;
border-radius: 4px !important;
}

.react-select__control {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}

.react-select__single-value {
color: #d4a0a0 !important;
font-family: 'DM Sans' !important;
}

.react-select__menu {
background: #0f0000 !important;
border: 1px solid #3a0000 !important;
border-radius: 4px !important;
}

.react-select__option {
background: transparent !important;
color: #d4a0a0 !important;
font-family: 'DM Sans' !important;
}

.react-select__option:hover {
background: #1a0000 !important;
color: #ffffff !important;
}

div:has(> div > .profile-character-card-stack) {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
gap: 1px;
}

div:has(> .profile-character-card-stack) {
flex: 0 1 260px;
}

.profile-character-card-stack {
background: #0f0000 !important;
border: 1px solid #2a0000 !important;
border-radius: 0 !important;
transition: all 0.3s ease !important;
}

.pp-cc-wrapper:hover .profile-character-card-stack {
border-color: #8b0000 !important;
}

.profile-character-card-stack * {
font-family: 'DM Sans' !important;
color: #d4a0a0 !important;
}

.pp-cc-name {
color: #ffffff !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: -0.5px !important;
}

.pp-cc-description p {
color: #a07070 !important;
font-size: 12px !important;
line-height: 1.6 !important;
}

.pp-cc-avatar {
filter: brightness(0.85) !important;
mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

._content_1chl9_11 {
background: #8b0000 !important;
box-shadow: none !important;
}

.pp-cc-chats { color: #fff !important; }
.pp-cc-chats-count { color: #fff !important; }
.pp-cc-star-line { border-color: #2a0000 !important; }

.pp-cc-tags-item {
background: #1a0000 !important;
border: 1px solid #3a0000 !important;
border-radius: 3px !important;
color: #d4a0a0 !important;
font-family: 'DM Sans' !important;
font-size: 11px !important;
}

.pp-tag-limitless {
background: #8b0000 !important;
border-color: #cc0000 !important;
color: #fff !important;
}

.pp-cc-creator-name { display: none !important; }

[class*="notificationsPopover"] {
background: #0f0000 !important;
border: 1px solid #3a0000 !important;
border-radius: 8px !important;
}

[class*="notificationsPopover"] * {
font-family: 'DM Sans' !important;
color: #d4a0a0 !important;
}

[class*="popoverTitle"] { color: #ffffff !important; font-weight: 700 !important; }
[class*="notificationsBadge"] { background: #8b0000 !important; }
[class*="unreadIndicator"] { background: #8b0000 !important; }
[class*="timestamp"] { color: #6b3333 !important; }

.css-jdhqy4 > div {
background: #0f0000 !important;
border: 1px solid #3a0000 !important;
border-radius: 6px !important;
color: #d4a0a0 !important;
font-family: 'DM Sans' !important;
}

footer * {
font-family: 'DM Sans' !important;
color: #3a1010 !important;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: #0a0000; }
::-webkit-scrollbar-thumb { background: #8b0000; border-radius: 0; }

</style>

<div style="font-family:'DM Sans',sans-serif;color:#d4a0a0;width:100%;">

<div style="position:relative;width:100%;min-height:420px;overflow:hidden;">
<img src="HERO_IMAGE_URL" style="width:100%;height:420px;object-fit:cover;object-position:center top;display:block;filter:brightness(0.5);mask-image:linear-gradient(to bottom,#000 50%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 100%);">
<div style="position:absolute;bottom:0;left:0;width:100%;padding:0 40px 30px;">
<div style="font-size:clamp(52px,9vw,110px);font-weight:900;color:#fff;letter-spacing:-4px;line-height:0.9;text-transform:lowercase;">NAME<br>PRONOUNS/AGE/WTV</div>
<div style="font-size:14px;color:#d4a0a0;margin-top:12px;letter-spacing:1px;"></div>
</div>
</div>

<div style="background:#0f0000;border-bottom:1px solid #2a0000;overflow:hidden;">
<div style="overflow-x:auto;white-space:nowrap;padding:8px 40px;border-bottom:1px solid #1a0000;">
<img src="GALLERY_1" style="height:110px;width:auto;object-fit:cover;display:inline-block;vertical-align:top;margin-right:4px;filter:brightness(0.7) grayscale(20%);">
<img src="GALLERY_2" style="height:110px;width:auto;object-fit:cover;display:inline-block;vertical-align:top;margin-right:4px;filter:brightness(0.7) grayscale(20%);">
<img src="GALLERY_3" style="height:110px;width:auto;object-fit:cover;display:inline-block;vertical-align:top;margin-right:4px;filter:brightness(0.7) grayscale(20%);">
<img src="GALLERY_4" style="height:110px;width:auto;object-fit:cover;display:inline-block;vertical-align:top;margin-right:4px;filter:brightness(0.7) grayscale(20%);">
<img src="GALLERY_5" style="height:110px;width:auto;object-fit:cover;display:inline-block;vertical-align:top;margin-right:4px;filter:brightness(0.7) grayscale(20%);">
<img src="GALLERY_6" style="height:110px;width:auto;object-fit:cover;display:inline-block;vertical-align:top;filter:brightness(0.7) grayscale(20%);">
</div>
</div>

<table style="width:100%;border-collapse:collapse;">
<tr style="vertical-align:top;">

<td style="width:50%;padding:30px 20px 30px 40px;border-right:1px solid #1a0000;">

<div style="font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#8b0000;margin-bottom:8px;">ABOUT</div>
<div style="font-size:13px;color:#a07070;line-height:1.9;margin-bottom:28px;">
write about who you are<br><br>
second paragraph here. more detail, more depth.
</div>

<div style="margin-bottom:6px;">
<div style="background:#1a0000;border-left:3px solid #8b0000;padding:12px 16px;margin-bottom:4px;font-size:13px;color:#d4a0a0;font-weight:600;">Status</div>
<div style="background:#0f0000;border:1px solid #1a0000;border-top:none;padding:12px 16px;font-size:13px;color:#a07070;">write your current status here</div>
</div>

</td>

<td style="width:50%;padding:30px 40px 30px 20px;vertical-align:top;">

<details style="margin-bottom:4px;">
<summary style="cursor:pointer;list-style:none;background:#1a0000;padding:14px 18px;font-size:13px;font-weight:600;color:#d4a0a0;letter-spacing:1px;border-left:3px solid #8b0000;">What I Write</summary>
<div style="background:#0f0000;border:1px solid #1a0000;border-top:none;padding:16px 18px;font-size:13px;color:#a07070;line-height:1.9;">
write what genres and types of bots you make here — dark romance, mafia, angst, enemies to lovers, arranged marriage, dead dove, whatever fits your style. be specific!
</div>
</details>

<details style="margin-bottom:4px;">
<summary style="cursor:pointer;list-style:none;background:#1a0000;padding:14px 18px;font-size:13px;font-weight:600;color:#d4a0a0;letter-spacing:1px;border-left:3px solid #8b0000;">Rules and Boundaries</summary>
<div style="background:#0f0000;border:1px solid #1a0000;border-top:none;padding:16px 18px;font-size:13px;color:#a07070;line-height:1.9;">
write your rules here — what you do and don't allow, your blocking policy, how you handle reposts, anything important for people to know before interacting.
</div>
</details>

<details style="margin-bottom:20px;">
<summary style="cursor:pointer;list-style:none;background:#1a0000;padding:14px 18px;font-size:13px;font-weight:600;color:#d4a0a0;letter-spacing:1px;border-left:3px solid #8b0000;">Extras and Discord</summary>
<div style="background:#0f0000;border:1px solid #1a0000;border-top:none;padding:16px 18px;font-size:13px;color:#a07070;line-height:1.9;">
write any extra info here — discord link, revospring, requests form, tip jar, anything else you want to share.
</div>
</details>

<table style="width:100%;border-collapse:separate;border-spacing:6px;">
<tr>
<td><a href="#" style="display:block;background:#8b0000;padding:11px 14px;text-align:center;font-size:12px;font-weight:700;color:#fff;text-decoration:none;letter-spacing:1px;text-transform:uppercase;">Bot Request</a></td>
<td><a href="#" style="display:block;background:#1a0000;border:1px solid #3a0000;padding:11px 14px;text-align:center;font-size:12px;font-weight:700;color:#d4a0a0;text-decoration:none;letter-spacing:1px;text-transform:uppercase;">Discord</a></td>
<td><a href="#" style="display:block;background:#1a0000;border:1px solid #3a0000;padding:11px 14px;text-align:center;font-size:12px;font-weight:700;color:#d4a0a0;text-decoration:none;letter-spacing:1px;text-transform:uppercase;">Revospring</a></td>
</tr>
</table>

</td>
</tr>
</table>

<div style="border-top:1px solid #1a0000;padding:24px 40px;">
<div style="font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#8b0000;margin-bottom:16px;">Series / Characters</div>
<div style="overflow-x:auto;white-space:nowrap;padding-bottom:8px;">
<span style="display:inline-block;margin-right:8px;vertical-align:top;white-space:normal;width:110px;">
<img src="SERIES_IMG_1" style="width:110px;height:150px;object-fit:cover;display:block;filter:grayscale(30%) brightness(0.7);border-bottom:2px solid #8b0000;">
<span style="display:block;font-size:11px;color:#d4a0a0;padding:6px 0;text-align:center;letter-spacing:1px;">Character</span>
</span>
<span style="display:inline-block;margin-right:8px;vertical-align:top;white-space:normal;width:110px;">
<img src="SERIES_IMG_2" style="width:110px;height:150px;object-fit:cover;display:block;filter:grayscale(30%) brightness(0.7);border-bottom:2px solid #8b0000;">
<span style="display:block;font-size:11px;color:#d4a0a0;padding:6px 0;text-align:center;letter-spacing:1px;">Character</span>
</span>
<span style="display:inline-block;margin-right:8px;vertical-align:top;white-space:normal;width:110px;">
<img src="SERIES_IMG_3" style="width:110px;height:150px;object-fit:cover;display:block;filter:grayscale(30%) brightness(0.7);border-bottom:2px solid #8b0000;">
<span style="display:block;font-size:11px;color:#d4a0a0;padding:6px 0;text-align:center;letter-spacing:1px;">Character</span>
</span>
<span style="display:inline-block;margin-right:8px;vertical-align:top;white-space:normal;width:110px;">
<img src="SERIES_IMG_4" style="width:110px;height:150px;object-fit:cover;display:block;filter:grayscale(30%) brightness(0.7);border-bottom:2px solid #8b0000;">
<span style="display:block;font-size:11px;color:#d4a0a0;padding:6px 0;text-align:center;letter-spacing:1px;">Character</span>
</span>
<span style="display:inline-block;margin-right:8px;vertical-align:top;white-space:normal;width:110px;">
<img src="SERIES_IMG_5" style="width:110px;height:150px;object-fit:cover;display:block;filter:grayscale(30%) brightness(0.7);border-bottom:2px solid #8b0000;">
<span style="display:block;font-size:11px;color:#d4a0a0;padding:6px 0;text-align:center;letter-spacing:1px;">Character</span>
</span>
<span style="display:inline-block;vertical-align:top;white-space:normal;width:110px;">
<img src="SERIES_IMG_6" style="width:110px;height:150px;object-fit:cover;display:block;filter:grayscale(30%) brightness(0.7);border-bottom:2px solid #8b0000;">
<span style="display:block;font-size:11px;color:#d4a0a0;padding:6px 0;text-align:center;letter-spacing:1px;">Character</span>
</span>
</div>
</div>

<div style="border-top:1px solid #1a0000;padding:12px 40px;text-align:right;">
<span style="font-size:6px;color:#2a0000;letter-spacing:2px;text-transform:uppercase;">css template by @exoreli</span>
</div>

</div>