Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind

FriendRewind

← Back to Layouts

Pivital Blue

Author: Def3ct

Category: Colors

Created: June 12, 2025

Comments (1)

sofluvz4 07/03/2025 7:30 AM

So cool man :)

You must log in to comment.

CSS Code

<style>
/* -- Reset & PS2 Base Styles -- */
body {
    background-color: #0d0d1e !important;
    background-image: 
        /* Top light wisp */
        radial-gradient(ellipse at 50% 0%, rgba(0, 110, 255, 0.1) 0%, transparent 40%),
        /* Bottom light wisp */
        radial-gradient(ellipse at 50% 100%, rgba(0, 110, 255, 0.1) 0%, transparent 40%),
        /* 3D Tower Effect - Farthest */
        repeating-linear-gradient(90deg, 
            rgba(0,0,0,0) 0px, rgba(0,0,0,0) 15px, 
            rgba(120, 150, 255, 0.02) 15px, rgba(120, 150, 255, 0.02) 16px),
        /* 3D Tower Effect - Mid-Far */
        repeating-linear-gradient(90deg, 
            rgba(0,0,0,0) 0px, rgba(0,0,0,0) 40px, 
            rgba(150, 180, 255, 0.03) 40px, rgba(150, 180, 255, 0.03) 42px),
        /* 3D Tower Effect - Mid-Close */
        repeating-linear-gradient(90deg, 
            rgba(0,0,0,0) 0px, rgba(0,0,0,0) 70px, 
            rgba(180, 210, 255, 0.04) 70px, rgba(180, 210, 255, 0.04) 73px),
        /* 3D Tower Effect - Closest */
        repeating-linear-gradient(90deg, 
            rgba(0,0,0,0) 0px, rgba(0,0,0,0) 120px, 
            rgba(200, 220, 255, 0.06) 120px, rgba(200, 220, 255, 0.06) 124px),
        /* Nebula Background Image */
        url(https://res.cloudinary.com/dhpaysqxb/image/upload/v1568580561/nebula_prju57.png) !important;

    background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, no-repeat;
    background-size: 200% 100%, 200% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, cover;
    background-position: 50% 50%;
    
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
    font-size: 13px !important;
    color: #e0e0e0 !important;
    line-height: 1.6 !important;
    text-shadow: 0 0 5px rgba(180, 210, 255, 0.1) !important;
    animation: move-startup-bg 20s linear infinite;
}

@keyframes move-startup-bg {
    0% { 
        background-position: 
            50% 50%, /* wisp */
            50% 50%, /* wisp */
            0% 0%,   /* tower 1 */
            0% 0%,   /* tower 2 */
            0% 0%,   /* tower 3 */
            0% 0%,   /* tower 4 */
            50% 50%; /* nebula */
    }
    100% { 
        background-position: 
            50% 50%, 
            50% 50%, 
            -200px 0%, 
            -400px 0%, 
            -800px 0%, 
            -1600px 0%, 
            55% 50%; 
    }
}


main {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* -- PS2 UI Module Containers -- */
.contact, .url-info, .table-section, .tunes, .blog-preview, .blurbs, .friends, #comments {
    border: 1px solid rgba(0, 110, 255, 0.3) !important;
    border-radius: 2px !important;
    background: rgba(10, 15, 30, 0.85) !important;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 110, 255, 0.1) !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    backdrop-filter: blur(3px) !important;
}

/* -- Module Header -- */
.contact .heading, .url-info .heading, .table-section .heading, .tunes .heading, 
.blog-preview h4, .blurbs .heading, .friends .heading, #comments .heading {
    background: linear-gradient(to right, #003a8c, #0055b5) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 15px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(0, 80, 200, 0.7) !important;
    text-align: left !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* -- Header animation effect -- */
.contact .heading::after, .url-info .heading::after, .table-section .heading::after, 
.tunes .heading::after, .blog-preview h4::after, .blurbs .heading::after, 
.friends .heading::after, #comments .heading::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 70% !important;
    height: 100% !important;
    background: linear-gradient(to right, transparent, rgba(150, 200, 255, 0.1), transparent) !important;
    animation: ps2-scan 5s infinite ease-in-out !important;
}

@keyframes ps2-scan {
    0% { left: -100%; }
    50% { left: 150%; }
    100% { left: 150%; }
}

/* -- Window Content -- */
.contact .inner, .url-info p, .table-section .inner, .tunes .inner, 
.blog-preview, .blurbs .inner, .friends .inner, #comments .inner {
    padding: 15px !important;
    color: #d0d8e8 !important;
    background-color: rgba(5, 10, 20, 0.9) !important;
}

