Gray, quiet and moody: rain streaking down the window and a low mist at the bottom.
Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.
See the CSS
/* Rainy Day */
html, body { overflow-x: clip; }
body.zbr-page { background-attachment: fixed; }
/* rain: tilted layers of streaks falling at different speeds */
body.zbr-page::before {
content: ''; position: fixed; inset: -30%; z-index: -2; pointer-events: none; transform: rotate(10deg);
background:
radial-gradient(ellipse 1px 24px at 20px 30px, rgba(200, 220, 240, .5), transparent) 0 0 / 61px 97px,
radial-gradient(ellipse 1px 30px at 40px 70px, rgba(200, 220, 240, .4), transparent) 0 0 / 83px 131px,
radial-gradient(ellipse 1px 18px at 10px 40px, rgba(200, 220, 240, .35), transparent) 0 0 / 47px 71px,
radial-gradient(ellipse 1px 28px at 55px 90px, rgba(200, 220, 240, .3), transparent) 0 0 / 109px 151px;
animation: rain .8s linear infinite;
}
/* low mist */
html::before {
content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 45vh; z-index: -1; pointer-events: none;
background: linear-gradient(0deg, rgba(160, 175, 190, .2), transparent);
}
.zbr-card { border-radius: 10px; backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.zbr-box-title { font-size: 1rem; font-weight: 400; letter-spacing: .06em; color: var(--accent); }
.zbr-avatar { border: 0; border-radius: 50%; filter: grayscale(.7) contrast(1.05); }
.zbr-name { font-size: 1.9rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.1; overflow-wrap: anywhere; }
.zbr-bio { opacity: .75; }
.zbr-link { background: none; border: 0; border-radius: 0; padding: 10px 0; font-weight: 400; }
.zbr-link:hover { background: none; color: var(--accent); transform: none; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: rgba(223, 229, 234, .12); }
.zbr-table th { font-weight: 400; opacity: .6; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 50%; filter: grayscale(.7); }
.zbr-noavatar { background: #3d4a58; color: #dfe5ea; }
.zbr-online { color: #a7d8a0; font-weight: 500; }
.zbr-btn { background: var(--accent); color: #12181f; font-weight: 600; }
.zbr-views { opacity: .6; }
@keyframes rain { to { background-position: 0 97px, 0 131px, 0 71px, 0 151px; } }
