Art deco luxury: matte black, fine gold frames, spaced capitals and diamond ornaments.
Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.
See the CSS
/* Black & Gold */
body.zbr-page { background: radial-gradient(ellipse at 50% 0, #1d1808, #07070a 62%) fixed; }
.zbr-card {
backdrop-filter: none; border-radius: 0; border: 1px solid rgba(212, 175, 55, .55);
outline: 1px solid rgba(212, 175, 55, .22); outline-offset: -8px;
box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}
.zbr-box-profile::before, .cols-1 .zbr-card::before {
content: '◆ ◆ ◆'; display: block; text-align: center; margin-bottom: 12px; font-size: .6rem; letter-spacing: .5em; color: var(--accent);
}
.zbr-box-title, .zbr-name {
text-transform: uppercase; font-weight: 400;
background: linear-gradient(180deg, #f6e3a1, #d4af37 55%, #9a7b1c);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.zbr-box-title { font-size: .85rem; letter-spacing: .28em; text-align: center; }
.zbr-box-title::before { content: '◆ '; font-size: .6em; }
.zbr-box-title::after { content: ' ◆'; font-size: .6em; }
.zbr-name { font-size: 1.8rem; letter-spacing: .12em; line-height: 1.15; overflow-wrap: anywhere; }
.zbr-avatar { border: 0; border-radius: 0; outline: 1px solid var(--accent); outline-offset: 5px; }
.zbr-bio { letter-spacing: .04em; }
.zbr-link { background: none; border: 0; border-radius: 0; padding: 10px 0; font-weight: 400; text-transform: uppercase; letter-spacing: .16em; font-size: .85rem; }
.zbr-link::after { content: ' ◆'; font-size: .6em; opacity: 0; transition: opacity .15s; color: var(--accent); }
.zbr-link:hover { background: none; color: var(--accent); transform: none; }
.zbr-link:hover::after { opacity: 1; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: rgba(212, 175, 55, .2); }
.zbr-table th { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--accent); opacity: .9; font-weight: 400; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 0; outline: 1px solid rgba(212, 175, 55, .5); }
.zbr-noavatar { background: #2a2208; color: var(--accent); }
.zbr-online { color: var(--accent); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; }
.zbr-btn { background: linear-gradient(180deg, #f1d77a, #b8941f); color: #111; border-radius: 0; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.zbr-views { color: var(--accent); opacity: .6; letter-spacing: .2em; text-transform: uppercase; font-size: .7rem; }
