A candle-lit study: old-style serif, brass details, double rules and warm leather tones.
Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.
See the CSS
/* Dark Academia */
html, body { overflow-x: clip; }
body.zbr-page { font-size: 18px; background: radial-gradient(ellipse at center, #2a2118 0, #14100c 100%) fixed; }
/* candle glow in the corner */
body.zbr-page::before {
content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(circle at 12% 95%, rgba(255, 170, 60, .2), transparent 42%);
animation: candle 5s ease-in-out infinite alternate;
}
.zbr-card { backdrop-filter: none; border-radius: 2px; border: 4px double rgba(212, 168, 95, .45); box-shadow: 0 14px 36px rgba(0, 0, 0, .55); }
.zbr-box-title {
font-size: 1.05rem; font-weight: 400; font-variant: small-caps; letter-spacing: .16em; text-align: center; color: var(--accent);
}
.zbr-box-title::before { content: '❦ '; }
.zbr-box-title::after { content: ' ❦'; }
.zbr-avatar { border: 4px double var(--accent); border-radius: 50%; filter: sepia(.45) contrast(1.05); }
.zbr-name { font-size: 2.2rem; font-weight: 400; font-style: italic; color: #f3e6c8; line-height: 1.05; overflow-wrap: anywhere; }
.zbr-text { text-align: justify; hyphens: auto; line-height: 1.7; }
.zbr-link { background: none; border: 0; border-radius: 0; padding: 8px 0; font-weight: 400; }
.zbr-link::before { content: '§ '; color: var(--accent); }
.zbr-link:hover { background: none; color: var(--accent); transform: none; text-decoration: underline dotted; text-underline-offset: 4px; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: rgba(212, 168, 95, .22); }
.zbr-table th { font-style: italic; opacity: .85; font-weight: 400; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 50%; filter: sepia(.45); }
.zbr-noavatar { background: #5a3a1c; color: #f3e6c8; }
.zbr-online { color: #b8c97a; }
.zbr-btn { background: var(--accent); color: #1b1612; border-radius: 2px; font-weight: 400; letter-spacing: .06em; }
.zbr-views { font-style: italic; opacity: .6; }
@keyframes candle { to { opacity: .65; } }
