Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
BlockBuster Nights

Author: Def3ct
Category: Nostalgia
Created: July 1, 2025
Comments (0)

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

<style>
/* Import a bold, rounded font reminiscent of the Blockbuster logo */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

/* --- 1. THEME VARIABLES & KEYFRAMES -- */
:root {
    --font-blockbuster: 'Fredoka One', cursive;
    --font-body: 'Arial', 'Helvetica', sans-serif;
    
    /* Blockbuster Color Palette */
    --bb-blue: #0042A5;
    --bb-gold: #FFD500;
    --bb-text-light: #FFFFFF;
    --bb-text-dark: #222222;

    --container-bg-color: rgba(0, 0, 0, 0.7);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Gentle jiggle for the "Be Kind, Rewind" sticker */
@keyframes jiggle {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

/* --- 2. BASE STYLES & STORE CARPET BACKGROUND --- */
body {
    background-color: #1a1a1a !important;
    background-image: url('https://friendrewind.com/static/uploads/imageb/img_6863215a242c84.34128970.jpg') !important;
    background-attachment: fixed !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    color: var(--bb-text-dark) !important;
    animation: fadeIn 0.8s ease-out;
}

/* CORRECTED: The main corner sticker is now present */
body::after {
    content: '' !important;
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 150px !important;
    height: 150px !important;
    background: url('https://www.friendrewind.com/static/uploads/imageb/bekindrewind.png') no-repeat center center / contain !important;
    z-index: 9999 !important;
    pointer-events: none !important;
    animation: jiggle 5s ease-in-out infinite;
}

body::before { display: none !important; }

main, .container, .master-container { background: none !important; border: none !important; box-shadow: none !important; position: relative; z-index: 100; }

/* Popcorn cursor! */
* { cursor: url(https://cur.cursors-4u.net/food/foo-6/foo510.cur), auto !important; }

/* --- 4. THEMED MODULE CONTAINERS (VHS BOXES) --- */
.contact, .url-info, .table-section, .tunes, .blog-preview, .blurbs, .friends, #comments {
    background: #FDFDFD !important;
    border: 2px solid #333 !important;
    border-radius: 12px !important;
    margin-bottom: 30px !important;
    padding: 0 !important;
    position: relative !important;
    box-shadow: 8px 8px 15px rgba(0,0,0,0.5) !important;
    backdrop-filter: none !important;
    overflow: hidden; 
}

/* Corner sticker for all main content areas */
.contact::after, .url-info::after, .table-section::after, .tunes::after, .blog-preview::after, .blurbs::after, .friends::after, #comments::after {
    content: '' !important;
    position: absolute !important;
    bottom: 8px;
    right: 8px;
    width: 60px;
    height: 60px;
    background: url('https://friendrewind.com/layouts/img/be%20kind.gif') no-repeat center center / contain !important;
    z-index: 5;
    pointer-events: none;
    animation: jiggle 6s ease-in-out infinite alternate;
}


/* --- 6. THEMED HEADERS (VHS SPINE) --- */
.contact .heading, .url-info .heading, .table-section .heading, .tunes .heading,
.blog-preview h4, .blurbs .heading, .friends .heading, #comments .heading {
    color: var(--bb-gold) !important;
    background: var(--bb-blue) !important;
    font-family: var(--font-blockbuster) !important;
    font-weight: 400 !important;
    font-size: 24px !important;
    text-shadow: 2px 2px 0px #000 !important;
    text-align: left !important;
    padding: 15px 20px !important;
    margin: 0 !important;
    border-bottom: 2px solid #333 !important;
    line-height: 1.2 !important;
    display: flex;
    align-items: center;
}

/* Blockbuster Ticket Logo in headers */
.contact .heading::before, .url-info .heading::before, .table-section .heading::before, .tunes .heading::before,
.blog-preview h4::before, .blurbs .heading::before, .friends .heading::before, #comments .heading::before {
    content: '' !important;
    display: inline-block;
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin-right: 15px;
    background: url('https://www.friendrewind.com/static/uploads/imageb/blockbuster-logo-icon.png') no-repeat center center / contain;
}

/* --- 7. CONTENT & LINKS --- */
.contact .inner, .url-info p, .table-section .inner, .tunes .inner,
.blog-preview, .blurbs .inner, .friends .inner, #comments .inner {
    padding: 25px !important;
    line-height: 1.7;
}

