← Back to Layouts
🕯

Name: FriendRewind
Author: FriendRewind
Author: smokeypurple 𓏲ּ𝄢☠︎︎
Category: Classic
Created: November 2, 2026
Comments (0)

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

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"","overlayUrl":"https://pin.it/2SUez14sz","overlayOpacity":0.2,"avatarAnimation":"","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"https://friendrewind.com/uploads/gallery/34107/img_6ae8df0b11bb43.18976355.webp","pageBgMode":"tile","heroImageUrl":"https://friendrewind.com/uploads/gallery/34107/img_6ae8dfd7a89ae5.70621766.webp","profileRowBgImage":"https://friendrewind.com/uploads/gallery/34107/img_6ae8df0b11bb43.18976355.webp","profileRowBgMode":"tile","navBgColor":"#ffffff","navBgImage":"https://friendrewind.com/uploads/gallery/34107/img_6ae8e04cf32b38.11390612.webp","navBgMode":"tile","navLinkColor":"#ffffff","navLinkHover":"#404040","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":8,"contactHeaderBg":"#ffffff","contactHeaderText":"#000000","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":1,"contactBorderRadius":5,"contactBoxAnimation":"","interestsHeaderBg":"#ffffff","interestsHeaderText":"#000000","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":1,"interestsBorderRadius":5,"contentBoxAnimation":"","textBody":"#000000","textHeading":"#000000","textLink":"#000000","headingShadowColor":"#000000","headingShadowBlur":25,"headingShadowEnable":false,"moduleImages":{"contact":"https://friendrewind.com/uploads/gallery/34107/img_6ae8e57c1f0c00.48568811.gif","urlInfo":"https://friendrewind.com/uploads/gallery/34107/img_6ae8e57c1f0c00.48568811.gif","tableSection":"https://friendrewind.com/uploads/gallery/34107/img_6ae8ea5004f725.83240320.webp","tunes":"https://friendrewind.com/uploads/gallery/34107/img_6ae8e5ad7ab591.63055178.webp","blogPreview":"https://friendrewind.com/uploads/gallery/34107/img_6ae8e57c1f0c00.48568811.gif","blurbs":"https://friendrewind.com/uploads/gallery/34107/img_6ae8e57c1f0c00.48568811.gif","friends":"https://friendrewind.com/uploads/gallery/34107/img_6ae8e57c1f0c00.48568811.gif","Comments Background":"https://friendrewind.com/uploads/gallery/34107/img_6ae8e57c1f0c00.48568811.gif","comments":"https://friendrewind.com/uploads/gallery/34107/img_6ae8e57c1f0c00.48568811.gif"}} */
/* Generated by FriendRewind.com Visual Builder */

html::before {
    content: "";
    position: fixed;
    top: -100%; left: -50%;
    width: 300%; height: 300%;
    background-image: url('https://pin.it/2SUez14sz');
    opacity: 0.2;
    pointer-events: none;
    animation: grain 8s steps(10) infinite;
    z-index: -2;
  }

@keyframes grain {
    0%, 100% { transform:translate(0, 0) }
    10% { transform:translate(-5%, -10%) }
    20% { transform:translate(-15%, 5%) }
    30% { transform:translate(7%, -25%) }
    40% { transform:translate(-5%, 25%) }
    50% { transform:translate(-15%, 10%) }
    60% { transform:translate(15%, 0%) }
    70% { transform:translate(0%, 15%) }
    80% { transform:translate(3%, 35%) }
    90% { transform:translate(-10%, 10%) }
  }

body, body.profile-page {
  background-image: url("https://friendrewind.com/uploads/gallery/34107/img_6ae8df0b11bb43.18976355.webp") !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-attachment: scroll !important;
  background-position: center center !important;
}

@media (min-width: 769px) and (pointer: fine) {
  body, body.profile-page {
    background-attachment: fixed !important;
  }
}

main::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    background-image: url('https://friendrewind.com/uploads/gallery/34107/img_6ae8dfd7a89ae5.70621766.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
  }

.profile {
  background-image: url("https://friendrewind.com/uploads/gallery/34107/img_6ae8df0b11bb43.18976355.webp") !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-position: top center !important;
}

.myspace-header .top-nav {
  background: #ffffff;
  background-image: url("https://friendrewind.com/uploads/gallery/34107/img_6ae8e04cf32b38.11390612.webp");
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
}

.myspace-header .main-nav-wrapper {
  background: #ffffff;
  background-image: url("https://friendrewind.com/uploads/gallery/34107/img_6ae8e04cf32b38.11390612.webp");
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
}

.myspace-header .main-nav li a:hover {
  color: #404040;
}

.contact {
    border: 1px solid #ffffff !important;
    border-radius: 5px !important;
  }

