Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind

FriendRewind

← Back to Layouts

Alien Horror

Author: Def3ct

Category: Dark

Created: August 14, 2025

Bloody scary

Comments (2)

Strawb3rryluvr 08/26/2025 2:12 PM

I lowket fw this I might keep it for a while

metalheadleftonread 04/19/2026 11:24 PM

Very nice.

You must log in to comment.

CSS Code

<style>
/* Premium Horror Layout — Complex Animated Edition (Header/Nav preserved) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=IM+Fell+English+SC&family=Nosifer&display=swap');

:root{
  --bg-deep:#050507; --glass:rgba(12,10,14,0.65); --edge:rgba(255,0,40,0.25); --edge-strong:rgba(255,0,40,0.6);
  --text:#efeaf5; --text-strong:#ffffff; --muted:#c5bfd0; --blood:#b10018; --bloody:#d10022; --neon:#ff133a;
  --dur-slow:18s; --dur-med:8s; --dur-fast:2.2s;
}

/* Base */
*{ box-sizing:border-box !important; }
html,body{ height:100% !important; }
body{
  background:
    radial-gradient(115% 85% at 50% 20%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.75) 70%, rgba(0,0,0,0.9) 100%),
    url('https://friendrewind.com/uploads/gallery/1/img_689cf8e7b83b37.29273256.jpg') center/cover no-repeat fixed !important;
  background-color:var(--bg-deep) !important;
  color:var(--text) !important;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  line-height:1.55 !important; overflow-x:hidden !important; padding-bottom:72px !important;
}

/* Cinematic overlays (scanlines + fog + vignette pulse) */
body::before, body::after{ content:"" !important; position:fixed !important; inset:0 !important; pointer-events:none !important; z-index:1 !important; }
body::before{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px),
    radial-gradient(1200px 800px at 15% -10%, rgba(255,0,30,0.08), transparent 60%),
    radial-gradient(900px 700px at 110% 120%, rgba(120,0,0,0.16), transparent 60%) !important;
  mix-blend-mode:soft-light !important;
  animation: scanlines var(--dur-fast) linear infinite, grainShift 6s steps(6) infinite !important;
}
body::after{
  background:
    radial-gradient(260px 160px at 20% 80%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(280px 160px at 80% 20%, rgba(255,255,255,0.05), transparent 60%) !important;
  animation: fogMove var(--dur-slow) linear infinite, vignettePulse 10s ease-in-out infinite !important;
}

/* Give 3D context to content (not on body to protect fixed footer) */
.main, main, .container, .master-container{ perspective:1100px !important; transform-style😛reserve-3d !important; }

/* ========== HEADER / NAV (FORCED custom skin) ========== */
body header, body #header, body [id*="header" i], body [class*="header" i],
body [role="banner"], body .top, body #top, body .site-header, body .main-header, body .myspace-header{
  background:
    linear-gradient(135deg, rgba(15,10,14,0.95), rgba(25,15,20,0.9)),
    radial-gradient(120% 200% at 50% -80%, rgba(255,19,58,0.18), transparent 60%) !important;
  background-image:none !important;
  border:1px solid var(--edge) !important; border-radius:14px !important;
  box-shadow:0 12px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  color:var(--text) !important; margin:14px auto !important; padding:10px 12px !important; position:relative !important; z-index:3 !important;
  overflow:hidden !important;
}
/* moving red sheens under header surface */
body [class*="header" i]::before, body header::before, body #header::before{
  content:"" !important; position:absolute !important; inset:-20% -10% !important; z-index:0 !important; pointer-events:none !important;
  background:
    radial-gradient(60% 140% at 0% 0%, rgba(255,19,58,0.25), transparent 40%),
    radial-gradient(50% 130% at 100% 10%, rgba(255,19,58,0.18), transparent 50%) !important;
  filter: blur(10px) !important;
  animation: headerSheen 14s ease-in-out infinite !important;
}
body header *, body #header *, body [id*="header" i] *, body [class*="header" i] *{
  background-image:none !important; border-color:transparent !important; position:relative !important; z-index:1 !important;
}

