.navbar { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); } /* Gentle two-tone (mauve) page background */ html { min-height: 100%; background: linear-gradient(180deg, #f8f1fb 0%, #ffffff 55%, #f2e6f6 100%); } body { min-height: 100%; background: transparent; } /* Print view uses `bg-white` on the ; keep the mauve page background visible on screen. */ @media screen { body.bg-white { background: transparent !important; } } .card { box-shadow: 0 8px 24px rgba(34, 12, 49, 0.08); border-color: rgba(34, 12, 49, 0.12); background: rgba(255, 255, 255, 0.82); } /* Complementary accent alert for the CaROb SportsTrak callout */ .alert-mauve { background: rgba(102, 16, 242, 0.08); /* soft mauve/violet */ border-color: rgba(102, 16, 242, 0.18); color: #2a1634; font-size: calc(1rem + 2pt); } .alert-mauve img { max-width: 100%; height: auto; } .sheet { display: grid; grid-template-columns: repeat(var(--sheet-cols, 3), var(--label-w, 1fr)); column-gap: var(--gap-x, 4mm); row-gap: var(--gap-y, 4mm); padding: 0; width: fit-content; margin: 0 auto; transform: translate(var(--nudge-x, 0mm), var(--nudge-y, 0mm)); transform-origin: top left; } /* Ensure we don't overflow the physical page in preview */ .sheet { max-width: 100%; } .sticker { border: 1px dashed rgba(34, 12, 49, 0.18); border-radius: 2mm; background: rgba(255, 255, 255, 0.82); padding: var(--label-pad, 2mm); width: var(--label-w, auto); height: var(--label-h, 28mm); display: block; position: relative; overflow: hidden; } .sticker .lines { padding-right: calc(var(--code-w, 12mm) + 1.2mm); } /* L7162: nudge text block down/right */ body.fmt-l7162 .sticker .lines { padding-left: calc(var(--label-pad, 1mm) + 5mm); padding-top: 5mm; } .sticker .name { font-weight: 700; font-size: 10pt; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 84-up Code128: make name match other text sizing */ body.fmt-84up.bc-code128 .sticker .name { font-size: 7.6pt; font-weight: 700; line-height: 1.05; } .sticker .name.sname, .sticker .name.fname { text-overflow: clip; } .sticker .name.sname { margin-top: 0.3mm; } .sticker .row2, .sticker .age_line, .sticker .dob, .sticker .gender { font-size: 8pt; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticker .row2 .sep { margin: 0 0.8mm; } .sticker .age_inline { font-weight: 800; } .sticker .age_line { font-weight: 800; margin-top: 0.2mm; } .sticker .code_text { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 7.5pt; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.5mm; } .sticker .code { position: absolute; right: var(--code-right, var(--label-pad, 1mm)); top: 50%; transform: translateY(-50%); } .sticker .code img { width: var(--code-w, var(--code-size, 26mm)); height: var(--code-h, var(--code-size, 26mm)); object-fit: var(--code-fit, contain); image-rendering: pixelated; } /* 65-up DataMatrix: ensure first + surname fit on separate lines without ellipsis */ body.fmt-65up.bc-datamatrix .sticker .name, body.fmt-65up.bc-qr .sticker .name { font-size: 8.0pt; line-height: 1.02; white-space: nowrap; overflow: hidden; text-overflow: clip; } /* 65-up Code128: barcode bottom-center, reserve bottom space (not right space) */ body.fmt-65up.bc-code128 .sticker .lines { padding-right: 0; padding-bottom: calc(var(--code-h, 6mm) + 1.2mm); } body.fmt-65up.bc-code128 .sticker .code { top: auto; bottom: 0.15mm; right: var(--label-pad, 1mm); left: auto; transform: none; } /* 84-up Code128: bottom-right like PDF */ body.fmt-84up.bc-code128 .sticker .code { top: auto; bottom: 0.15mm; transform: none; } /* 84-up Code128: allow name to use full width (barcode is on bottom row) */ body.fmt-84up.bc-code128 .sticker .lines { padding-right: 0; padding-bottom: calc(var(--code-h, 6mm) + 0.8mm); } /* 30-up Code128: put barcode lower so name can use full top line */ body.fmt-30up.bc-code128 .sticker .lines { padding-right: 0; padding-bottom: calc(var(--code-h, 6mm) + 0.8mm); } /* 30-up QR/DM: nudge text block down/right by 3mm */ body.fmt-30up.bc-qr .sticker .lines, body.fmt-30up.bc-datamatrix .sticker .lines { padding-left: calc(var(--label-pad, 1mm) + 3mm); padding-top: 3mm; } body.fmt-30up.bc-code128 .sticker .code { top: auto; bottom: 2.15mm; transform: none; } /* Keep Code128 text in normal flow to avoid overlaps */ @media print { html, body { background: #fff !important; } .card { background: #fff !important; box-shadow: none !important; } .sticker { background: #fff !important; } .sheet { /* Prevent the grid from being split in awkward places by the browser. */ break-inside: avoid; page-break-inside: avoid; } .sticker { /* Never split a single label across pages. */ break-inside: avoid; page-break-inside: avoid; border: none; } }