/* -- PS2 Style Buttons -- */
.contact a, .profile-info a {
    display: block !important;
    position: relative !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 12px !important;
    line-height: 28px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    background: linear-gradient(to bottom, #005ace, #0041a3) !important;
    border: 1px solid #0077ff !important;
    border-top-color: #3f9fff;
    border-radius: 3px !important;
    padding: 0 15px !important;
    margin: 0 auto 10px auto !important;
    width: 85% !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all 0.1s ease-in-out !important;
}

.contact a:hover, .profile-info a:hover {
    background: linear-gradient(to bottom, #1a7dff, #005cd9) !important;
    color: #fff !important;
    border-color: #66b3ff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-1px);
}

.contact a:active, .profile-info a:active {
    background: #0041a3 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7) !important;
    transform: translateY(1px);
}

.contact a:last-child { margin-bottom: 0 !important; }
.contact a img { display: none !important; }

/* -- Profile Section -- */
.profile-info { background: none !important; border: none !important; box-shadow: none !important; margin-bottom: 0 !important; }
.profile-info .heading { display: none !important; }
.profile-info .inner { padding: 0 !important; background: none !important; }
.profile-info a { margin-top: 10px !important; }

/* -- Profile Picture & Bio -- */
.profile-pic img {
    border: 2px solid rgba(0, 110, 255, 0.4) !important;
    box-shadow: 0 0 20px rgba(0, 110, 255, 0.15) !important;
    border-radius: 2px !important;
    background-color: #050810 !important;
    padding: 3px !important;
}

.general-about {
    background: rgba(5, 10, 20, 0.8) !important;
    border: 1px solid rgba(0, 110, 255, 0.2) !important;
    border-radius: 2px !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5) !important;
    padding: 12px !important;
    margin-bottom: 15px !important;
}

.general-about .details p { color: #c0c8d8 !important; }

/* -- Friends Grid -- */
.friends-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; }
.friends-grid .person { text-align: center !important; }
.friends-grid img {
    max-width: 75px !important;
    border: 1px solid rgba(0, 110, 255, 0.4) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
    border-radius: 2px !important;
    background: #050810 !important;
    padding: 2px !important;
    transition: all 0.2s ease !important;
}
.friends-grid img:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(0, 110, 255, 0.3) !important; }
.friends-grid a { color: #8cb8ff !important; text-decoration: none !important; text-shadow: 0 0 3px rgba(0, 110, 255, 0.3) !important; }
.friends-grid a:hover { color: #b3d1ff !important; }

/* -- PS2 Style Tables -- */
.details-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid rgba(0, 110, 255, 0.2) !important;
    background: rgba(5, 8, 18, 0.9) !important;
}
.details-table th {
    background: rgba(0, 58, 140, 0.7) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-align: left !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(0, 110, 255, 0.2) !important;
    text-shadow: 0 1px 1px #000 !important;
}
.details-table td {
    padding: 10px 12px !important;
    border: 1px solid rgba(0, 110, 255, 0.15) !important;
    vertical-align: top !important;
    color: #b0b8c8 !important;
}
.details-table tr:nth-child(even) td { background-color: rgba(10, 15, 30, 0.5) !important; }

/* -- View All Link -- */
.friends .more {
    font-size: 11px !important;
    color: #8cb8ff !important;
    text-decoration: none !important;
    position: absolute !important;
    right: 15px !important;
    top: 8px !important;
    z-index: 2 !important;
    text-transform: uppercase;
}
.friends .more:hover { color: #ffffff !important; }

/* -- General Links -- */
a { color: #8cb8ff !important; text-decoration: none !important; transition: color 0.2s ease !important; }
a:hover { color: #b3d1ff !important; }

/* -- Scrollbars -- */
::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
::-webkit-scrollbar-track { background: #050810 !important; }
::-webkit-scrollbar-thumb {
    background: #005ace !important;
    border: 1px solid #003a8c !important;
    border-radius: 2px !important;
}
::-webkit-scrollbar-thumb:hover { background: #1a7dff !important; }

/* -- Status Colors -- */
.online { color: #8aff8a !important; text-shadow: 0 0 5px rgba(100, 255, 100, 0.5) !important; }
.offline { color: #ff8a8a !important; text-shadow: 0 0 5px rgba(255, 100, 100, 0.5) !important; }

/* -- Comments Section -- */
.comments-table { width: 100% !important; border-collapse: collapse !important; background: transparent !important; }
.comments-table td { padding: 10px !important; border: none !important; border-bottom: 1px solid rgba(0, 110, 255, 0.15) !important; background: transparent !important; }
.comments-table img {
    max-width: 60px !important;
    border: 1px solid rgba(0, 110, 255, 0.2) !important;
    border-radius: 2px !important;
    background: #050810 !important;
    padding: 2px !important;
}

/* -- Footer -- */
#footer {
    border-top: 1px solid rgba(0, 110, 255, 0.3) !important;
    background: rgba(5, 10, 20, 0.9) !important;
    padding: 15px !important;
    margin-top: 20px !important;
}

/* -- Horizontal Divider Lines -- */
hr {
    border: none !important;
    height: 1px !important;
    background: rgba(0, 110, 255, 0.2) !important;
    margin: 20px 0 !important;
}

/* -- Input fields -- */
.neon-input, input[type="text"], textarea {
    background: #050810 !important;
    border: 1px solid #005ace !important;
    border-radius: 2px !important;
    color: #e0e0e0 !important;
    padding: 8px 10px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}
.neon-input:focus, input[type="text"]:focus, textarea:focus {
    border-color: #3f9fff !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 110, 255, 0.3) !important;
    outline: none !important;
}

/* -- Blinking text effect for status or titles -- */
.blinking-text::after {
    content: '_' !important;
    animation: blink-cursor 1.2s infinite step-end !important;
    color: #8cb8ff !important;
}

@keyframes blink-cursor {
    50% { opacity: 0; }
}

/* -- Ensure white backgrounds are overridden -- */
.inner, .section, .content-block, .row, .col, .master-container, main,
.top-nav, .navbar, .nav {
    background: transparent !important;
}</style>