/* Nav items with animated blood underline + ooze */
body nav, body #nav, body [id*="nav" i], body [class*="nav" i], body .navigation, body .navbar, body .menu, body .topmenu{
  background: transparent !important; border:none !important; box-shadow:none !important; color:var(--text) !important;
}
body nav a, body #nav a, body [id*="nav" i] a, body [class*="nav" i] a,
body .navigation a, body .navbar a, body .menu a, body .topmenu a{
  color:var(--text) !important; font-weight:700 !important; text-decoration:none !important; position:relative !important; padding:6px 10px !important;
}
body nav a::after, body .navigation a::after, body .navbar a::after, body .menu a::after, body .topmenu a::after{
  content:"" !important; position:absolute !important; left:8px !important; right:8px !important; bottom:2px !important; height:2px !important;
  background:linear-gradient(90deg, transparent, var(--bloody), transparent) !important; transform:scaleX(0) !important; transform-origin:left !important;
  transition:transform .25s ease !important; opacity:.95 !important;
}
body nav a:hover::after, body .navigation a:hover::after, body .navbar a:hover::after, body .menu a:hover::after, body .topmenu a:hover::after{
  transform:scaleX(1) !important;
}
/* ooze drop on hover */
body nav a::before, body .navigation a::before, body .navbar a::before, body .menu a::before, body .topmenu a::before{
  content:"" !important; position:absolute !important; width:6px !important; height:6px !important; left:14px !important; bottom:-2px !important;
  background:var(--bloody) !important; border-radius:50% !important; transform:translateY(-6px) scale(0) !important; opacity:0 !important;
  transition:transform .2s ease, opacity .2s ease !important;
}
body nav a:hover::before, body .navigation a:hover::before, body .navbar a:hover::before, body .menu a:hover::before, body .topmenu a:hover::before{
  transform:translateY(0) scale(1) !important; opacity:1 !important;
}

/* Logo/Title horror font */
body header .logo, body #header .logo, body [class*="header" i] .logo,
body header h1, body #header h1, body [class*="header" i] h1{
  font-family:"Nosifer", cursive !important; letter-spacing:.06em !important; color:#fff !important;
  text-shadow:0 0 10px rgba(255,19,58,0.45), 0 2px 0 rgba(0,0,0,0.6) !important;
  background: radial-gradient(60% 180% at 50% -60%, rgba(255,19,58,0.22), transparent 50%) !important;
  padding:6px 10px !important; border-radius:8px !important; display:inline-block !important;
  animation: titleFlicker 2.6s ease-in-out infinite, glitchTiny 7s ease-in-out infinite !important;
}

/* Header search */
body [class*="search" i] input, body input[type="search"], body input[name*="search" i]{
  background:rgba(255,255,255,0.08) !important; color:var(--text) !important;
  border:1px solid rgba(255,255,255,0.18) !important; border-radius:10px !important; padding:6px 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
body [class*="search" i] input:😛laceholder{ color:#cbbfd0 !important; opacity:.8 !important; }
body [class*="search" i] button, body button[type="submit"][name*="search" i]{
  background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)) !important;
  color:var(--text) !important; border:1px solid rgba(255,255,255,0.2) !important; border-radius:10px !important; padding:6px 12px !important;
}

/* ========== CARDS / CONTENT ========== */
main, .container, .master-container, table, tr, td{ background:transparent !important; border:none !important; box-shadow:none !important; position:relative !important; z-index:2 !important; }

