Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Liminal

Author: liminality
Category: <3
Created: June 23, 2026
Comments (0)

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

<style>
<style>
/* ==========================================================================
   ║  LIMINALITY — LEVEL 0  ·  custom layout for FriendRewind / SpaceHey      ║
   ║  PASTE THIS WHOLE <style> BLOCK INTO THE CSS EDITOR                      ║
   ║  (include the <style> tags if your editor expects them; drop them if    ║
   ║   the field is CSS-only.)                                               ║
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · SITE :root OVERRIDES
   FriendRewind exposes theming variables on :root. The names below are the
   common SpaceHey-family guesses — OPEN DEVTOOLS, find the real names, and
   rename to match. Even if a name is wrong it does no harm: the whole theme
   also runs off the self-contained --lim-* tokens declared right after, so
   nothing breaks if a site var doesn't exist.
   -------------------------------------------------------------------------- */
:root {
  --background:        #c4b56b !important;  /* page                       */
  --foreground:        #211e12 !important;  /* primary text               */
  --text:              #211e12 !important;
  --text-muted:        #4a4530 !important;
  --primary:           #9fb0a4 !important;  /* links / accents            */
  --secondary:         #8a7f4e !important;
  --accent:            #b8c2a0 !important;  /* sickly exit-sign green      */
  --link:              #9fb0a4 !important;
  --link-hover:        #b8c2a0 !important;
  --border:            #14130c !important;
  --container-bg:      #c0b167 !important;
  --module-bg:         #b9aa63 !important;
  --header-bg:         #14130c !important;

  /* ---- self-contained palette this theme actually reads from ---- */
  --lim-wall:     #c4b56b;   /* backrooms wallpaper yellow            */
  --lim-wall-dk:  #9c8f4f;
  --lim-carpet:   #8a7f4e;   /* damp tan                              */
  --lim-floor:    #6f6740;
  --lim-floor-dk: #2a2616;
  --lim-fluor:    #f3efda;   /* fluorescent white, faintly green      */
  --lim-fluor-dim:#d7d2b4;
  --lim-teal:     #9fb0a4;   /* pale blue-green                       */
  --lim-teal-dk:  #6f8076;
  --lim-exit:     #b8c2a0;   /* exit-sign sickly green                */
  --lim-shadow:   #14130c;   /* deep shadow zone                      */
  --lim-shadow-2: #0b0a06;
  --lim-ink:      #211e12;   /* body text                             */
  --lim-ink-soft: #4a4530;
  --lim-red:      #a86a66;   /* desync red, muted                     */

  --lim-mono: "Courier New", "DejaVu Sans Mono", monospace;
  --lim-sans: Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   1 · GLOBAL CANVAS — wallpaper, fluorescent lamp, vignette, grain
   Three fixed, click-through overlays stack the "lighting":
     html::before  = the lamp (bright top wash + scanlines)   [lightens]
     body::before  = the vignette (dark edges)                [darkens]
     body::after   = grain / film noise                       [texture]
   All three flicker; all three are killed under prefers-reduced-motion.
   -------------------------------------------------------------------------- */
html { background: var(--lim-shadow-2); }

body {
  margin: 0 !important;
  min-height: 100vh;
  color: var(--lim-ink) !important;
  font-family: var(--lim-sans) !important;
  line-height: 1.5;
  background-color: var(--lim-wall) !important;
  background-image:
    /* baked-in soft pool of light from the ceiling */
    radial-gradient(120% 75% at 50% -8%, rgba(255,250,224,.34), rgba(0,0,0,0) 58%),
    /* faint vertical wallpaper seams */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.045) 0 1px, rgba(255,255,255,.025) 1px 2px,
      rgba(0,0,0,0) 2px 40px),
    /* wall fades toward the floor */
    linear-gradient(180deg, var(--lim-wall) 0%, var(--lim-wall-dk) 100%) !important;
  background-attachment: fixed !important;
}

/* the lamp ------------------------------------------------------------- */
html::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9000;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(255,253,235,.30), rgba(255,253,235,0) 70%),
    /* scanlines — the hum made visible */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.025) 0 1px, rgba(0,0,0,.05) 1px 3px);
  mix-blend-mode: soft-light;
  animation: lim-lamp 6.7s linear infinite;
}

