/* ============================================================ ISOBEX — Process Flow · printable sheet (THE STANDARD) ------------------------------------------------------------ Every guided-flow PDF MUST use this format so anything Isobex (or the CRM) generates renders consistently: • A3 page (landscape by default — see [data-page] on ) • the whole decision tree is scaled to the PAGE WIDTH at a fixed scale, then flows DOWNWARD across as many pages as it needs — long flows simply add pages, never get clipped • cards stay full-size and legible (light theme on white) The on-screen preview width equals the print printable width, so what you see is exactly what prints. Orientation is the only knob: | "A3-portrait". ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; background: #51626a; } body { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; } /* The "page" — a white column the width of the A3 printable area. padding here matches on screen and in print so the scale is identical. */ .pf-sheet { position: relative; background: #fff; margin: 18px auto; padding: 30px; box-shadow: 0 12px 44px rgba(0,0,0,.32); } html[data-page="A3-landscape"] .pf-sheet { width: 1497px; } /* 396mm @96dpi */ html[data-page="A3-portrait"] .pf-sheet { width: 1032px; } /* 273mm @96dpi */ /* On screen, let the fixed-width sheet scroll inside its own container on narrow viewports rather than overflowing the page. (Print uses @media print below.) */ @media screen { .sheet-screen-scroll { max-width: 100%; overflow-x: auto; } } /* header */ .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); } .sheet-head__l { display: flex; align-items: center; gap: 18px; } .sheet-head__logo { height: 56px; width: auto; } .sheet-head__tt { border-left: 1px solid var(--line); padding-left: 18px; } .sheet-head__eyebrow { font-weight: var(--w-bold); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--laser-500); } .sheet-head__title { font-weight: var(--w-bold); font-size: 27px; line-height: 1.04; text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); margin-top: 6px; } .sheet-head__r { text-align: right; font-size: 12.5px; color: var(--slate-500); line-height: 1.5; } .sheet-head__r b { color: var(--ink); font-weight: var(--w-bold); } .sheet-head__r .beam { display: inline-block; width: 50px; height: 3px; margin-bottom: 8px; background: linear-gradient(90deg, transparent, var(--laser-500), #ff6a6e); box-shadow: 0 0 8px rgba(249,40,47,.5); } /* flow area — holds the scaled tree (scaled with `zoom`, not transform, so it stays in normal flow). After measuring, the script slices the tree into per-page windows (.pf-page) so NO card is ever fragmented across a page break. */ .sheet-flow { display: flex; justify-content: center; padding: 22px 0 8px; } .sheet-scaler { position: relative; } .sheet-scaler .pf-camera { position: relative; top: 0; left: 0; transform: none; transition: none; } .sheet-scaler .pf-canvas { position: relative; transform: none; } /* JS sets `zoom` */ /* per-page slices: each page shows one clipped band of the tree. Page breaks fall in the gaps the packer inserted, so cards stay whole; connector lines may be clipped at a band edge and continue on the next page (acceptable). */ .pf-page { position: relative; width: 100%; } .pf-page--brk { break-before: page; } .pf-clip { position: relative; overflow: hidden; margin: 0 auto; } .pf-page--first .pf-clip { margin-top: 16px; } .pf-clip .pf-camera { position: absolute; left: 0; } /* footer */ .sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; border-top: 1px solid var(--line); } .sheet-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; } .sheet-legend div { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: var(--w-semibold); color: var(--slate-500); } .sheet-legend .sw { width: 14px; height: 14px; border-radius: 3px; flex: none; } .sheet-foot__note { font-size: 11.5px; color: var(--steel-400); text-align: right; max-width: 52ch; line-height: 1.5; } .sheet-foot__note b { color: var(--slate-700); font-weight: var(--w-semibold); } .sheet-foot__note a { color: var(--laser-600); font-weight: var(--w-bold); } /* ---- light-theme node overrides (cards sit on white paper) ---- */ .pf-sheet .pf-box { box-shadow: 0 2px 8px rgba(6,33,43,.12); } .pf-sheet .pf-node.is-active .pf-box, .pf-sheet .pf-node--start .pf-box, .pf-sheet .pf-node--outcome .pf-box { box-shadow: 0 4px 14px rgba(6,33,43,.20); } .pf-sheet .pf-edge { stroke: #6f898f; stroke-width: 2.6; } .pf-sheet .pf-arrow { fill: #6f898f; } .pf-sheet .pf-elabel { fill: #fff; font-size: 17px; } .pf-sheet .pf-elabel-bg { fill: var(--ink); } /* keep cards intact across page breaks where the browser allows it */ .pf-sheet .pf-node { break-inside: avoid; } /* on-screen toolbar (hidden in print) */ .print-bar { position: fixed; top: 14px; right: 14px; z-index: 50; display: flex; gap: 10px; } .print-bar button, .print-bar a { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; padding: 11px 18px; border-radius: var(--r-sm); cursor: pointer; border: 1.5px solid transparent; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .print-bar button { background: var(--laser-500); color: #fff; box-shadow: 0 6px 20px rgba(249,40,47,.3); } .print-bar a { background: #fff; color: var(--ink); border-color: var(--line); } /* ---- print: paginate downward, no clipping ---- */ @media print { html, body { background: #fff; } .pf-sheet { width: auto; margin: 0; box-shadow: none; padding: 0; } .print-bar { display: none !important; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } /* @page size/orientation is emitted per-page by FlowSheet.astro (an @page rule can't be switched by an attribute selector). */