.contact, .url-info, .table-section, .tunes, .blog-preview, .blurbs, .friends, #comments, .interestsAndDetails, .latestBlogEntry, .badges, .userBadges, .profile-playlist-widget{
  background: linear-gradient(to bottom, rgba(18,12,14,0.86), rgba(18,12,14,0.62)) !important;
  border:1px solid var(--edge) !important; border-radius:14px !important; backdrop-filter: blur(12px) saturate(120%) !important;
  box-shadow:0 10px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  margin-bottom:26px !important; padding:0 !important; overflow:hidden !important; position:relative !important; z-index:2 !important;
  transform-style😛reserve-3d !important;
}
.contact:hover, .url-info:hover, .table-section:hover, .tunes:hover, .blog-preview:hover, .blurbs:hover, .friends:hover, #comments:hover, .interestsAndDetails:hover, .latestBlogEntry:hover, .badges:hover, .userBadges:hover, .profile-playlist-widget:hover{
  transform: translateZ(0) rotateX(1.2deg) rotateY(-1.2deg) !important;
  box-shadow:0 24px 60px rgba(0,0,0,0.75), 0 0 22px rgba(255,19,58,0.14) !important;
}

/* Animated top drips at z=3 */
.contact::before, .url-info::before, .table-section::before, .tunes::before, .blog-preview::before, .blurbs::before, .friends::before, #comments::before, .interestsAndDetails::before, .latestBlogEntry::before, .badges::before, .userBadges::before, .profile-playlist-widget::before{
  content:"" !important; position:absolute !important; left:0 !important; right:0 !important; top:0 !important; height:14px !important;
  background:
    radial-gradient(10px 14px at 20px 6px, var(--edge-strong) 48%, transparent 52%),
    radial-gradient(12px 16px at 60px 8px, var(--edge-strong) 48%, transparent 52%),
    radial-gradient(8px 12px at 110px 6px, var(--edge-strong) 48%, transparent 52%),
    linear-gradient(var(--edge), var(--edge)) !important;
  filter: drop-shadow(0 6px 2px rgba(255,19,58,0.15)) !important;
  z-index:3 !important; animation: dripSway 5s ease-in-out infinite !important;
}

/* Blood smear at z=5 (below content) with slow creep */
.contact::after, .url-info::after, .table-section::after, .tunes::after, .blog-preview::after, .blurbs::after, .friends::after, #comments::after, .interestsAndDetails::after, .latestBlogEntry::after, .badges::after, .userBadges::after, .profile-playlist-widget::after{
  content:"" !important; position:absolute !important; top:8% !important; left:3% !important; right:5% !important; height:52% !important;
  background:
    radial-gradient(180px 30px at 25% 40%, rgba(220,20,50,0.85), transparent 70%),
    radial-gradient(140px 25px at 65% 65%, rgba(180,0,25,0.75), transparent 68%),
    radial-gradient(110px 20px at 85% 80%, rgba(255,30,65,0.65), transparent 65%),
    radial-gradient(90px 18px at 15% 75%, rgba(200,10,35,0.70), transparent 62%) !important;
  mix-blend-mode: normal !important; opacity:.46 !important; pointer-events:none !important; z-index:5 !important;
  animation: smearCreep 22s linear infinite !important;
}

/* Inner padding/content at z=6 */
.contact .inner, .url-info .inner, .table-section .inner, .tunes .inner, .blog-preview, .blurbs .inner, .friends .inner, #comments .inner, .interestsAndDetails .inner, .latestBlogEntry .inner, .badges .inner, .userBadges .inner, .profile-playlist-widget{
  position:relative !important; z-index:6 !important; padding:20px !important;
}

/* Section headers */
.contact .heading, .url-info .heading, .table-section .heading, .tunes .heading, .blurbs .heading, .friends .heading, #comments .heading, .blog-preview h4, .interestsAndDetails .heading, .latestBlogEntry .heading, .badges .heading, .userBadges .heading{
  font-family:"IM Fell English SC", serif !important; font-size:20px !important; letter-spacing:.08em !important; color:var(--text) !important;
  margin:0 !important; padding:12px 18px !important;
  background:linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(255,255,255,0)) !important;
  border-bottom:1px solid rgba(255,255,255,0.07) !important; text-shadow:0 1px 0 rgba(0,0,0,0.8) !important;
}
.contact .heading::after, .url-info .heading::after, .table-section .heading::after, .tunes .heading::after, .blurbs .heading::after, .friends .heading::after, #comments .heading::after, .blog-preview h4::after, .interestsAndDetails .heading::after, .latestBlogEntry .heading::after, .badges .heading::after, .userBadges .heading::after{
  content:"" !important; position:absolute !important; left:18px !important; right:18px !important; bottom:0 !important; height:2px !important;
  background:linear-gradient(90deg, transparent, var(--bloody), transparent) !important; opacity:.95 !important;
  animation: underlinePulse 5s ease-in-out infinite !important;
}

