Every block is a ticket stub: airline header, gate numbers, punched notches and a barcode.
Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.
See the CSS
/* Boarding Pass */
body.zbr-page {
background:
repeating-linear-gradient(115deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 38px),
radial-gradient(ellipse at 80% 0, #1d4e89 0, transparent 60%),
#0b1d3a fixed;
}
/* paper tickets with a punched notch on each side */
.zbr-card {
border-radius: 12px;
backdrop-filter: none;
box-shadow: none;
text-align: left;
-webkit-mask: radial-gradient(circle 11px at 0 50%, #0000 10px, #000 11px) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, #0000 10px, #000 11px) right / 51% 100% no-repeat;
mask: radial-gradient(circle 11px at 0 50%, #0000 10px, #000 11px) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, #0000 10px, #000 11px) right / 51% 100% no-repeat;
}
/* field labels, like on a real ticket */
.zbr-box-title { font-size: .65rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; opacity: .55; }
/* the passenger block: airline header strip + barcode */
.zbr-box-profile, .cols-1 .zbr-card { padding-top: 0; overflow: hidden; }
.zbr-box-profile::before, .cols-1 .zbr-card::before {
content: 'ZBR AIRLINES ✈ SEAT 1A'; display: block; margin: 0 -20px 20px; padding: 10px 20px;
background: var(--accent); color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: .22em;
}
.cols-1 .zbr-card::before { align-self: stretch; margin: 0 -24px 8px; }
.zbr-box-profile::after, .cols-1 .zbr-card::after {
content: ''; display: block; height: 40px; margin-top: 18px;
background: repeating-linear-gradient(90deg, #14213d 0 2px, transparent 2px 5px, #14213d 5px 6px, transparent 6px 10px, #14213d 10px 13px, transparent 13px 15px);
}
.zbr-box-profile .zbr-box-body { align-items: flex-start; text-align: left; }
.zbr-avatar { border: 2px solid #14213d; border-radius: 6px; filter: grayscale(.6) contrast(1.05); }
.zbr-name {
font-size: 2rem; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: -.03em; overflow-wrap: anywhere;
}
.zbr-name::before {
content: 'PASSENGER'; display: block; margin-bottom: 6px;
font-size: .6rem; font-weight: 400; letter-spacing: .3em; opacity: .55;
}
.zbr-bio { opacity: .85; font-size: .9rem; }
/* links: boarding gates */
.zbr-links { counter-reset: gate; }
.zbr-link {
counter-increment: gate; display: flex; align-items: center;
padding: 11px 0; border: 0; border-top: 1px dashed rgba(20, 33, 61, .35); border-radius: 0;
background: none; color: var(--text); font-size: .85rem; font-weight: 700; text-transform: uppercase;
}
.zbr-link::before { content: 'G' counter(gate, decimal-leading-zero); margin-right: 12px; font-size: .62rem; font-weight: 400; opacity: .55; }
.zbr-link::after { content: '→'; margin-left: auto; padding-left: 8px; transition: transform .15s; }
.zbr-link:hover { background: none; transform: none; color: var(--accent); }
.zbr-link:hover::after { transform: translateX(4px); }
.zbr-copy { width: 100%; text-align: left; }
.zbr-post-link::before, .zbr-post-link::after { content: none; }
.zbr-table th { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; }
.zbr-table th, .zbr-table td, .zbr-comment { border-top-style: dashed; border-color: rgba(20, 33, 61, .35); }
.zbr-text { font-size: .92rem; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 4px; filter: grayscale(.6); }
.zbr-noavatar { background: #14213d; }
.zbr-friend b { text-transform: uppercase; font-size: .7rem; }
.zbr-online { color: #2a7a3b; text-transform: uppercase; font-size: .8rem; letter-spacing: .1em; }
.zbr-btn { background: var(--accent); color: #fff; border-radius: 4px; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }
.zbr-views { color: #f6efe0; opacity: .6; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; }
