← Back to Layouts
08/01/2026 - purple tranquility

Name: FriendRewind
Author: FriendRewind
Author: nara ♥︎
Category: Personal layout
Created: August 1, 2026
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<style>
  
@import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400..900;1,400..900&display=swap');
  
* {
  cursor: url('https://cdn.cursors-4u.net/previews/adorable-cake-smiley-1a5bb3b2-32.webp') 32 32, auto !important; }

html {
	animation: fadeIn ease 3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards; }

@keyframes fadeIn {
	0% {opacity: 0; }
	100% {opacity: 1; }}

.master-container {
  border: 10px solid;
  border-image: url(https://i.postimg.cc/sxwTXvr5/simplescallop.png) 8 fill round; }
 
body {
  background: url(https://foollovers.com/mat/other/k07-bg-arabesque.gif);
  font-family: 'Besley', serif; }

:root {
  --purple: #5d1451;
  --purple-border: 1px solid #330a31;
  --border: 1px solid #630a3d;
  --box-shadow: inset 0 2px 4px #edd8e4; }

.online { content: url(https://pixels.crd.co/assets/images/gallery130/1b4dd919.gif?v=29416114); }
  
nav .top, nav .links, footer, footer .links, footer a {
  background: var(--purple);
  color: white; }
  
nav .top { 
  border: var(--purple-border);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  box-shadow: var(--box-shadow); }

nav#nav .links {
  border: var(--purple-border);
  border-top: 0;
  border-radius: 0 0 2px 2px;
  box-shadow: inset 0 -2px 4px #edd8e4; }
  
footer { 
  border: var(--purple-border);
  border-radius: 2px;
  box-shadow: var(--box-shadow);
  padding: 5px!important;
  margin-top: 0!important; }

footer ul.links, footer a {
  border: none!important;
  box-shadow: none!important;
  font-size: 11px!important; }
  
nav .links a { 
  color: white!important;
  font-size: 14px; }
  
nav .links a, footer .links a {
  text-shadow: none;
  margin: 3px; }

nav#nav .links li::after { display: none!important; }

footer ul.links li::after { color: white!important; }
  
body.profile-page nav#nav .links ul {
  padding-top: 10px!important;
  padding-bottom: 10px!important; }

body.profile-page main {
  background: white;
  border-radius: 0!important;
  margin-top: 5px!important; }
  
main, main p { 
  color: #630a3d; 
  font-size: 14px;
  line-height: 1.5!important; }
  
main a, .count { color: #0a3763!important; }

.table-section.photos-preview h4 a, .friends .heading a.more { 
  color: white!important;
  font-weight: normal; }
  
img.pf-photo-thumb { 
  max-height: 100px!important;
  max-width: 100px!important;
  margin: 3px!important; }

.profile-mood b { margin-right: 3px; }

input {
  border: 1px solid #a3a3a3;
  padding: 2px;
  width: 200px; }

button.search-button {
  background-color: #f0f0f0;
  border: 0;
  border-radius: 0;
  color: white;
  padding: 2px 4px 2px 4px;
  font-size: 0;
  font-weight: bold;
  text-transform: lowercase;
  margin-left: -23px; }

button.search-button:after {
  display: inline-block;
  content: "🔎"; 
  font-size: 14px!important; }
  
button.search-button:hover {
  background: #c9c9c9; 
  transition-duration: 400ms; }

.profile .contact .heading, .profile .table-section .heading {
  background: var(--purple);
  border-bottom: var(--purple-border);
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 1px 1px 0 0;
  box-shadow: var(--box-shadow); }

.profile .blurbs .heading, .profile .friends .heading {
  background: var(--purple);
  border: var(--purple-border);
  border-radius: 2px;
  box-shadow: var(--box-shadow);
  color: white; }
  
.profile .contact, .profile .table-section, .profile-info { 
  border: var(--purple-border);
  border-radius: 2px; }
  
.url-info, .blog-preview { display: none; }
  
.details-table td {
  border: 1px dotted #2b2b2b; }

.profile .blurbs .section h4 { display: none; }
  
.profile .friends .inner .friends-grid .person p {
  border: 8px solid;
  border-image: url(https://i.postimg.cc/RV2RWd99/lace.png) 7 fill round; 
  color: #0a3763; }
  
.friends p:first-of-type { margin-left: 0; }
 
.profile h1:after {
  content: "(@naruchan)";
  display: block;
  font-size: 12px; }

.profile-pic img, .profile .friends .inner .friends-grid .person img:not(.icon), .comments-table td:first-child img:not(.icon) {
  border: 7px solid;
  border-image: url(https://i.postimg.cc/jqFM6dLr/51a-none.gif) 10 fill round; }
  
table.comments-table { 
  background: none;
  border: 0; }
 
.comments-table td:first-child { border-right: 0!important; }

.comments-table td:first-child, .comments-table td {
  background: #edd8e4;
  border: var(--border);
  border-spacing: 2px; }

.comment-reply {
  background: white;
  border: 0!important;
  border-radius: 0!important;
  margin: 0!important; }
  
.cb-content-cell { padding: 5px!important; }
  
.comment-replies { 
  border: 1px dotted #630a3d;
  border-radius: 0; }

.profile-playlist-widget {
  background-color: transparent!important;
  border: var(--border)!important;
  border-radius: 2px!important;
  min-width: 345px!important;
  box-shadow: none!important; }

.profile-playlist-widget h3 {
  color: #630a3d!important; }
  
.profile-playlist-widget li {
  background-color: #edd8e4!important; 
  border: 1px dotted #630a3d!important;
  border-radius: 2px!important; }
  
span.song-info, span.song-artist, span.pp-drag, span.pp-equalizer, button.pp-remove { 
  color: #630a3d!important;
  text-shadow: none!important; }
  
.bar-now-playing, .music-bar .bar-title {
  color: #0a3763!important;
  text-shadow: none!important;
  font-family: 'Besley', serif;
  font-size: 14px!important; }
  
.music-bar::before { background: white!important; }
  
.music-bar { background: white!important; }

.music-bar .bar-btn { color: #0a3763!important; }

.bar-progress-fill, .volume-slider { 
  background: var(--purple)!important;
  border: var(--purple-border)!important; }
  
</style></style>