/* Profile title (Nosifer + glitch) */
.profile .heading{
  font-family:"Nosifer", cursive !important; font-size:26px !important; letter-spacing:.1em !important; color:#fff !important; text-transform:uppercase !important;
  text-shadow:0 0 10px rgba(255,19,58,0.45), 0 2px 0 rgba(0,0,0,0.6) !important; 
  background: radial-gradient(60% 180% at 50% -60%, rgba(255,19,58,0.25), transparent 50%), rgba(15,10,14,0.6) !important;
  border:1px solid var(--edge) !important; padding:10px 14px !important; border-radius:10px !important;
  animation: titleFlicker 2.6s ease-in-out infinite, glitchTiny 7s ease-in-out infinite !important;
}

/* Playlist equalizer effect (CSS-only) */
.profile-playlist-widget{ color:var(--text) !important; position:relative !important; overflow:hidden !important; }
.profile-playlist-widget::before{
  content:"" !important; position:absolute !important; bottom:10px !important; left:12px !important; right:12px !important; height:18px !important; opacity:.3 !important; z-index:0 !important;
  background:
    linear-gradient(90deg,
      rgba(255,19,58,0.9) 0 6px, transparent 6px 12px,
      rgba(255,19,58,0.9) 12px 18px, transparent 18px 24px,
      rgba(255,19,58,0.9) 24px 30px, transparent 30px 36px) !important;
  background-size: 42px 100% !important;
  animation: eqBars 1.2s steps(6,end) infinite !important;
}
.profile-playlist-widget .inner{ position:relative !important; z-index:1 !important; }

/* Nuclear readability overrides */
.blurbs, .blurbs *, .badges, .badges *, .userBadges, .userBadges *, .my-friends-badges-widget, .my-friends-badges-widget *, .badge-widget, .badge-widget *, .table-section, .table-section *, .latestBlogEntry, .latestBlogEntry *, .blog-preview, .blog-preview *, .profile-playlist-widget, .profile-playlist-widget *, #comments, #comments *, .friendsComments, .friendsComments *{
  color: var(--text) !important; text-shadow: 0 1px 0 rgba(0,0,0,0.6) !important;
}
main .badges, main .badges *, main .userBadges, main .userBadges *, main .table-section, main .table-section *, main .latestBlogEntry, main .latestBlogEntry *, main .blog-preview, main .blog-preview *{
  color: var(--text) !important;
}

/* Interests table specifics */
.table-section .details-table, .table-section .details-table tbody, .table-section .details-table tr, .table-section .details-table td, .table-section .details-table th{
  background:transparent !important; color: var(--text) !important; border-color:rgba(255,255,255,0.08) !important;
}
.table-section .details-table td:first-child{ background:rgba(255,255,255,0.08) !important; font-weight:700 !important; }
.table-section .details-table td:last-child{ background:rgba(255,255,255,0.04) !important; }