.contact .heading {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

.table-section, .friends, .blurbs, .module, .profileInfo {
    border: 1px solid #ffffff !important;
    border-radius: 5px !important;
  }

.table-section .heading, .friends .heading, .blurbs .heading, .section .heading, .module .heading, .profileInfo .heading {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

a, .profile a, .table-section a, .module a { color: #000000 !important; }

.contact, .url-info, .blog-preview, .blurbs, .friends, #comments, .comments-table td {
  background-image: url("https://friendrewind.com/uploads/gallery/34107/img_6ae8e57c1f0c00.48568811.gif") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.table-section {
  background-image: url("https://friendrewind.com/uploads/gallery/34107/img_6ae8ea5004f725.83240320.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.tunes {
  background-image: url("https://friendrewind.com/uploads/gallery/34107/img_6ae8e5ad7ab591.63055178.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
/* 𓆩♡𓆪
   THE CELESTIAL RELIQUARY
   porcelain angels / haunted antiques / divine radiance
   a forgotten shrine that should not be opened
𓆩♡𓆪 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IM+Fell+English:ital@0;1&family=Petit+Formal+Script&display=swap');


/* ═══════════════════════════════════
   I. THE SACRED ATMOSPHERE
═══════════════════════════════════ */

:root {
    --bone: #fffaf0;
    --porcelain: #f5e9e4;
    --ghost: #e9e0f3;
    --dusty-rose: #c8a5a5;
    --antique-gold: #c6a66b;
    --old-gold: #8d714b;
    --wax: #e9d7b3;
    --sepia: #59473d;
    --abyss: #241b27;

    --holy-glow:
        0 0 4px #fffdf4,
        0 0 10px #fff8e5,
        0 0 22px #f6e7bd,
        0 0 40px #e8c9a1,
        0 0 75px rgba(224, 195, 232, .65);

    --rose-glow:
        0 0 8px rgba(255, 228, 235, .9),
        0 0 22px rgba(220, 170, 196, .7),
        0 0 45px rgba(187, 146, 190, .4);
}

html {
    min-height: 100%;
    background-color: var(--abyss);
}

body {
    min-height: 100vh;
    color: var(--bone);

    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    letter-spacing: .7px;

    background-color: #241b27;

    background-image:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(255, 244, 216, .28),
            transparent 45%
        ),
        radial-gradient(
            ellipse at 0% 45%,
            rgba(190, 157, 201, .20),
            transparent 45%
        ),
        radial-gradient(
            ellipse at 100% 75%,
            rgba(217, 179, 186, .16),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #342737 0%,
            #211923 48%,
            #30212b 100%
        );

    background-attachment: fixed;
}


/* ═══════════════════════════════════
   II. THE SPECTRAL LIGHT
═══════════════════════════════════ */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% 20%,
            rgba(255, 248, 224, .10),
            transparent 55%
        ),
        linear-gradient(
            115deg,
            transparent 35%,
            rgba(255, 235, 215, .035) 50%,
            transparent 65%
        );

    animation: celestial-breath 8s ease-in-out infinite alternate;
}

body::after {
    content: "✧  ˚  .  ⋆  𓆩♡𓆪  ⋆  .  ˚  ✧";

    position: fixed;
    bottom: 3%;
    left: 0;
    width: 100%;

    z-index: 1000;
    pointer-events: none;

    color: rgba(255, 242, 215, .55);
    text-align: center;
    font-size: 15px;
    letter-spacing: 12px;

    text-shadow: var(--holy-glow);
    opacity: .75;
}

@keyframes celestial-breath {
    from {
        opacity: .45;
        filter: brightness(.85);
    }

    to {
        opacity: 1;
        filter: brightness(1.2);
    }
}


/* ═══════════════════════════════════
   III. THE ANTIQUE SHRINE
═══════════════════════════════════ */

#profile,
.profile,
main,
.container {
    position: relative;
    color: var(--bone);
}

/* Antique frames around profile sections */

section,
.profile-section,
.card,
.panel,
.box {
    position: relative;

    color: var(--bone);

    background:
        linear-gradient(
            145deg,
            rgba(255, 248, 234, .095),
            rgba(85, 58, 75, .18) 55%,
            rgba(231, 206, 188, .045)
        );

    border: 1px solid rgba(207, 176, 131, .58);

    outline: 1px solid rgba(244, 222, 194, .12);
    outline-offset: 4px;

    box-shadow:
        inset 0 0 22px rgba(242, 217, 189, .055),
        0 0 12px rgba(231, 203, 183, .09),
        0 0 30px rgba(188, 148, 197, .08);

    backdrop-filter: blur(4px);
}

/* Double-frame antique effect */

section::before,
.profile-section::before,
.card::before,
.panel::before,
.box::before {
    content: "✧";
    position: absolute;

    top: 5px;
    right: 9px;

    color: var(--wax);
    font-size: 15px;

    text-shadow: var(--holy-glow);
    opacity: .85;

    pointer-events: none;
}


/* ═══════════════════════════════════
   IV. THE HALO TYPOGRAPHY
═══════════════════════════════════ */

h1,
h2,
h3,
h4,
.profile-name,
.username,
.title {
    color: #fff8e9;

    font-family: 'IM Fell English', serif;
    font-weight: 400;
    letter-spacing: 2px;

    text-shadow:
        0 0 3px #fff,
        0 0 9px rgba(255, 248, 226, .95),
        0 0 18px rgba(241, 218, 183, .8),
        0 0 35px rgba(221, 188, 224, .55);

    animation: halo-pulse 4s ease-in-out infinite alternate;
}

h1 {
    font-size: clamp(28px, 5vw, 48px);
    text-align: center;
}

h2 {
    font-size: 29px;
}

h3 {
    font-size: 23px;
}

@keyframes halo-pulse {
    from {
        text-shadow:
            0 0 4px #fff,
            0 0 12px rgba(255, 246, 222, .8),
            0 0 25px rgba(231, 198, 208, .4);
    }

    to {
        text-shadow:
            0 0 5px #fff,
            0 0 12px #fff8e9,
            0 0 26px rgba(255, 231, 189, .95),
            0 0 45px rgba(223, 189, 231, .7);
    }
}

p,
li,
label,
figcaption {
    color: #e9dcd9;
    line-height: 1.8;
}


/* ═══════════════════════════════════
   V. THE FORGOTTEN SCRIPTURES
═══════════════════════════════════ */

a {
    color: #f2d9e5;
    text-decoration: none;

    transition:
        color .35s ease,
        text-shadow .35s ease,
        letter-spacing .35s ease;
}

a:hover {
    color: #fffdf4;
    letter-spacing: 1.4px;

    text-shadow:
        0 0 4px white,
        0 0 10px #fff0d5,
        0 0 22px #e9c9e8,
        0 0 38px #c8a5d7;
}


/* ═══════════════════════════════════
   VI. PORCELAIN RELICS
═══════════════════════════════════ */

img {
    border: 1px solid rgba(229, 202, 164, .8);

    box-shadow:
        0 0 5px rgba(255, 247, 225, .5),
        0 0 15px rgba(227, 198, 210, .25),
        0 0 35px rgba(191, 159, 206, .17);

    filter: sepia(.13) saturate(.83) contrast(1.03);

    transition:
        filter .6s ease,
        box-shadow .6s ease;
}

img:hover {
    filter: sepia(0) saturate(1.15) brightness(1.09);

    box-shadow:
        0 0 6px white,
        0 0 18px rgba(255, 246, 220, .8),
        0 0 35px rgba(236, 201, 223, .7),
        0 0 60px rgba(210, 186, 239, .4);
}


/* ═══════════════════════════════════
   VII. THE WAX-SEALED BUTTONS
═══════════════════════════════════ */

button,
input[type="button"],
input[type="submit"],
.button {
    color: #fff4e6;

    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    letter-spacing: 1.5px;

    background:
        linear-gradient(
            135deg,
            rgba(198, 166, 107, .25),
            rgba(96, 68, 94, .5)
        );

    border: 1px solid rgba(225, 196, 149, .75);
    border-radius: 2px;

    padding: 9px 18px;

    box-shadow:
        inset 0 0 12px rgba(255, 239, 208, .07),
        0 0 10px rgba(231, 203, 183, .12);

    cursor: pointer;

    transition: all .4s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover {
    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(255, 237, 204, .3),
            rgba(167, 130, 179, .4)
        );

    box-shadow:
        0 0 5px white,
        0 0 15px rgba(255, 242, 213, .7),
        0 0 30px rgba(216, 180, 229, .5);

    transform: translateY(-2px);
}


/* ═══════════════════════════════════
   VIII. THE ANTIQUE DIVIDER
═══════════════════════════════════ */

hr {
    height: 1px;
    border: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(205, 169, 115, .85),
            rgba(255, 247, 222, .95),
            rgba(205, 169, 115, .85),
            transparent
        );

    box-shadow:
        0 0 5px rgba(255, 244, 215, .65),
        0 0 15px rgba(224, 191, 220, .35);

    margin: 28px 0;
}


/* ═══════════════════════════════════
   IX. THE UNCANNY DOLLHOUSE
═══════════════════════════════════ */

blockquote {
    position: relative;

    margin: 20px 0;
    padding: 18px 22px;

    color: #f2e1df;
    font-family: 'IM Fell English', serif;
    font-style: italic;

    background:
        linear-gradient(
            120deg,
            rgba(233, 213, 190, .09),
            rgba(177, 145, 181, .11)
        );

    border-left: 2px solid var(--antique-gold);

    box-shadow:
        inset 0 0 18px rgba(255, 244, 221, .04),
        0 0 15px rgba(212, 184, 211, .07);
}

blockquote::before {
    content: "“";

    position: absolute;
    top: -13px;
    left: 8px;

    color: rgba(239, 213, 169, .65);
    font-family: 'Petit Formal Script', cursive;
    font-size: 40px;

    text-shadow: var(--holy-glow);
}


/* ═══════════════════════════════════
   X. THE CELESTIAL CURSOR
═══════════════════════════════════ */

::selection {
    color: #382538;
    background: #f1dfd2;
}

:focus-visible {
    outline: 2px solid #f6e4c5;
    outline-offset: 4px;

    box-shadow: 0 0 12px rgba(255, 245, 222, .65);
}


/* ═══════════════════════════════════
   XI. THE FINAL BENEDICTION
═══════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
</style><style>

/* 𓆩♡𓆪 CELESTIAL SNOWFALL 𓆩♡𓆪 */

body {
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: -100% 0 0 0;
    width: 100%;
    height: 300%;

    pointer-events: none;
    z-index: 99999;

    background-image:
        radial-gradient(2px 2px at 40px 60px,
            #fffaf0 99%, transparent),
        radial-gradient(3px 3px at 120px 150px,
            #fff 99%, transparent),
        radial-gradient(1px 1px at 200px 90px,
            #f6e8ff 99%, transparent),
        radial-gradient(2px 2px at 280px 210px,
            #fff4df 99%, transparent),
        radial-gradient(3px 3px at 350px 40px,
            #fffaf0 99%, transparent),
        radial-gradient(1px 1px at 450px 180px,
            #fff 99%, transparent),
        radial-gradient(2px 2px at 520px 120px,
            #eadbff 99%, transparent);

    background-size: 550px 280px;

    animation: angelic-snow 18s linear infinite;

    opacity: .85;
}

@keyframes angelic-snow {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(280px);
    }
}
</style><style>

/* 𓆩♡𓆪 ANTIQUE ANGEL WING HEADERS 𓆩♡𓆪 */

h1::before,
h2::before,
h3::before {
    content: "";
    display: inline-block;

    width: 40px;
    height: 19px;

    background-image: url("https://dl.glitter-graphics.com/pub/157/157641b27q8mcaol.gif");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    margin-right: 10px;
    vertical-align: middle;

    filter:
        drop-shadow(0 0 3px #fffaf0)
        drop-shadow(0 0 7px #f3dfc5)
        drop-shadow(0 0 13px #dfc4ef);
}

h1::after,
h2::after,
h3::after {
    content: "";
    display: inline-block;

    width: 40px;
    height: 19px;

    background-image: url("https://dl.glitter-graphics.com/pub/157/157641b27q8mcaol.gif");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    margin-left: 10px;
    vertical-align: middle;

    transform: scaleX(-1);

    filter:
        drop-shadow(0 0 3px #fffaf0)
        drop-shadow(0 0 7px #f3dfc5)
        drop-shadow(0 0 13px #dfc4ef);
}
</style><style>

/* 𓆩♡𓆪 SILVER RELIQUARY HEADER 𓆩♡𓆪 */

/* Replace HEADER-IMAGE-URL with the direct
   image URL from your Glitter Graphics divider. */

.profile-header {
    position: relative;
    overflow: visible;
}

.profile-header::before {
    content: "";
    position: absolute;

    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    height: 45px;

    background-image: url("https://www.glitter-graphics.com/dividers/abstract/TEH-silver");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;

    pointer-events: none;
    z-index: 10;

    filter:
        drop-shadow(0 0 4px #fff)
        drop-shadow(0 0 10px #e8e1f5)
        drop-shadow(0 0 20px #c8b8e6);
}
</style><style>

/* 𓆩♡𓆪 SILVER ANGEL BANNER ORNAMENT 𓆩♡𓆪 */

/* GENERAL BANNER SELECTORS — may need adjustment */

.profile-banner,
.profile-cover,
.profile-header,
.profile-bg {
    position: relative;
}

/* Silver divider above the banner */

.profile-banner::before,
.profile-cover::before,
.profile-header::before,
.profile-bg::before {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 100%;

    transform: translateX(-50%);

    width: 100%;
    height: 45px;

    background-image: url("https://www.glitter-graphics.com/dividers/abstract/TEH-silver");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    filter:
        drop-shadow(0 0 4px white)
        drop-shadow(0 0 10px #e8e1f5)
        drop-shadow(0 0 18px #c8b8e6);

    pointer-events: none;
    z-index: 99;
}
</style>