Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.
See the CSS
/* Aura v3 */
@property --aura-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
:root { --accent: #fff; --text: #f2f2f2; --card: #0a0a0a; }
html, body { overflow-x: clip; }
body.zbr-page { background: #000; }
/* grid that fades out toward the edges */
body.zbr-page::before {
content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 56px 56px,
linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 56px 56px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 75%);
animation: aura-grid 30s linear infinite;
}
/* slow drifting glow */
body.zbr-page::after {
content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
background:
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .16), transparent 30%),
radial-gradient(circle at 68% 70%, rgba(255, 255, 255, .09), transparent 34%);
filter: blur(60px);
animation: aura-drift 22s ease-in-out infinite alternate;
}
/* ---- blocks: dark panels with a light that travels around the border ---- */
.zbr-space { gap: 18px; }
.zbr-col { gap: 18px; }
body.zbr-page .zbr-card {
position: relative; padding: 24px 22px;
border: 1px solid transparent; border-radius: 24px;
background:
radial-gradient(ellipse 80% 45% at 50% 0, rgba(255, 255, 255, .08), transparent 70%) padding-box,
linear-gradient(180deg, #111, #050505) padding-box,
conic-gradient(from var(--aura-a),
rgba(255, 255, 255, .08) 0deg, rgba(255, 255, 255, .5) 40deg,
rgba(255, 255, 255, .08) 90deg, rgba(255, 255, 255, .08) 360deg) border-box;
backdrop-filter: none;
box-shadow: 0 30px 70px rgba(0, 0, 0, .85);
transition: box-shadow .4s;
}
/* the profile (and the classic single card) always glow; other blocks light up on hover */
body.zbr-page .zbr-box-profile, body.cols-1 main.zbr-card {
background:
radial-gradient(ellipse 80% 45% at 50% 0, rgba(255, 255, 255, .12), transparent 70%) padding-box,
linear-gradient(180deg, #131313, #050505) padding-box,
conic-gradient(from var(--aura-a),
rgba(255, 255, 255, .1) 0deg, rgba(255, 255, 255, .9) 40deg,
rgba(255, 255, 255, .1) 90deg, rgba(255, 255, 255, .1) 360deg) border-box;
box-shadow: 0 40px 90px rgba(0, 0, 0, .9), 0 0 90px rgba(255, 255, 255, .06);
}
.zbr-card { animation: aura-spin 7s linear infinite, aura-in 1s cubic-bezier(.2, .7, .2, 1) backwards; animation-play-state: paused, running; }
.zbr-box-profile, .cols-1 main.zbr-card, .zbr-card:hover { animation-play-state: running, running; }
.zbr-card:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, .85), 0 0 60px rgba(255, 255, 255, .07); }
.cols-1 main.zbr-card:not(.zbr-friends-all) { max-width: 420px; padding: 44px 28px 30px; }
/* entrance: blocks fade up one after another */
.zbr-col > :nth-child(1) { animation-delay: 0s, .05s; }
.zbr-col > :nth-child(2) { animation-delay: 0s, .15s; }
.zbr-col > :nth-child(3) { animation-delay: 0s, .25s; }
.zbr-col > :nth-child(4) { animation-delay: 0s, .35s; }
.zbr-col > :nth-child(5) { animation-delay: 0s, .45s; }
.zbr-col > :nth-child(n+6) { animation-delay: 0s, .55s; }
.zbr-box-title {
font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
opacity: .45; margin-bottom: 14px;
}
/* ---- profile ---- */
.zbr-box-profile .zbr-box-body { gap: 12px; padding: 12px 0 4px; }
body.zbr-page .zbr-avatar {
width: 128px; height: 128px; max-width: none; border-radius: 50%; margin-bottom: 6px;
border: 2px solid rgba(255, 255, 255, .85);
outline: 1px solid rgba(255, 255, 255, .22); outline-offset: 7px;
filter: grayscale(1) contrast(1.1);
animation: aura-breathe 4.5s ease-in-out infinite;
}
/* name: silver text with a light passing through */
.zbr-name {
font-size: 2rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15;
color: transparent;
background: linear-gradient(100deg, #9a9a9a 35%, #fff 50%, #9a9a9a 65%) 100% 0 / 250% 100%;
-webkit-background-clip: text; background-clip: text;
animation: aura-shine 6s ease-in-out infinite;
}
.zbr-bio { font-size: .95rem; opacity: .55; }
/* ---- links: quiet rows that flip to white ---- */
.zbr-links { gap: 4px; }
body.zbr-page .zbr-link {
padding: 12px 14px; border: 0; border-radius: 12px; background: none;
color: #d4d4d4; font-weight: 600; letter-spacing: .02em;
transition: transform .2s, background .25s, color .25s, box-shadow .25s;
}
body.zbr-page .zbr-link:hover {
background: #fff; color: #000;
transform: translateX(3px);
box-shadow: 0 10px 34px rgba(255, 255, 255, .18);
}
.cols-1 .zbr-links { gap: 10px; margin-top: 14px; }
body.cols-1 .zbr-link { padding: 14px 18px; background: rgba(255, 255, 255, .04); }
/* ---- details, tables, text ---- */
.zbr-online { color: #fff; font-weight: 600; letter-spacing: .04em; }
.zbr-online::before { animation: aura-dot 2.4s ease-in-out infinite; }
.zbr-mood { opacity: .8; }
.zbr-table th { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .4; padding-top: 10px; }
.zbr-table td { color: #e5e5e5; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-posts .zbr-link { border-color: rgba(255, 255, 255, .07); }
.zbr-text { color: #d4d4d4; line-height: 1.75; }
.zbr-html a, .zbr-friends-count a, .zbr-wall-login a, .zbr-comment-meta a { color: #fff; }
/* ---- friends: monochrome until you point at them ---- */
.zbr-friends { gap: 16px 12px; }
.zbr-friend img, .zbr-friend .zbr-noavatar {
border-radius: 16px; filter: grayscale(1) brightness(.85);
transition: filter .3s, transform .3s, box-shadow .3s;
}
.zbr-friend:hover img, .zbr-friend:hover .zbr-noavatar {
filter: none; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(255, 255, 255, .12);
}
.zbr-friend b { font-weight: 600; opacity: .7; }
.zbr-friend:hover b { opacity: 1; text-decoration: none; }
.zbr-noavatar { background: linear-gradient(160deg, #2a2a2a, #0d0d0d); color: #bbb; font-weight: 300; }
/* ---- wall ---- */
.zbr-wall-form { border-color: rgba(255, 255, 255, .15); }
.zbr-wall-form:focus-within { border-color: #fff; }
.zbr-send { color: #fff; }
.zbr-send:hover { background: #fff; color: #000; }
.zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 50%; filter: grayscale(1); }
.zbr-comment-meta a { font-weight: 700; }
.zbr-comment-body { color: #d4d4d4; }
/* ---- photos, playlist ---- */
.zbr-gallery { gap: 6px; }
.zbr-gallery a { border-radius: 12px; }
.zbr-gallery img { filter: grayscale(1); transition: filter .35s, transform .35s; }
.zbr-gallery a:hover img { filter: none; transform: scale(1.04); opacity: 1; }
.zbr-track-title { opacity: .8; }
.zbr-embed { border-radius: 14px; }
/* ---- buttons ---- */
.zbr-btn { background: #fff; color: #000; font-weight: 700; box-shadow: 0 8px 26px rgba(255, 255, 255, .15); }
.zbr-btn:hover { filter: none; box-shadow: 0 10px 34px rgba(255, 255, 255, .28); }
.zbr-btn-ghost, .zbr-btn-on { background: none; color: #f2f2f2; box-shadow: none; }
.zbr-views {
font-size: .68rem; opacity: .35; letter-spacing: .2em; text-transform: uppercase;
}
.cols-1 .zbr-views { margin-top: 14px; }
@keyframes aura-spin { to { --aura-a: 360deg; } }
@keyframes aura-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes aura-breathe {
0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
50% { box-shadow: 0 0 44px rgba(255, 255, 255, .3); }
}
@keyframes aura-shine { 0%, 35% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes aura-dot { 50% { box-shadow: 0 0 10px #fff; } }
@keyframes aura-drift {
from { transform: translate(-4%, -3%) rotate(0deg); }
to { transform: translate(4%, 3%) rotate(14deg); }
}
@keyframes aura-grid { to { background-position: 0 56px, 0 56px; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