/* the vignette --------------------------------------------------------- */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9001;
  background:
    radial-gradient(135% 105% at 50% 38%,
      rgba(0,0,0,0) 34%, rgba(8,8,4,.30) 72%, rgba(6,6,3,.62) 100%);
  mix-blend-mode: multiply;
  animation: lim-vig 6.7s linear infinite;
}

/* the grain ------------------------------------------------------------ */
body::after {
  content: "";
  position: fixed; inset: -40px;            /* overscan so the shimmer never shows an edge */
  pointer-events: none;
  z-index: 9002;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: lim-grain 1.1s steps(6) infinite;
}

/* --------------------------------------------------------------------------
   2 · KEYFRAMES — irregular, faulty-ballast flicker (no smooth sines)
   -------------------------------------------------------------------------- */
@keyframes lim-lamp {
  0%, 7%   { opacity: .95; }
  7.4%     { opacity: .55; }   /* dip   */
  7.8%     { opacity: .97; }
  39%      { opacity: .90; }
  39.4%    { opacity: .62; }   /* dip   */
  39.7%    { opacity: .92; }
  40%      { opacity: .70; }   /* stutter */
  40.3%    { opacity: .96; }
  71%      { opacity: .93; }
  71.5%    { opacity: .50; }   /* dip   */
  72%      { opacity: .95; }
  100%     { opacity: .95; }
}
@keyframes lim-vig {           /* deepens exactly when the lamp drops */
  0%, 7%   { opacity: .85; }
  7.4%     { opacity: 1;   }
  7.8%     { opacity: .85; }
  39.4%    { opacity: 1;   }
  40%      { opacity: .98; }
  71.5%    { opacity: 1;   }
  100%     { opacity: .85; }
}
@keyframes lim-grain {
  0%   { transform: translate( 0,    0   ); }
  20%  { transform: translate(-3%,  -2%  ); }
  40%  { transform: translate( 2%,  -4%  ); }
  60%  { transform: translate(-2%,   3%  ); }
  80%  { transform: translate( 4%,   1%  ); }
  100% { transform: translate( 0,    0   ); }
}
@keyframes lim-glitch {        /* occasional sub-pixel jitter on headings */
  0%, 92%, 100% { transform: translate(0,0) skewX(0); }
  93%  { transform: translate(-1px, 1px) skewX(-2.5deg); }
  94%  { transform: translate( 1px,-1px) skewX( 1.5deg); }
  95%  { transform: translate(-1px, 0  ) skewX(-1deg);   }
  96%  { transform: translate( 0,   0  ) skewX(0);        }
}
@keyframes lim-chroma {        /* RGB desync, mostly aligned, briefly split */
  0%, 88%, 100% { text-shadow: 0 0 0 transparent; }
  89%  { text-shadow:  1.6px 0 var(--lim-teal), -1.6px 0 var(--lim-red); }
  91%  { text-shadow: -1.2px 0 var(--lim-teal),  1.2px 0 var(--lim-red); }
  93%  { text-shadow:  0.6px 0 var(--lim-teal), -0.6px 0 var(--lim-red); }
  94%  { text-shadow: 0 0 0 transparent; }
}
@keyframes lim-sign {          /* a sign that can't decide if it's on */
  0%, 100% { opacity: .82; }
  3%   { opacity: .35; }
  4%   { opacity: .85; }
  47%  { opacity: .82; }
  48%  { opacity: .28; }
  49%  { opacity: .80; }
  49.4%{ opacity: .5;  }
  50%  { opacity: .85; }
}
@keyframes lim-hum {           /* slow horizontal crawl = audible-looking hum */
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes lim-flick-text {    /* a flickering room number, etc. */
  0%, 100% { opacity: 1; }
  6%  { opacity: .25; }
  7%  { opacity: 1;   }
  52% { opacity: .35; }
  53% { opacity: 1;   }
  53.5%{ opacity: .6; }
  54% { opacity: 1;   }
}

/* --------------------------------------------------------------------------
   3 · CONTENT CONTAINER — the "room" you stand in
   -------------------------------------------------------------------------- */
main {
  background: transparent !important;
  padding: 26px 16px 60px !important;
}
.profile {
  position: relative;
  max-width: 940px;
  margin: 0 auto !important;
  padding: 26px !important;
  background:
    linear-gradient(180deg, rgba(243,239,218,.05), rgba(11,10,6,.10)),
    var(--lim-wall) !important;
  border: 1px solid rgba(20,19,12,.45) !important;
  box-shadow:
    inset 0 0 140px rgba(0,0,0,.34),
    0 24px 60px rgba(0,0,0,.45) !important;
}
/* baseboard along the bottom of the room */
.profile::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(20,19,12,.5));
  border-top: 1px solid rgba(20,19,12,.4);
  pointer-events: none;
}

