A sci-fi control panel: HUD corner brackets, a scanning sweep and a planet on the horizon.
Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.
See the CSS
/* Space Station */
html, body { overflow-x: clip; }
body.zbr-page { background: #050a14; font-size: 17px; }
/* stars */
body.zbr-page::before {
content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none;
background-image:
radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 38% 62%, #cfeaff, transparent),
radial-gradient(1px 1px at 61% 25%, #fff, transparent), radial-gradient(1px 1px at 83% 52%, #fff, transparent),
radial-gradient(1.5px 1.5px at 92% 12%, #cfeaff, transparent), radial-gradient(1px 1px at 25% 88%, #fff, transparent);
background-size: 340px 340px;
}
/* scanner sweep */
body.zbr-page::after {
content: ''; position: fixed; left: 0; right: 0; top: -140px; height: 140px; z-index: -1; pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(56, 225, 255, .07), transparent);
animation: sweep 7s linear infinite;
}
/* the planet */
html::before {
content: ''; position: fixed; left: -25vw; bottom: -62vw; width: 100vw; height: 100vw; z-index: -2; border-radius: 50%;
background: radial-gradient(circle at 60% 6%, #2b78b5, #0d3358 38%, #050a14 70%);
box-shadow: 0 -6px 60px rgba(90, 180, 255, .4);
}
.zbr-card {
backdrop-filter: none; border-radius: 0; border: 1px solid rgba(56, 225, 255, .2);
background:
linear-gradient(#38e1ff, #38e1ff) 0 0 / 16px 2px no-repeat, linear-gradient(#38e1ff, #38e1ff) 0 0 / 2px 16px no-repeat,
linear-gradient(#38e1ff, #38e1ff) 100% 0 / 16px 2px no-repeat, linear-gradient(#38e1ff, #38e1ff) 100% 0 / 2px 16px no-repeat,
linear-gradient(#38e1ff, #38e1ff) 0 100% / 16px 2px no-repeat, linear-gradient(#38e1ff, #38e1ff) 0 100% / 2px 16px no-repeat,
linear-gradient(#38e1ff, #38e1ff) 100% 100% / 16px 2px no-repeat, linear-gradient(#38e1ff, #38e1ff) 100% 100% / 2px 16px no-repeat,
var(--card);
box-shadow: 0 0 30px rgba(56, 225, 255, .1);
}
.zbr-box-profile::before, .cols-1 .zbr-card::before {
content: '● CREW ID 0042'; display: block; margin-bottom: 12px; font-size: .7rem; letter-spacing: .25em; color: #5dffb0; text-align: left;
}
.zbr-box-title { font-size: .75rem; font-weight: 400; text-transform: uppercase; letter-spacing: .25em; color: var(--accent); }
.zbr-box-title::before { content: 'SYS// '; opacity: .5; }
.zbr-avatar {
border: 1px solid var(--accent); border-radius: 0;
clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.zbr-name { font-size: 1.7rem; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; line-height: 1.1; overflow-wrap: anywhere; }
.zbr-link { background: none; border: 0; border-radius: 0; padding: 8px 0; font-weight: 400; text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; }
.zbr-link::before { content: '> '; color: var(--accent); }
.zbr-link:hover { background: none; color: #fff; transform: none; text-shadow: 0 0 10px var(--accent); }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-links .zbr-link, .zbr-posts .zbr-link { border-color: rgba(56, 225, 255, .14); }
.zbr-table th { color: var(--accent); opacity: .85; font-weight: 400; text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 0; border: 1px solid rgba(56, 225, 255, .5); }
.zbr-noavatar { background: #0c3a52; color: var(--accent); }
.zbr-online { color: #5dffb0; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.zbr-btn { background: var(--accent); color: #031018; border-radius: 0; text-transform: uppercase; letter-spacing: .1em; font-weight: 400; }
.zbr-views { color: var(--accent); opacity: .8; letter-spacing: .15em; text-transform: uppercase; }
@keyframes sweep { to { transform: translateY(calc(100vh + 280px)); } }