/* Links + Buttons with micro-animations */
a{ color:var(--bloody) !important; text-decoration:none !important; font-weight:700 !important; position:relative !important; }
a:hover{ color:#fff !important; text-shadow:0 0 8px rgba(255,19,58,0.5) !important; }
button, .btn, input[type="button"], input[type="submit"]{
  appearance:none !important; background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  color:var(--text) !important; border:1px solid rgba(255,255,255,0.15) !important; border-radius:8px !important; padding:6px 12px !important; font-weight:700 !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08) !important; transition: box-shadow .25s ease, transform .2s ease !important;
}
button:hover, .btn:hover, input[type="button"]:hover, input[type="submit"]:hover{
  box-shadow:0 4px 14px rgba(0,0,0,0.55), 0 0 0 3px rgba(255,19,58,0.12) !important; transform:translateY(-1px) !important;
}
button:active, .btn:active, input[type="button"]:active, input[type="submit"]:active{
  box-shadow:0 0 0 6px rgba(255,19,58,0.18) inset !important; transform:translateY(0) scale(0.99) !important;
}

/* Images with twitch hover */
.badges img, .userBadges img{ filter:brightness(1) contrast(1.05) saturate(1.1) !important; }
.friends-grid img, .table-section .inner img, .user-image img, .profile-pic img{
  border-radius:12px !important; border:1px solid rgba(255,255,255,0.07) !important; box-shadow:0 8px 18px rgba(0,0,0,0.5) !important; transition:transform .2s ease !important;
}
.friends-grid img:hover, .table-section .inner img:hover, .user-image img:hover, .profile-pic img:hover{ animation: shiver .35s linear 1 !important; }

/* Footer music bar (fixed) */
#footer-music_bar.music_bar{ position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; width:100% !important; z-index:2147483647 !important; transform:none !important; }

/* Mobile */
@media (max-width: 767px){
  body [class*="header" i]{ border-radius:12px !important; }
  .contact, .url-info, .table-section, .tunes, .blog-preview, .blurbs, .friends, #comments, .interestsAndDetails, .latestBlogEntry, .badges, .userBadges, .profile-playlist-widget{ border-radius:12px !important; }
}

/* Animations */
@keyframes scanlines{ 0%{opacity:.55} 50%{opacity:.75} 100%{opacity:.55} }
@keyframes grainShift{ 0%,100%{transform:translate(0,0)} 25%{transform:translate(-1px,0)} 50%{transform:translate(1px,1px)} 75%{transform:translate(0,-1px)} }
@keyframes fogMove{ 0%{transform:translateX(0)} 50%{transform:translateX(12px)} 100%{transform:translateX(0)} }
@keyframes vignettePulse{ 0%,100%{box-shadow:inset 0 0 0 0 rgba(0,0,0,0)} 50%{box-shadow:inset 0 0 120px 40px rgba(0,0,0,0.35)} }

@keyframes headerSheen{ 0%{transform:translateX(-6%)} 50%{transform:translateX(6%)} 100%{transform:translateX(-6%)} }
@keyframes titleFlicker{ 0%,95%,100%{opacity:1} 96%{opacity:.8} 97%{opacity:1} 98%{opacity:.9} 99%{opacity:1} }
@keyframes glitchTiny{ 0%,100%{transform:translateX(0)} 2%{transform:translateX(2px)} 4%{transform:translateX(-1px)} 6%{transform:translateX(0)} }

@keyframes dripSway{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-6px)} }
@keyframes smearCreep{ 0%{transform:translateY(0)} 50%{transform:translateY(2px)} 100%{transform:translateY(0)} }
@keyframes underlinePulse{ 0%,100%{opacity:.95} 50%{opacity:.6} }
@keyframes eqBars{
  0%{clip-path😛olygon(0% 50%,100% 50%,100% 100%,0% 100%)}
  25%{clip-path😛olygon(0% 10%,100% 70%,100% 100%,0% 100%)}
  50%{clip-path😛olygon(0% 80%,100% 20%,100% 100%,0% 100%)}
  75%{clip-path😛olygon(0% 30%,100% 60%,100% 100%,0% 100%)}
  100%{clip-path😛olygon(0% 50%,100% 50%,100% 100%,0% 100%)}
}
@keyframes shiver{ 0%{transform:translate(0)} 20%{transform:translate(-1px,0)} 40%{transform:translate(1px,0)} 60%{transform:translate(-1px,0)} 80%{transform:translate(1px,0)} 100%{transform:translate(0)} }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}</style>