/* ================================================================== Foundry Pricebook — site layer over the Folio kit. Vendored revision: see .design-revision (ui-05-folio @ e36bf48). Everything visual comes from the kit — tokens (folio/tokens.css), base typography + halftone paper (folio/base.css), primitives/forms/artifacts (folio/ui.css, folio/artifacts.css) and the price sheet itself (folio/sheet.css). This file only composes those pieces into the page: masthead, filter panel, row signals, colophon. Class names are the kit's (fl-*) except the ones app.js emits (`badge`, `badge batch`, `badge ftb`, `td.num`, `tr.ft`, `tr.batch`), which are styled here with the kit's badge/table values so the JS stays untouched. The kit puts a `theme-folio` scope class on a high-level wrapper; the vendored base.css applies its typography globally, so the class is carried on as the kit contract's marker. ================================================================== */ /* ---------------- page frame ---------------- */ .sheet { position: relative; width: 100%; max-width: var(--maxw); margin: 0 auto; /* room for the crop marks, which sit 16px outside their box */ padding: var(--sp-7) var(--sp-5) var(--sp-8); } /* ---------------- masthead ---------------- */ .masthead { position: relative; background: var(--fo-ink); color: var(--fo-paper); border: var(--fo-border); box-shadow: var(--fo-shadow-lg); padding: var(--sp-6) var(--sp-5) var(--sp-5); margin-bottom: var(--sp-7); } .masthead__kicker { display: inline-block; background: var(--fo-yellow); color: var(--fo-ink); border: var(--fo-border-2); padding: 3px 10px; margin-bottom: var(--sp-4); } .masthead h1 { font-size: var(--fo-fs-display); margin-bottom: var(--sp-3); } .masthead__tagline { max-width: 62ch; margin: 0 0 var(--sp-4); color: var(--fo-paper-2); font-size: var(--fo-fs-500); } .masthead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); color: var(--fo-paper-3); margin: 0; } .masthead__stamp { position: absolute; top: -14px; right: 44px; } /* ---------------- filter panel ---------------- */ .controls { margin-bottom: var(--sp-6); } .controls__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4); } .controls__search { flex: 1 1 260px; } .controls__field { flex: 0 1 180px; } .controls__toggles { display: flex; flex-wrap: wrap; gap: var(--sp-5); padding-bottom: 6px; } .controls .fl-panel__head h2 { font-size: var(--fo-fs-500); } #row-count { background: var(--fo-yellow); border: var(--fo-border-2); box-shadow: 2px 2px 0 var(--fo-paper); padding: 3px 8px; white-space: nowrap; } /* ---------------- table glue ---------------- */ .fl-table-wrap { margin-bottom: var(--sp-6); } /* the sheet is wide: keep names readable but bounded, so the table stays scannable */ table.fl-brut td:nth-child(1) { min-width: 120px; } table.fl-brut td:nth-child(2) { min-width: 230px; max-width: 340px; } table.fl-brut td:last-child { color: var(--fo-muted); } th.sortable button { all: unset; display: block; width: 100%; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } th.sortable:hover { background: var(--fo-orange); } th.sortable[aria-sort] button::after { content: ' \25B4'; font-size: 0.75em; } th.sortable[aria-sort='descending'] button::after { content: ' \25BE'; } /* ---------------- row signals: badges + edge tabs ---------------- app.js emits `` inside the model cell and puts `ft` / `batch` on the row. Values are the kit's `.fl-badge` block. */ td .badge { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 3px 8px; border: var(--fo-border-2); box-shadow: 2px 2px 0 var(--fo-ink); background: var(--fo-paper); font-family: var(--fo-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; } td .badge.batch { background: var(--fo-sky); } td .badge.ftb { background: var(--fo-pink); } /* edge tabs mark the two signal rows without breaking the zebra striping */ table.fl-brut tbody tr.ft td:first-child { box-shadow: inset 5px 0 0 var(--fo-pink); } table.fl-brut tbody tr.batch td:first-child { box-shadow: inset 5px 0 0 var(--fo-sky); } /* ---------------- empty state ---------------- */ #empty-state { margin-top: var(--sp-5); } /* ---------------- colophon ---------------- */ .colophon { position: relative; margin-top: var(--sp-7); border: var(--fo-border); box-shadow: var(--fo-shadow-sm); background: var(--fo-paper); padding: var(--sp-5); } .colophon__rule { border-top: var(--fo-border-2); margin: var(--sp-4) 0; } .colophon p { margin: 0 0 var(--sp-3); color: var(--fo-ink-soft); } .colophon p:last-child { margin-bottom: 0; } .colophon a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .colophon a:hover { background: var(--fo-yellow); text-decoration: none; } .colophon__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); } .noscript { border: var(--fo-border-2); background: var(--fo-orange); color: var(--fo-ink); padding: var(--sp-3) var(--sp-4); box-shadow: var(--fo-shadow-sm); } /* ---------------- responsive ---------------- */ @media (max-width: 860px) { .sheet { padding: var(--sp-6) var(--sp-4) var(--sp-7); } .controls__search, .controls__field { flex: 1 1 100%; } .masthead__stamp { top: -12px; right: var(--sp-4); } }