/* generic SpaceHey modules / tables sit recessed in the wall */
.profile table,
.profile .module,
.profile .blurbs td,
.profile .info,
.profile .details {
  background: rgba(20,19,12,.10) !important;
  border: 1px solid rgba(20,19,12,.30) !important;
  color: var(--lim-ink) !important;
}
.profile td { border-color: rgba(20,19,12,.22) !important; }

/* every section heading becomes a printed institutional label */
.profile h1, .profile h2, .profile h3, .profile h4, .profile h5,
.profile .heading, .profile .section-title {
  font-family: var(--lim-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: .22em !important;
  font-weight: 700 !important;
  color: var(--lim-fluor-dim) !important;
  background: var(--lim-shadow) !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(0,0,0,.6) !important;
  margin: 0 0 8px !important;
}

/* --------------------------------------------------------------------------
   4 · NAV — building directory bar
   -------------------------------------------------------------------------- */
nav, .navbar, header.top, .topbar {
  background: var(--lim-shadow) !important;
  color: var(--lim-fluor-dim) !important;
  font-family: var(--lim-mono) !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(0,0,0,.65) !important;
  box-shadow: 0 2px 18px rgba(0,0,0,.5) !important;
}
nav a, .navbar a, .topbar a { color: var(--lim-teal) !important; text-decoration: none !important; }
nav a:hover, .navbar a:hover { color: var(--lim-exit) !important; }
.navbar .brand, nav .logo {
  color: var(--lim-exit) !important;
  animation: lim-sign 7s linear infinite;
}

/* --------------------------------------------------------------------------
   5 · IDENTITY — display name, profile pic (CCTV still), occupancy light
   -------------------------------------------------------------------------- */
.general-about { position: relative; }

/* the display name desyncs into RGB now and then */
.general-about .username,
.profile h1.username,
.profile .display-name {
  font-family: var(--lim-mono) !important;
  font-size: clamp(1.4rem, 4vw, 2.1rem) !important;
  letter-spacing: .14em !important;
  color: var(--lim-fluor) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  animation: lim-chroma 7.5s linear infinite, lim-glitch 9s linear infinite;
}

.general-about .profile-pic img {
  display: block;
  width: 100%;
  max-width: 230px;
  filter: grayscale(.55) sepia(.22) contrast(1.06) brightness(.94) !important;
  border: 1px solid var(--lim-shadow) !important;
  box-shadow:
    0 0 0 4px rgba(0,0,0,.28),
    inset 0 0 44px rgba(0,0,0,.5) !important;
  /* clipped corner = a still pulled off an old recorder */
  clip-path: polygon(0 0, 100% 0, 100% 90%, 95% 100%, 0 100%);
  transition: filter .18s linear, transform .18s linear;
}
/* the "distortion on hover" */
.general-about .profile-pic img:hover {
  filter: grayscale(.3) sepia(.1) contrast(1.25) brightness(1.02) !important;
  transform: skewX(-.7deg) scale(1.012);
  animation: lim-glitch .5s steps(3) 1;
}
/* faint scanline veil over the photo */
.general-about .profile-pic { position: relative; display: inline-block; }
.general-about .profile-pic::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,.18) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode: multiply;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 95% 100%, 0 100%);
}

