Haunted Mansion

A foggy Halloween night: full moon, floating ghost and flickering pumpkin-orange titles.

0 uses · 0 likes

Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.

See the CSS

@import url('https://fonts.googleapis.com/css2?family=Creepster&display=block');
/* Haunted Mansion */
html, body { overflow-x: clip; }
body.zbr-page { background: radial-gradient(ellipse at 50% 0, #2a1245 0, #120a1f 60%) fixed; }
/* drifting fog */
body.zbr-page::before {
  content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 14% at 20% 85%, rgba(190, 160, 255, .2), transparent),
    radial-gradient(ellipse 50% 16% at 75% 70%, rgba(190, 160, 255, .14), transparent),
    radial-gradient(ellipse 35% 12% at 50% 95%, rgba(255, 255, 255, .12), transparent);
  filter: blur(24px); animation: fog 24s ease-in-out infinite alternate;
}
/* full moon */
html::before {
  content: ''; position: fixed; top: 28px; right: 8vw; width: 150px; height: 150px; z-index: -2; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fffbe6 0 30%, #f3e3a8 60%, #d9c27a);
  box-shadow: 0 0 70px 20px rgba(255, 233, 160, .35);
}
.zbr-card {
  position: relative; backdrop-filter: none; border-radius: 6px;
  border: 1px solid rgba(255, 138, 31, .35);
  box-shadow: 0 0 30px rgba(255, 138, 31, .12), 0 14px 40px rgba(0, 0, 0, .5);
}
.zbr-box-profile::before, .cols-1 .zbr-card::before {
  content: '🕸️'; position: absolute; top: 6px; right: 12px; font-size: 1.7rem; opacity: .7;
}
.zbr-box-title, .zbr-name { font-family: 'Creepster', cursive; font-weight: 400; letter-spacing: .06em; color: #ff8a1f; }
.zbr-box-title { font-size: 1.7rem; line-height: 1.1; text-shadow: 0 0 12px rgba(255, 138, 31, .5); }
.zbr-name { font-size: 2.8rem; line-height: 1; animation: flicker 4s steps(1) infinite; }
.zbr-name::after { content: ' 👻'; display: inline-block; animation: floaty 3s ease-in-out infinite; }
.zbr-avatar { border: 3px solid #ff8a1f; box-shadow: 0 0 24px rgba(255, 138, 31, .5); }
.zbr-link { background: none; border: 0; border-radius: 0; padding: 8px 0; font-weight: 400; }
.zbr-link::before { content: '🦇 '; opacity: .5; }
.zbr-link:hover { background: none; color: #ff8a1f; transform: none; text-shadow: 0 0 10px rgba(255, 138, 31, .7); }
.zbr-link:hover::before { opacity: 1; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: rgba(255, 138, 31, .2); border-top-style: dashed; }
.zbr-table th { color: #c9a8ff; opacity: 1; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border: 2px solid rgba(255, 138, 31, .6); }
.zbr-noavatar { background: #4c1d95; }
.zbr-online { color: #9be564; }
.zbr-btn { background: #ff8a1f; color: #1a0a00; font-weight: 700; }
.zbr-views { color: #c9a8ff; opacity: .8; }
@keyframes fog { to { transform: translateX(10%); } }
@keyframes floaty { 50% { transform: translateY(-8px) rotate(6deg); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 91% { opacity: .55; } 93% { opacity: 1; } 96% { opacity: .7; } }