/* ========================================================================== THE UNDERVAULTS — SHARED PRINT DIALECT (one stylesheet, every print piece) Companion Cut + Assessor's Field Card + demo sheet pack · Jaragua Games -------------------------------------------------------------------------- CANONICAL SOURCE: projects/jaraguagames-ops/productos/ undervaults-companion-play/fuente/print-dialect.css This is a deployed copy (only the @font-face URLs point at ../fonts/). Edit the canonical file first, then re-sync here — do not fork rules. -------------------------------------------------------------------------- Soul carriers that survive a home printer: TYPE + STRUCTURE + VOICE + STAMPS + RULES. One accent ink only: sealing-wax red. Everything alive is wax; nothing else is. B/W build: turns wax to black. ========================================================================== */ /* ---------- The four real faces (self-hosted woff2) ---------- */ @font-face { font-family:'Alfa Slab One'; src:url('../fonts/alfa-slab-one-400.woff2') format('woff2'); font-weight:400; font-style:normal; } @font-face { font-family:'Spectral'; src:url('../fonts/spectral-400.woff2') format('woff2'); font-weight:400; font-style:normal; } @font-face { font-family:'Spectral'; src:url('../fonts/spectral-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; } @font-face { font-family:'Spectral'; src:url('../fonts/spectral-600.woff2') format('woff2'); font-weight:600; font-style:normal; } @font-face { font-family:'IM Fell English'; src:url('../fonts/im-fell-english-400.woff2') format('woff2'); font-weight:400; font-style:normal; } @font-face { font-family:'IM Fell English'; src:url('../fonts/im-fell-english-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; } @font-face { font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight:400; font-style:normal; } @font-face { font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2'); font-weight:600; font-style:normal; } /* ---------- Inks ---------- */ :root { --ink: #262119; /* iron-gall */ --wax: #a5341f; /* sealing-wax red — THE one accent */ --soft: #6b6257; /* ink-soft gray, marginalia */ --rule-blue: rgba(143,168,158,.55); /* faint ledger ruling */ --hair: #262119; } body.bw { --wax:#000; --soft:#3d382f; --rule-blue: rgba(0,0,0,.28); } /* ---------- Page / print setup ---------- */ @page { size: letter; margin: 0; } html, body { background:#fff; color:var(--ink); margin:0; padding:0; } * { box-sizing:border-box; } body { font-family:'Spectral', Georgia, serif; font-size:9.6pt; line-height:1.42; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .page { width:8.5in; height:11in; padding:.42in .55in .38in; margin:0 auto; position:relative; display:flex; flex-direction:column; overflow:hidden; page-break-after:always; break-after:page; } .page:last-child { page-break-after:auto; break-after:auto; } @media screen { .page { border:1px solid #bbb; margin:16px auto; box-shadow:0 1px 6px rgba(0,0,0,.16); background:#fff; } } /* ---------- Document furniture ---------- */ .wordmark-row { font-family:'IBM Plex Mono', monospace; font-size:8pt; letter-spacing:.3em; text-transform:uppercase; border-bottom:2px solid var(--ink); padding-bottom:3px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:flex-end; } .wordmark-row .wm-r { letter-spacing:.1em; font-size:7.4pt; } .page-footer { margin-top:auto; border-top:1px solid var(--ink); padding-top:4px; font-family:'IBM Plex Mono', monospace; font-size:7pt; letter-spacing:.14em; text-transform:uppercase; display:flex; justify-content:space-between; gap:8px; } .no { color:var(--wax); } /* bureaucratic numerals: Nº, clause, FORM */ /* ---------- Headings: the three voices ---------- */ h2.sec-title { font-family:'Alfa Slab One', serif; font-weight:400; font-size:15pt; letter-spacing:.01em; margin:2px 0 1px; } .sec-sub { font-family:'IBM Plex Mono', monospace; font-size:7.6pt; letter-spacing:.16em; text-transform:uppercase; margin:0 0 7px; } h3.rule-head { font-family:'IBM Plex Mono', monospace; font-size:9pt; font-weight:600; letter-spacing:.16em; text-transform:uppercase; border-bottom:3px double var(--wax); padding-bottom:2px; margin:11px 0 5px; } h4.minor-head { font-family:'Spectral', serif; font-weight:600; font-size:10pt; margin:7px 0 2px; } p { margin:4px 0; } ul, ol { margin:4px 0 6px; padding-left:19px; } li { margin:2.5px 0; } b, strong { font-weight:600; } .flavor { font-family:'IM Fell English', serif; font-style:italic; font-size:10pt; } .guild-sign { font-family:'IM Fell English', serif; font-style:italic; text-align:right; } /* ---------- Display wordmark (cover / card masthead) ---------- */ .display-title { font-family:'Alfa Slab One', serif; font-weight:400; line-height:1.0; letter-spacing:.01em; color:var(--ink); } .display-title .wax-u { color:var(--wax); } body.bw .display-title .wax-u { color:#000; text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:4px; } .kicker { font-family:'IBM Plex Mono', monospace; font-size:8pt; letter-spacing:.3em; text-transform:uppercase; } .fell-sub { font-family:'IM Fell English', serif; font-style:italic; } /* ---------- Stamps: double-ruled, rotated, wax ---------- */ .stamp-badge { display:inline-block; border:3px double var(--wax); color:var(--wax); font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:9.5pt; letter-spacing:.24em; text-transform:uppercase; padding:5px 16px 4px; transform:rotate(-3deg); } .stamp-badge.sm { font-size:7pt; letter-spacing:.2em; padding:3px 9px 2px; border-width:3px; transform:rotate(-2deg); } .corner-stamp { position:absolute; top:.62in; right:.55in; transform:rotate(4deg); } /* Circular guild seal (SVG uses currentColor) */ .guild-seal { color:var(--wax); transform:rotate(6deg); } /* ---------- Ink rules ---------- */ .dbl-rule { border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); height:4px; } .dbl-rule.wax { border-color:var(--wax); } .reg-frame { position:absolute; inset:10px; border:1px dashed var(--ink); pointer-events:none; } /* ---------- Marginalia: the Guild's aside voice ---------- */ .aside { position:absolute; width:1.02in; right:.28in; font-family:'IM Fell English', serif; font-style:italic; font-size:7.8pt; line-height:1.32; color:var(--soft); transform:rotate(-1.2deg); } .aside::before { content:'✳ '; color:var(--wax); font-style:normal; font-size:7pt; } .with-margin { padding-right:1.5in; } /* ---------- Callouts / letters ---------- */ .callout { border:1px solid var(--ink); outline:1px solid var(--ink); outline-offset:2px; padding:6px 10px; margin:8px 2px; } .ruled-blue { background-image:repeating-linear-gradient(to bottom, transparent 0, transparent 18px, var(--rule-blue) 18px, var(--rule-blue) 19px); } /* ---------- Steps with numbered boxes ---------- */ ol.steps { counter-reset:step; list-style:none; padding-left:0; margin:6px 0; } ol.steps li { counter-increment:step; margin:6px 0; padding-left:29px; position:relative; } ol.steps li::before { content:counter(step); position:absolute; left:0; top:1px; width:18px; height:18px; border:1px solid var(--ink); font-family:'IBM Plex Mono', monospace; font-size:9pt; font-weight:600; text-align:center; line-height:18px; color:var(--wax); } /* ---------- Tables ---------- */ table.t { border-collapse:collapse; width:100%; font-size:8.8pt; margin:4px 0 8px; } table.t th { font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:7.2pt; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--ink); padding:2px 6px; text-align:left; } table.t td { border:1px solid var(--ink); padding:2.5px 6px; vertical-align:top; } table.t td.die { font-family:'IBM Plex Mono', monospace; font-weight:600; text-align:center; white-space:nowrap; width:.5in; } /* ---------- Dice (pip-grid faces, drawn) ---------- */ .die-face { display:inline-grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); width:15px; height:15px; padding:2px; border:1.6px solid var(--ink); border-radius:3px; vertical-align:-3px; background:#fff; } .die-face i { border-radius:50%; background:var(--ink); width:3px; height:3px; place-self:center; } .die-face.wax { border-color:var(--wax); } .die-face.wax i { background:var(--wax); } .die-pair { white-space:nowrap; } .die-pair .die-face + .die-face { margin-left:2px; } /* ---------- FIELD FORMS (canon: same three sheets, re-inked) ---------- */ h1.sheet-title { font-family:'Alfa Slab One', serif; font-weight:400; font-size:14.5pt; letter-spacing:.02em; margin:2px 0; } .subtitle { font-family:'IBM Plex Mono', monospace; font-size:8pt; letter-spacing:.12em; text-transform:uppercase; margin:0 0 8px; } .fill { border-bottom:1px solid var(--ink); display:inline-block; min-width:1.4in; } .box { display:inline-block; width:12px; height:12px; border:1px solid var(--ink); vertical-align:-2px; } .cbx { font-family:'IBM Plex Mono', monospace; } .label { font-family:'IBM Plex Mono', monospace; font-size:7.6pt; letter-spacing:.14em; text-transform:uppercase; } .meta-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:4px 0 6px; flex-wrap:wrap; } .survey-grid { border-collapse:collapse; margin:0 auto; } .survey-grid td { width:.52in; height:.52in; border:1px solid var(--ink); padding:0; } .grid-caption { text-align:center; font-family:'IBM Plex Mono', monospace; font-size:7.8pt; letter-spacing:.25em; text-transform:uppercase; margin:4px 0 2px; } .grid-caption .dn { color:var(--wax); } .tally-row { display:flex; align-items:flex-start; gap:5px; margin:6px 0 2px; flex-wrap:wrap; } .tally-box { width:19px; height:19px; border:1px solid var(--ink); display:inline-block; } .tally-col { display:inline-flex; flex-direction:column; align-items:center; gap:1px; } .tally-col .qflag { font-family:'IBM Plex Mono', monospace; font-size:5.6pt; font-weight:600; letter-spacing:.04em; color:var(--wax); text-transform:uppercase; line-height:1; } .tally-col.quota .tally-box { border-bottom:3px double var(--wax); } .lamp-track { display:flex; align-items:center; gap:4px; flex-wrap:wrap; } .lamp-box { width:15px; height:15px; border:1px solid var(--ink); display:inline-block; } .lamp-box.oil { border:1.6px solid var(--wax); position:relative; } .lamp-sep { font-family:'IBM Plex Mono', monospace; font-size:8pt; color:var(--wax); font-weight:600; } .legend { border:1px solid var(--ink); padding:5px 8px; columns:2; column-gap:20px; font-size:8.6pt; } .legend div { break-inside:avoid; margin:1px 0; } .glyph { font-family:'IBM Plex Mono', monospace; font-weight:600; display:inline-block; width:1.4em; text-align:center; } .glyph.seal { color:var(--wax); } .stat-row { display:flex; gap:10px; margin:6px 0; } .stat-cell { border:1px solid var(--ink); padding:4px 10px; text-align:center; min-width:1.05in; flex:1; } .stat-cell .label { display:block; margin-bottom:2px; } .stat-cell .val { font-size:13pt; font-family:'Spectral', serif; min-height:17px; } .fatigue-track { display:flex; gap:0; margin:4px 0; } .fatigue-track .fb { width:25px; height:24px; border:1px solid var(--ink); border-left:0; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:7.6pt; line-height:24px; } .fatigue-track .fb:first-child { border-left:1px solid var(--ink); } .kit-line { display:flex; align-items:center; gap:6px; margin:4px 0; } .kit-line.writeline { align-items:baseline; } .kit-line .kit-name { font-family:'IBM Plex Mono', monospace; font-size:8.4pt; letter-spacing:.08em; width:1.2in; text-transform:uppercase; } .tickbox { width:14px; height:14px; border:1px solid var(--ink); display:inline-block; } .section-head { font-family:'IBM Plex Mono', monospace; font-size:8.2pt; font-weight:600; letter-spacing:.16em; text-transform:uppercase; border-bottom:3px double var(--wax); padding-bottom:2px; margin:9px 0 5px; } table.ranks { border-collapse:collapse; width:100%; font-size:7.7pt; } table.ranks th { font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:6.9pt; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--ink); padding:2px 5px; text-align:left; } table.ranks td { border:1px solid var(--ink); padding:2.5px 5px; vertical-align:top; } table.ranks td.rk { font-family:'IBM Plex Mono', monospace; font-weight:600; white-space:nowrap; width:.82in; } table.ranks td.rk .rk-n { display:inline-block; width:2.2em; } table.ranks td.rk .rk-c { display:inline-block; width:1.4em; text-align:right; color:var(--wax); } table.ranks .rname { font-weight:600; font-style:italic; } table.ranks .box { width:10px; height:10px; vertical-align:-1px; } .writein { border:1px solid var(--ink); min-height:.5in; padding:4px; } table.ledger { border-collapse:collapse; width:100%; font-size:9pt; } table.ledger th { border:1px solid var(--ink); padding:2px 5px; font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:7.6pt; letter-spacing:.1em; text-transform:uppercase; text-align:left; } table.ledger td { border:1px solid var(--ink); padding:2px 5px; } table.ledger .col-no { width:.5in; text-align:center; font-family:'IBM Plex Mono', monospace; } table.ledger .col-amt { width:1in; } table.ledger td.col-rec { height:.245in; } .balance { display:flex; justify-content:flex-end; align-items:baseline; gap:10px; border-top:2px solid var(--ink); margin-top:7px; padding-top:6px; position:relative; font-weight:600; font-size:11pt; } .balance::before { content:''; position:absolute; top:2px; left:0; right:0; border-top:1px solid var(--ink); } .balance .fill { min-width:2.2in; } /* ---------- Field Card specifics ---------- */ .card-band { border:1px solid var(--ink); padding:6px 9px; margin:6px 0; } .card-cols { display:flex; gap:14px; } .card-cols > div { flex:1; min-width:0; } .beat { display:flex; gap:7px; margin:5.5px 0; align-items:flex-start; } .beat .beat-die { width:36px; flex:0 0 36px; text-align:center; padding-top:1px; } .beat .beat-n { font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:7pt; letter-spacing:.14em; text-transform:uppercase; color:var(--wax); display:block; } .beat .beat-txt { font-size:9.2pt; line-height:1.36; } .beat + .beat { border-top:1px solid rgba(38,33,25,.18); padding-top:5px; } .traits-2col { columns:2; column-gap:16px; font-size:8.8pt; } .traits-2col div { break-inside:avoid; margin:0 0 4px; } .tname { font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:7.6pt; text-transform:uppercase; letter-spacing:.04em; } .foot-rule { border-top:3px double var(--wax); margin-top:9px; padding-top:4px; font-family:'IBM Plex Mono', monospace; font-size:6.9pt; letter-spacing:.04em; text-transform:uppercase; text-align:center; white-space:nowrap; } .card-page { font-size:10pt; } .card-page .rule-head { font-size:9.4pt; } .dense p, .dense li { margin:2px 0; } .dense ol.steps li { margin:4px 0; } .dense h3.rule-head { margin:8px 0 4px; } .mini-diagram { display:inline-block; vertical-align:middle; } /* toolbar (screen only) */ .toolbar { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid #000; padding:8px 12px; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:9pt; } @media print { .toolbar { display:none !important; } }