/* occupancy light */
.online, .status.online {
  display: inline-block !important;
  font-family: var(--lim-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: .2em !important;
  font-size: 11px !important;
  color: var(--lim-exit) !important;
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(0,0,0,.5) !important;
  padding: 2px 8px !important;
  animation: lim-sign 4.3s linear infinite;
}
.online::before { content: "● "; }
/* if the page marks someone offline, read it as a dead bulb */
.offline, .status.offline {
  color: var(--lim-ink-soft) !important;
  font-family: var(--lim-mono) !important;
  letter-spacing: .2em !important;
}
.offline::before { content: "○ "; }

/* --------------------------------------------------------------------------
   6 · BLURBS — About Me / Who I'd Like To Meet, plus the pasted bio markup
   -------------------------------------------------------------------------- */
.blurbs .blurbContent,
.blurbs .content,
.profile .blurbs td {
  background: rgba(20,19,12,.12) !important;
  border: 1px solid rgba(20,19,12,.30) !important;
  padding: 14px 16px !important;
  /* slightly-off rectangle = irregular panel edge */
  clip-path: polygon(0 1.4%, 100% 0, 99.4% 100%, .6% 98.6%);
}

/* ---- styling for the markup you paste into the About Me field ---- */
.lim-bio { font-family: var(--lim-sans); color: var(--lim-ink); }
.lim-sign {
  display: inline-block;
  background: #2f3a2a; color: var(--lim-exit);
  font-family: var(--lim-mono); font-weight: 700;
  letter-spacing: .38em; padding: 4px 14px;
  border: 1px solid #1c241a;
  box-shadow: 0 0 16px rgba(150,170,140,.28), inset 0 0 8px rgba(0,0,0,.55);
  text-shadow: 0 0 7px rgba(170,190,150,.55);
  animation: lim-sign 6s linear infinite;
}
.lim-notice {
  margin-top: 12px; padding: 16px 18px;
  background: linear-gradient(180deg, rgba(20,19,12,.16), rgba(20,19,12,.34));
  border: 1px solid rgba(20,19,12,.42);
  clip-path: polygon(0 1.6%, 100% 0, 99.3% 100%, .5% 98.4%);
}
.lim-tag {
  display: inline-block;
  font-family: var(--lim-mono); font-size: 10px;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--lim-teal-dk); margin-bottom: 6px;
}
.lim-room {
  font-family: var(--lim-mono); margin: 4px 0 12px;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing: .12em; color: var(--lim-fluor);
}
.lim-flick { animation: lim-flick-text 3.4s linear infinite; }
.lim-line { margin: 6px 0; color: var(--lim-ink); }
.lim-dim  { color: var(--lim-ink-soft); }
.lim-meta {
  margin-top: 14px; font-family: var(--lim-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lim-teal-dk);
}

/* --------------------------------------------------------------------------
   7 · TOP FRIENDS — the signature: a grid of identical doorways.
   CSS Grid for layout · :has() for filled-vs-empty AND spotlight isolation.
   -------------------------------------------------------------------------- */
.friends .people,
.friends .friend-list,
.profile .friends ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 4px !important;
  margin: 0 !important;
}

.friends .person, .friends li {
  position: relative;
  padding: 6px !important;
  background: var(--lim-floor) !important;
  border: 1px solid rgba(0,0,0,.5) !important;
  filter: grayscale(.42) brightness(.9);
  /* a doorway is never quite square here */
  clip-path: polygon(0 0, 100% 1.5%, 99% 100%, 1% 98.5%);
  transition: opacity .25s linear, filter .25s linear, transform .25s linear;
}
.friends .person img, .friends li img {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: contrast(1.05) sepia(.2);
}
.friends .person p, .friends li .name {
  margin: 6px 0 0 !important;
  font-family: var(--lim-mono) !important;
  font-size: 10px !important;
  line-height: 1.3;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  text-align: center;
  color: var(--lim-fluor-dim) !important;
}

