Gothic nave at night: blackletter titles, pointed-arch portrait and a deep red glow from the rose window.
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=UnifrakturCook:wght@700&display=block');
/* Cathedral */
body.zbr-page {
font-size: 18px;
background: radial-gradient(ellipse 80% 50% at 50% 0, rgba(127, 29, 29, .55), transparent 70%), #0c0809 fixed;
}
.zbr-card {
backdrop-filter: none; border-radius: 2px; border: 1px solid rgba(224, 88, 79, .3);
outline: 1px solid rgba(224, 88, 79, .16); outline-offset: -8px;
box-shadow: 0 0 60px rgba(150, 30, 30, .22), 0 16px 40px rgba(0, 0, 0, .6);
}
/* the portrait box is a pointed window */
.zbr-box-profile, .cols-1 .zbr-card { border-radius: 170px 170px 2px 2px; padding-top: 48px; }
.zbr-box-profile::before, .cols-1 .zbr-card::before {
content: '✠'; display: block; text-align: center; margin-bottom: 10px; font-size: 1.6rem; color: var(--accent);
}
.zbr-box-title, .zbr-name { font-family: 'UnifrakturCook', serif; font-weight: 700; color: #f1e4d0; }
.zbr-box-title { font-size: 1.7rem; line-height: 1.1; }
.zbr-name { font-size: 2.6rem; line-height: 1; overflow-wrap: anywhere; }
.zbr-avatar { border: 1px solid var(--accent); border-radius: 999px 999px 4px 4px; filter: grayscale(.5) contrast(1.05); }
.zbr-bio { font-style: italic; }
.zbr-link { background: none; border: 0; border-radius: 0; padding: 8px 0; font-weight: 500; letter-spacing: .03em; }
.zbr-link::before { content: '† '; color: var(--accent); opacity: .7; }
.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(224, 88, 79, .2); }
.zbr-table th { font-style: italic; opacity: .8; font-weight: 500; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 999px 999px 3px 3px; filter: grayscale(.5); }
.zbr-noavatar { background: #5b1414; color: #f1e4d0; }
.zbr-online { color: #d9a441; }
.zbr-btn { background: #8b1a1a; color: #f6e9d6; border-radius: 2px; letter-spacing: .08em; }
.zbr-views { opacity: .55; font-style: italic; }
