/* site/assets/it-gen-trade-cl20-v1-batch4.css 5 cleaning-service invoice-generator designs (batch 4 of the cl20 pack), built from real owner-supplied editable reference templates in docs/full-designs/incoming/cleaner/ InvoiceTools_Cleaning_Service_Claude_Package/editable_source_batches/Cleaning_Service_CL_41_50_Editable/ (CL-46 through CL-50). Same technique as site/assets/it-gen-trade-mc20-v1.css: CSS-only, targeting invoice-generator's real .inv-* DOM, no shared files touched. This pack's spec.json files carry only color/font/layout data, no photographic or vector art assets exist for it, so every decorative treatment here (checklist strip, stamp badge, tab strip, double frame) is pure CSS - no background-image, no inline . Direct ?template= addressing only (registered in TEMPLATES, never UNIVERSAL_TPL_IDS). */ /* CL-46 "Checklist ledger": mono-accented meta box with a left accent border, a decorative checklist strip (table-caption technique, matching mc20-21's own "VEHICLE INFORMATION" caption band) ahead of the line-item table, solid primary table header/grand total. */ .invoice-preview.tmpl-cl20-46-checkledger{background:#fff;color:#20262C;font-family:Arial,Helvetica,sans-serif} .invoice-preview.tmpl-cl20-46-checkledger .inv-head{display:block!important;padding:34px 40px 0;border:0} .invoice-preview.tmpl-cl20-46-checkledger .inv-head-left{max-width:100%} .invoice-preview.tmpl-cl20-46-checkledger .inv-biz-name{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#6E7781;font-weight:600;margin-bottom:4px} .invoice-preview.tmpl-cl20-46-checkledger .inv-doc-title{font-size:54px;font-weight:800;color:#1E5A6F;margin:2px 0 4px} .invoice-preview.tmpl-cl20-46-checkledger .inv-head-right{background:#F5F7F8;border-left:4px solid #A7D8E6;padding:12px 14px;text-align:left;font-family:'IBM Plex Mono',Consolas,monospace;font-size:11px;margin-top:8px;min-width:210px} .invoice-preview.tmpl-cl20-46-checkledger .inv-doc-num,.invoice-preview.tmpl-cl20-46-checkledger .inv-doc-po{font-family:'IBM Plex Mono',Consolas,monospace;font-size:12px;color:#20262C} .invoice-preview.tmpl-cl20-46-checkledger .inv-parties{border-bottom:1px solid #D9E0E5} .invoice-preview.tmpl-cl20-46-checkledger .inv-label{color:#1E5A6F} .invoice-preview.tmpl-cl20-46-checkledger .inv-table::before{content:"\2713 Dusting \2713 Vacuum \2713 Mop \2713 Bathrooms \2713 Kitchen \2713 Trash \2713 High-touch surfaces \2713 Glass \2713 Final walkthrough \2713 Supplies";display:table-caption;caption-side:top;font-family:'IBM Plex Mono',Consolas,monospace;font-size:9.5px;letter-spacing:.02em;background:#F5F7F8;border:1px solid #D9E0E5;border-left:4px solid #A7D8E6;padding:10px 13px;margin-bottom:14px;color:#20262C} .invoice-preview.tmpl-cl20-46-checkledger .inv-table thead th{background:#1E5A6F;color:#fff;border-bottom:none} .invoice-preview.tmpl-cl20-46-checkledger .inv-total-grand{background:#1E5A6F;padding:12px 14px!important;border-top:none} .invoice-preview.tmpl-cl20-46-checkledger .inv-total-grand,.invoice-preview.tmpl-cl20-46-checkledger .inv-total-grand b{color:#fff!important} .invoice-preview.tmpl-cl20-46-checkledger .inv-total-grand b{font-size:22px!important} /* CL-47 "Split totals panel": a solid dark summary panel on the header's right, a serif display title, and matching boxed panels for the payment block and the totals box so the bottom reads as two even side-by-side-style panels (the source's true 1fr/1fr grid isn't available on this DOM, so payment/notes and totals are given matching panel styling in their natural stacked order instead - see report). */ .invoice-preview.tmpl-cl20-47-splittotal{background:#fff;color:#20262C;font-family:Arial,Helvetica,sans-serif} .invoice-preview.tmpl-cl20-47-splittotal .inv-head{display:flex!important;padding:34px 40px 0;border:0;align-items:flex-start} .invoice-preview.tmpl-cl20-47-splittotal .inv-head-left{max-width:56%} .invoice-preview.tmpl-cl20-47-splittotal .inv-biz-name{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#6E7781;font-weight:600;margin-bottom:4px} .invoice-preview.tmpl-cl20-47-splittotal .inv-doc-title{font-family:Georgia,'Times New Roman',serif;font-size:26px;font-weight:700;color:#fff;margin:2px 0} .invoice-preview.tmpl-cl20-47-splittotal .inv-head-right{background:#5A4736;color:#fff;padding:20px 22px;text-align:left;min-width:230px;border-radius:2px} .invoice-preview.tmpl-cl20-47-splittotal .inv-doc-num,.invoice-preview.tmpl-cl20-47-splittotal .inv-doc-po{color:#fff} .invoice-preview.tmpl-cl20-47-splittotal .inv-parties{border-bottom:2px solid #DEC7A8} .invoice-preview.tmpl-cl20-47-splittotal .inv-label{color:#5A4736} .invoice-preview.tmpl-cl20-47-splittotal .inv-table thead th{background:#5A4736;color:#fff;border-bottom:none} .invoice-preview.tmpl-cl20-47-splittotal .inv-block{border:1px solid #D9E0E5;border-top:2px solid #DEC7A8;background:#F5F7F8;border-radius:2px} .invoice-preview.tmpl-cl20-47-splittotal .inv-totals{border:1px solid #D9E0E5} .invoice-preview.tmpl-cl20-47-splittotal .inv-totals>div{padding:8px 12px;border-bottom:1px solid #D9E0E5} .invoice-preview.tmpl-cl20-47-splittotal .inv-total-grand{background:#5A4736;padding:12px 14px!important;border-top:none} .invoice-preview.tmpl-cl20-47-splittotal .inv-total-grand,.invoice-preview.tmpl-cl20-47-splittotal .inv-total-grand b{color:#fff!important} .invoice-preview.tmpl-cl20-47-splittotal .inv-total-grand b{font-size:22px!important} /* CL-48 "Service passport": a round double-border stamp badge (pure CSS, no art) recreating the source's circular "CLEAN / COMPLETE" stamp, sitting beside a surface-tinted passport panel; gold accent meta box; large serif-adjacent navy title. */ .invoice-preview.tmpl-cl20-48-passport{background:#fff;color:#20262C;font-family:Arial,Helvetica,sans-serif} .invoice-preview.tmpl-cl20-48-passport .inv-head{display:block!important;padding:34px 40px 0;border:0} .invoice-preview.tmpl-cl20-48-passport .inv-head-left{max-width:100%} .invoice-preview.tmpl-cl20-48-passport .inv-biz-name{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#6E7781;font-weight:600;margin-bottom:4px} .invoice-preview.tmpl-cl20-48-passport .inv-doc-title{font-size:56px;font-weight:800;color:#1F3E5A;margin:2px 0 4px} .invoice-preview.tmpl-cl20-48-passport .inv-head-right{background:#F5F7F8;border-left:4px solid #F1C75B;padding:12px 14px;text-align:left;font-size:11px;margin-top:8px;min-width:210px} .invoice-preview.tmpl-cl20-48-passport .inv-parties{position:relative;border-bottom:1px solid #D9E0E5;padding-left:132px;min-height:110px} .invoice-preview.tmpl-cl20-48-passport .inv-parties::before{content:"CLEAN\A COMPLETE";white-space:pre;position:absolute;left:0;top:4px;width:104px;height:104px;border:3px double #1F3E5A;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:12px;letter-spacing:.04em;color:#1F3E5A;font-family:Georgia,'Times New Roman',serif} .invoice-preview.tmpl-cl20-48-passport .inv-label{color:#1F3E5A} .invoice-preview.tmpl-cl20-48-passport .inv-table thead th{background:#1F3E5A;color:#fff;border-bottom:none} .invoice-preview.tmpl-cl20-48-passport .inv-total-grand{background:#1F3E5A;padding:12px 14px!important;border-top:none} .invoice-preview.tmpl-cl20-48-passport .inv-total-grand,.invoice-preview.tmpl-cl20-48-passport .inv-total-grand b{color:#fff!important} .invoice-preview.tmpl-cl20-48-passport .inv-total-grand b{font-size:22px!important} /* CL-49 "Minimal tabs invoice": a serif display title, mint-bordered meta box, and a decorative "areas serviced" tab strip (a single labeled band, since CSS generated content cannot lay out 4 discrete boxes without extra markup - see report) directly above the line-item table. */ .invoice-preview.tmpl-cl20-49-tabbed{background:#fff;color:#20262C;font-family:Arial,Helvetica,sans-serif} .invoice-preview.tmpl-cl20-49-tabbed .inv-head{display:block!important;padding:34px 40px 0;border:0} .invoice-preview.tmpl-cl20-49-tabbed .inv-head-left{max-width:100%} .invoice-preview.tmpl-cl20-49-tabbed .inv-biz-name{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#6E7781;font-weight:600;margin-bottom:4px} .invoice-preview.tmpl-cl20-49-tabbed .inv-doc-title{font-family:Georgia,'Times New Roman',serif;font-size:54px;font-weight:700;color:#2F5A54;margin:2px 0 4px} .invoice-preview.tmpl-cl20-49-tabbed .inv-head-right{background:#F5F7F8;border-left:4px solid #B8D9D2;padding:12px 14px;text-align:left;font-size:11px;margin-top:8px;min-width:210px} .invoice-preview.tmpl-cl20-49-tabbed .inv-parties{border-bottom:1px solid #D9E0E5} .invoice-preview.tmpl-cl20-49-tabbed .inv-label{color:#2F5A54} .invoice-preview.tmpl-cl20-49-tabbed .inv-table::before{content:"Home \00b7 Deep clean \00b7 Windows \00b7 Supplies";display:table-caption;caption-side:top;text-align:center;font-size:10px;letter-spacing:.06em;text-transform:uppercase;background:#F5F7F8;border-bottom:5px solid #B8D9D2;padding:11px;margin-bottom:14px;color:#2F5A54;font-weight:600} .invoice-preview.tmpl-cl20-49-tabbed .inv-table thead th{background:#2F5A54;color:#fff;border-bottom:none} .invoice-preview.tmpl-cl20-49-tabbed .inv-total-grand{background:#2F5A54;padding:12px 14px!important;border-top:none} .invoice-preview.tmpl-cl20-49-tabbed .inv-total-grand,.invoice-preview.tmpl-cl20-49-tabbed .inv-total-grand b{color:#fff!important} .invoice-preview.tmpl-cl20-49-tabbed .inv-total-grand b{font-size:22px!important} /* CL-50 "Framed statement": a double-line frame border around the whole invoice, a centered header with a lavender rule, and a large serif display title. */ .invoice-preview.tmpl-cl20-50-framed{background:#fff;color:#20262C;font-family:Arial,Helvetica,sans-serif;border:8px double #3F3B4A !important} .invoice-preview.tmpl-cl20-50-framed .inv-head{display:block!important;padding:34px 44px 18px;border:0;border-bottom:1px solid #D6C5E4;text-align:center} .invoice-preview.tmpl-cl20-50-framed .inv-head-left{max-width:100%} .invoice-preview.tmpl-cl20-50-framed .inv-biz-name{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#6E7781;font-weight:600;margin-bottom:4px} .invoice-preview.tmpl-cl20-50-framed .inv-doc-title{font-family:Georgia,'Times New Roman',serif;font-size:60px;font-weight:600;color:#3F3B4A;margin:2px 0} .invoice-preview.tmpl-cl20-50-framed .inv-head-right{text-align:center;margin-top:12px;font-size:11px} .invoice-preview.tmpl-cl20-50-framed .inv-body{padding-left:40px;padding-right:40px} .invoice-preview.tmpl-cl20-50-framed .inv-parties{justify-content:center;border-bottom:1px solid #D9E0E5} .invoice-preview.tmpl-cl20-50-framed .inv-label{color:#3F3B4A} .invoice-preview.tmpl-cl20-50-framed .inv-table thead th{background:#3F3B4A;color:#fff;border-bottom:none} .invoice-preview.tmpl-cl20-50-framed .inv-total-grand{background:#3F3B4A;padding:12px 14px!important;border-top:none} .invoice-preview.tmpl-cl20-50-framed .inv-total-grand,.invoice-preview.tmpl-cl20-50-framed .inv-total-grand b{color:#fff!important} .invoice-preview.tmpl-cl20-50-framed .inv-total-grand b{font-size:22px!important}