/* :HAS() — an empty slot is a room with the lights off and no feed */
.friends .person:not(:has(img)),
.friends li:not(:has(img)) {
  display: flex; align-items: center; justify-content: center;
  min-height: 96px;
  background:
    radial-gradient(120% 90% at 50% 125%, rgba(0,0,0,.9), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, var(--lim-floor), var(--lim-floor-dk)) !important;
}
.friends .person:not(:has(img)) p,
.friends li:not(:has(img)) .name { display: none !important; }
.friends .person:not(:has(img))::after,
.friends li:not(:has(img))::after {
  content: "NO SIGNAL";
  font-family: var(--lim-mono); font-size: 9px;
  letter-spacing: .22em; color: var(--lim-exit);
  animation: lim-sign 5.1s linear infinite;
}

/* :HAS() — hovering one figure leaves it lit and sends the rest into the dark */
.friends .people:has(.person:hover) .person:not(:hover),
.friends .friend-list:has(.person:hover) .person:not(:hover) {
  opacity: .32;
  filter: grayscale(.85) brightness(.55);
}
.friends .person:hover {
  filter: grayscale(.15) brightness(1.06);
  transform: translateY(-2px);
  z-index: 2;
}

.count {
  font-family: var(--lim-mono) !important;
  color: var(--lim-teal-dk) !important;
  letter-spacing: .12em !important;
}

/* --------------------------------------------------------------------------
   8 · COMMENTS / TESTIMONIALS — the visitor log at an empty front desk
   -------------------------------------------------------------------------- */
.comments .comment, .comments li, .testimonials .comment {
  background: rgba(0,0,0,.14) !important;
  border: 0 !important;
  border-left: 2px solid var(--lim-teal-dk) !important;
  padding: 10px 12px !important;
  margin: 0 0 8px !important;
  font-family: var(--lim-mono) !important;
  font-size: 12px !important;
  color: var(--lim-fluor-dim) !important;
}
.comments .comment img, .comments li img {
  width: 38px !important; height: 38px !important;
  object-fit: cover;
  filter: grayscale(.6) contrast(1.05) brightness(.9) !important;
  border: 1px solid rgba(0,0,0,.5) !important;
}
.comments .comment a, .comments .comment .username { color: var(--lim-teal) !important; }
.comments .date, .comments time {
  color: var(--lim-teal-dk) !important;
  letter-spacing: .14em !important;
  font-size: 10px !important;
}

/* --------------------------------------------------------------------------
   9 · MUSIC / PLAYER — the hum, made into a status strip
   -------------------------------------------------------------------------- */
.music, .player, .music-player, .song-bar {
  background:
    linear-gradient(90deg,
      var(--lim-shadow) 0%, #1d2018 25%, var(--lim-shadow) 50%,
      #1d2018 75%, var(--lim-shadow) 100%) !important;
  background-size: 200% 100% !important;
  color: var(--lim-teal) !important;
  font-family: var(--lim-mono) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(0,0,0,.6) !important;
  padding: 8px 12px !important;
  animation: lim-hum 9s linear infinite;
}
.music a, .player a, .song a { color: var(--lim-exit) !important; }

/* --------------------------------------------------------------------------
   10 · LINKS — exit-sign green, desync on hover
   -------------------------------------------------------------------------- */
.profile a {
  color: var(--lim-teal) !important;
  text-decoration: none !important;
  border-bottom: 1px dotted rgba(159,176,164,.35);
}
.profile a:hover {
  color: var(--lim-exit) !important;
  text-shadow: 1.4px 0 var(--lim-red), -1.4px 0 var(--lim-teal);
  animation: lim-glitch .45s steps(3) 1;
}

/* --------------------------------------------------------------------------
   11 · ACCESSIBILITY — kill every flicker for prefers-reduced-motion,
        leaving a still, dim, intact version of the room.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html::before { opacity: .9; }
  body::before { opacity: .88; }
  body::after  { opacity: .05; }
  .general-about .username, .profile .display-name { text-shadow: none !important; }
  .online, .lim-sign, .lim-flick,
  .friends .person:not(:has(img))::after { opacity: .85 !important; }
}

/* ==========================================================================
   ║  END OF THEME — nothing below this line in the editor.                  ║
   ========================================================================== */
</style></style>