a {
    color: var(--bb-blue) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    font-weight: bold !important;
    text-shadow: none !important;
    transition: all 0.2s ease !important;
}
a:hover {
    color: var(--bb-text-light) !important;
    background-color: var(--bb-blue) !important;
}

/* --- 8. FRIENDS & PHOTOS (MOVIE POSTERS) --- */
.friends-grid { 
    display: grid !important; 
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 20px;
}
.friends-grid img, 
.table-section .inner img,
.profile-pic img, .user-image img, .general-about .details-below .pic-container img {
    width: 100%;
    height: auto;
    border-radius: 8px !important;
    padding: 0 !important;
    background: #000 !important;
    border: 4px solid #fff !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important;
    transition: all 0.3s ease !important;
    position: relative;
}

/* Corner sticker for all photos */
.friends-grid img::after, 
.table-section .inner img::after,
.profile-pic img::after, .user-image img::after, .general-about .details-below .pic-container img::after {
    content: '' !important;
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 35px;
    height: 35px;
    background: url('https://friendrewind.com/layouts/img/be%20kind.gif') no-repeat center center / contain !important;
    z-index: 5;
    pointer-events: none;
}


.friends-grid img:hover, 
.table-section .inner img:hover,
.profile-pic img:hover, .user-image img:hover, .general-about .details-below .pic-container img:hover {
    transform: scale(1.05) translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important;
}

/* --- 9. THEMED TABLES --- */
.details-table { border: 2px solid #ddd; border-collapse: collapse; }
.details-table th, .details-table td { 
    border: 1px solid #ddd !important;
    text-shadow: none !important;
    padding: 12px !important;
}
.details-table th { background: var(--bb-blue) !important; color: var(--bb-text-light) !important; font-family: var(--font-blockbuster); }
.details-table tr:nth-child(even) td { background-color: rgba(0, 66, 165, 0.05) !important; }

/* --- 10. SCROLLBARS --- */
::-webkit-scrollbar { width: 15px !important; }
::-webkit-scrollbar-track { background: #002d72 !important; }
::-webkit-scrollbar-thumb {
    background: var(--bb-gold) !important;
    border-radius: 4px !important;
    border: 2px solid #002d72;
}

/* --- 11. HEADER & NAVIGATION (STOREFRONT SIGN) --- */
.main-header, .myspace-header {
    background: var(--bb-blue) !important;
    background-image: linear-gradient(to bottom, #0052D4, #003687) !important;
    border: 4px solid var(--bb-gold) !important;
    border-radius: 12px !important;
    margin: 20px auto !important;
    padding: 10px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
    width: 95% !important;
}

/* UPDATED: New background for top-nav */
.top-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 8px !important;
    border-bottom: 2px dashed var(--bb-gold) !important;
    background-image: url('https://substackcdn.com/image/fetch/$s_!oVPT!,w_520,h_272,c_fill,f_auto,q_auto:good,fl_progressive:steep,g_auto/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe3a745a8-543c-44ed-b7cc-541b20698f8d_440x337.gif') !important;
    background-size: cover;
    background-position: bottom;
}

/* UPDATED: Nav wrapper with corrected alignment to force links higher */
.main-nav-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 4px 0 8px 0 !important; /* Less top padding, more bottom padding */
}

.main-nav a, .nav a {
    color: var(--bb-gold) !important;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5) !important;
    font-family: var(--font-blockbuster);
    font-size: 16px !important;
    font-weight: 400 !important;
    background: none !important;
    padding: 2px 10px !important; /* Reduced vertical padding */
    margin: 0 4px !important;
    border: none !important;
    line-height: 1 !important; /* Added to reduce extra vertical space */
    transition: all 0.2s ease-in-out !important;
}

.main-nav a:hover, .nav a:hover {
    color: var(--bb-text-light) !important;
    transform: scale(1.1);
}

.top-nav .search-box input {
    border-radius: 6px !important;
    border: 2px solid #002d72 !important;
}
.top-nav .search-box input[type="text"] {
    background: #FFF !important;
    color: #000 !important;
    padding: 6px 9px !important;
}
.top-nav .search-box input[type="submit"] {
    font-family: var(--font-blockbuster) !important;
    color: #000 !important;
    background: var(--bb-gold) !important;
    padding: 6px 12px !important;
}</style>