/* ========================================================================== it-gen-trade-vg10-v1.css - Videographer trade pack, 10 signature designs adapted from tools/full-designs/pk-vg-*.js (same NN-slug, so each block traces back to its source). invoice-generator only (.invoice-preview DOM). Additive: ten new .tmpl-vg10-NN-* blocks, nothing shared is touched. Every declaration is !important on purpose (the page's own stylesheet wins otherwise). Motifs are pure CSS gradients/shapes plus a few tiny base64 SVG drawings (never a raw utf8 SVG inside url(): it breaks the PDF/PNG export). Each block carries the hex its source file actually ships. Picked for visual distinctness: 01 (gold/navy hero, V-notch band), 03 (plum + green glow), 04 (full dark header, green brush band), 05 (steep diagonal split), 08 (violet, dark sidebar with slanted foot), 09 (black + gold zebra), 13 (sage rounded cards, serif), 14 (warm paper, boxed grid, film strip), 15 (centered serif, forest band), 19 (coral + navy arrow bar). ========================================================================== */ /* ========================================================================== vg10-01-cinematic - brand on white, a navy panel cut on a diagonal holding the document word, a clapperboard mark, a gold rule under the name, stone meta panel, navy-headed bordered table, gold total bar with navy text, a navy footer band with a V-shaped notch on top. Source: pk-vg-01-cinematic (accent #A47A3F gold, navy #151D2B). ========================================================================== */ .invoice-preview.tmpl-vg10-01-cinematic{ background:#FFFFFF !important; color:#151D2B !important; font-family:var(--font-sans) !important; position:relative !important; isolation:isolate !important; overflow:hidden !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-head{ display:grid !important; grid-template-columns:minmax(0,1fr) 300px !important; gap:0 !important; align-items:stretch !important; min-height:220px !important; padding:0 !important; margin:0 !important; border:none !important; background:linear-gradient(112deg,#FFFFFF 0,#FFFFFF calc(100% - 330px),#A47A3F calc(100% - 330px),#A47A3F calc(100% - 322px),#151D2B calc(100% - 322px)) !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-head-left{ max-width:380px !important; padding:38px 24px 30px 42px !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-logo{ margin-bottom:14px !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-biz-name{ font-size:24px !important; font-weight:800 !important; letter-spacing:.06em !important; text-transform:uppercase !important; line-height:1.05 !important; color:#151D2B !important; margin:0 0 10px !important; padding-bottom:10px !important; border-bottom:2px solid #A47A3F !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-biz-contact div, .invoice-preview.tmpl-vg10-01-cinematic .inv-biz-address, .invoice-preview.tmpl-vg10-01-cinematic .inv-biz-tax{ font-size:11px !important; color:#3D4450 !important; opacity:1 !important; line-height:1.7 !important; margin-top:0 !important; letter-spacing:.02em !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-biz-address{ margin-top:6px !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-head-right{ text-align:right !important; padding:36px 40px 26px 20px !important; position:relative !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-head-right::before{ content:"" !important; display:block !important; width:44px !important; height:36px !important; margin:0 0 14px auto !important; background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0MCI+PHBhdGggZmlsbD0iI0E0N0EzRiIgZD0iTTIgMTNoNDR2MjVIMnoiLz48cGF0aCBmaWxsPSIjMTUxRDJCIiBkPSJNMiAzaDQ0djlIMnoiLz48cGF0aCBmaWxsPSIjQTQ3QTNGIiBkPSJNNiAzbDcgOWg3bC03LTl6bTE2IDBsNyA5aDdsLTctOXptMTYgMGw2IDcuN1YzeiIvPjwvc3ZnPg==) center/contain no-repeat !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-doc-title{ display:block !important; font-size:40px !important; font-weight:800 !important; letter-spacing:.22em !important; text-transform:uppercase !important; line-height:1 !important; color:#FFFFFF !important; margin:0 0 10px !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-doc-num{ display:block !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:#E2C48F !important; opacity:1 !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-doc-po{ font-size:10.5px !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:#C9CDD6 !important; opacity:1 !important; margin-top:6px !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-body{ position:relative !important; padding:24px 42px 0 !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-parties{ display:grid !important; grid-template-columns:minmax(0,1fr) 250px !important; gap:28px !important; padding:0 0 20px !important; margin-bottom:18px !important; border:none !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-bill-to{ max-width:none !important; border-left:2px solid #A47A3F !important; padding-left:16px !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-details{ min-width:0 !important; text-align:left !important; background:#F1EEE8 !important; padding:14px 16px !important; border-radius:0 !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-label{ font-size:9.5px !important; font-weight:700 !important; letter-spacing:.24em !important; text-transform:uppercase !important; color:#A47A3F !important; margin-bottom:6px !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-client-name{ font-size:16px !important; font-weight:800 !important; color:#151D2B !important; margin-bottom:3px !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-bill-to div{ font-size:12.5px !important; color:#3D4450 !important; line-height:1.65 !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-detail-row{ display:flex !important; justify-content:space-between !important; gap:12px !important; font-size:12px !important; padding:3px 0 !important; color:#3D4450 !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-detail-row span{ font-size:9.5px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:#5C6470 !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-detail-row b{ color:#151D2B !important; font-weight:700 !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-table{ margin-bottom:0 !important; border:1px solid #151D2B !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-table thead tr{ background:#151D2B !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-table thead th{ background:#151D2B !important; color:#FFFFFF !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.18em !important; text-transform:uppercase !important; padding:11px 12px !important; border:none !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-table tbody td{ padding:11px 12px !important; font-size:13px !important; color:#151D2B !important; border-bottom:1px solid #D9DCE2 !important; border-right:1px solid #D9DCE2 !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-table tbody td:last-child{ border-right:none !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-table tbody tr:last-child td{ border-bottom:none !important; } .invoice-preview.tmpl-vg10-01-cinematic .td-desc{ font-weight:700 !important; } .invoice-preview.tmpl-vg10-01-cinematic .td-num{ color:#3D4450 !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-totals{ width:320px !important; margin:16px 0 22px auto !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-totals>div{ font-size:13px !important; color:#3D4450 !important; padding:6px 12px !important; border-bottom:1px solid #D9DCE2 !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-totals>div.inv-total-grand{ margin-top:8px !important; padding:12px 14px !important; border:none !important; background:#A47A3F !important; color:#151D2B !important; font-size:12.5px !important; font-weight:800 !important; letter-spacing:.16em !important; text-transform:uppercase !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-total-grand b{ font-size:19px !important; color:#151D2B !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-block{ background:#F1EEE8 !important; border:none !important; border-top:2px solid #A47A3F !important; border-radius:0 !important; padding:14px 16px !important; margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-terms{ background:transparent !important; border-top:1px solid #D9DCE2 !important; padding:12px 0 0 !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-block div{ color:#3D4450 !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-signature-row{ justify-content:flex-end !important; margin-top:18px !important; padding-bottom:26px !important; } .invoice-preview.tmpl-vg10-01-cinematic .sig-line{ border-top:1.5px solid #151D2B !important; } .invoice-preview.tmpl-vg10-01-cinematic .sig-caption{ color:#5C6470 !important; letter-spacing:.16em !important; text-transform:uppercase !important; font-size:9.5px !important; } .invoice-preview.tmpl-vg10-01-cinematic .inv-body::after{ content:"Thank you for letting us tell your story" !important; display:block !important; margin:0 -42px !important; padding:34px 42px 22px !important; background:#151D2B !important; clip-path:polygon(0 0,50% 18px,100% 0,100% 100%,0 100%) !important; color:#E2C48F !important; font-family:var(--font-serif) !important; font-style:italic !important; font-size:15px !important; text-align:center !important; letter-spacing:.04em !important; } /* ========================================================================== vg10-03-pixel - plum brand with a two-weight name, a soft green glow top right, a plum upright rule beside the document word, stone meta panel, plum table head, stone notes panel, plum total bar with green figures. Source: pk-vg-03-pixel (accent #2C0E27 plum, green #63C669, stone #F3F1F4). ========================================================================== */ .invoice-preview.tmpl-vg10-03-pixel{ background:#FFFFFF !important; color:#2C0E27 !important; font-family:var(--font-sans) !important; position:relative !important; isolation:isolate !important; overflow:hidden !important; } .invoice-preview.tmpl-vg10-03-pixel::before{ content:"" !important; position:absolute !important; right:0 !important; top:0 !important; width:380px !important; height:300px !important; background:radial-gradient(circle at 88% 8%,#DDF3DE 0,#EEF8EE 120px,rgba(255,255,255,0) 230px) !important; z-index:0 !important; pointer-events:none !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-head{ position:relative !important; z-index:1 !important; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; gap:24px !important; padding:40px 44px 22px !important; margin:0 !important; border:none !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-head-left{ max-width:58% !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-logo{ margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-biz-name{ font-size:26px !important; font-weight:300 !important; letter-spacing:.04em !important; text-transform:uppercase !important; line-height:1.05 !important; color:#2C0E27 !important; margin:0 0 8px !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-biz-name::first-letter{ font-weight:900 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-biz-contact{ padding-top:8px !important; border-top:1px solid #63C669 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-biz-contact div, .invoice-preview.tmpl-vg10-03-pixel .inv-biz-address, .invoice-preview.tmpl-vg10-03-pixel .inv-biz-tax{ font-size:11px !important; color:#4B3A47 !important; opacity:1 !important; line-height:1.7 !important; margin-top:0 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-biz-address{ margin-top:6px !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-head-right{ text-align:right !important; padding-left:22px !important; border-left:3px solid #2C0E27 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-doc-title{ display:block !important; font-size:46px !important; font-weight:900 !important; letter-spacing:-.01em !important; text-transform:uppercase !important; line-height:.95 !important; color:#2C0E27 !important; margin:0 0 8px !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-doc-num{ display:block !important; font-size:11.5px !important; font-weight:700 !important; letter-spacing:.3em !important; text-transform:uppercase !important; color:#2C0E27 !important; opacity:1 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-doc-po{ font-size:10.5px !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:#6A5A67 !important; opacity:1 !important; margin-top:6px !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-body{ position:relative !important; z-index:1 !important; padding:8px 44px 40px !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-parties{ display:grid !important; grid-template-columns:minmax(0,1fr) 250px !important; gap:24px !important; padding:0 0 18px !important; margin-bottom:18px !important; border:none !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-bill-to{ max-width:none !important; padding-top:12px !important; border-top:3px solid #63C669 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-details{ min-width:0 !important; text-align:left !important; background:#F3F1F4 !important; padding:14px 16px !important; border-radius:0 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-label{ font-size:9.5px !important; font-weight:800 !important; letter-spacing:.22em !important; text-transform:uppercase !important; color:#2C0E27 !important; margin-bottom:6px !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-client-name{ font-size:16px !important; font-weight:800 !important; color:#2C0E27 !important; margin-bottom:3px !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-bill-to div{ font-size:12.5px !important; color:#4B3A47 !important; line-height:1.65 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-detail-row{ display:flex !important; justify-content:space-between !important; gap:12px !important; font-size:12px !important; padding:3px 0 !important; color:#4B3A47 !important; border-bottom:1px solid #E1DDE2 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-detail-row:last-child{ border-bottom:none !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-detail-row span{ font-size:9.5px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:#6A5A67 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-detail-row b{ color:#2C0E27 !important; font-weight:700 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-table{ margin-bottom:0 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-table thead tr{ background:#2C0E27 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-table thead th{ background:#2C0E27 !important; color:#FFFFFF !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.16em !important; text-transform:uppercase !important; padding:11px 12px !important; border:none !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-table tbody td{ padding:12px 12px !important; font-size:13px !important; color:#2C0E27 !important; border-bottom:1px solid #E1DDE2 !important; } .invoice-preview.tmpl-vg10-03-pixel .td-desc{ font-weight:700 !important; } .invoice-preview.tmpl-vg10-03-pixel .td-num{ color:#4B3A47 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-totals{ width:320px !important; margin:16px 0 22px auto !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-totals>div{ font-size:13px !important; color:#4B3A47 !important; padding:6px 12px !important; border-bottom:1px solid #E1DDE2 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-totals>div.inv-total-grand{ margin-top:8px !important; padding:12px 14px !important; border:none !important; background:#2C0E27 !important; color:#FFFFFF !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.18em !important; text-transform:uppercase !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-total-grand b{ font-size:19px !important; color:#63C669 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-block{ background:#F3F1F4 !important; border:none !important; border-left:3px solid #63C669 !important; border-radius:0 !important; padding:14px 16px !important; margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-terms{ background:transparent !important; border-left:none !important; border-top:1px solid #E1DDE2 !important; padding:12px 0 0 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-block div{ color:#4B3A47 !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-signature-row{ justify-content:flex-end !important; margin-top:18px !important; } .invoice-preview.tmpl-vg10-03-pixel .sig-line{ border-top:2px solid #63C669 !important; } .invoice-preview.tmpl-vg10-03-pixel .sig-caption{ color:#6A5A67 !important; letter-spacing:.16em !important; text-transform:uppercase !important; font-size:9.5px !important; } .invoice-preview.tmpl-vg10-03-pixel .inv-body::after{ content:"Thank you" !important; display:block !important; margin-top:26px !important; padding-top:12px !important; border-top:1px solid #2C0E27 !important; text-align:right !important; font-family:var(--font-serif) !important; font-style:italic !important; font-size:18px !important; color:#2C0E27 !important; } /* ========================================================================== vg10-04-flatlay - full-width dark header carrying the brand and a big white document word with a green underline; green-ruled bill-to beside a grey meta panel; dark-headed sentence-case table; grey notes panel; dark total bar; a dark footer band streaked with green brush strokes. Source: pk-vg-04-flatlay (accent #78A83F green, ink #1E2126). ========================================================================== */ .invoice-preview.tmpl-vg10-04-flatlay{ background:#FFFFFF !important; color:#1E2126 !important; font-family:var(--font-sans) !important; position:relative !important; isolation:isolate !important; overflow:hidden !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-head{ display:flex !important; justify-content:space-between !important; align-items:flex-end !important; gap:24px !important; padding:40px 44px 30px !important; margin:0 !important; border:none !important; background:linear-gradient(180deg,#2A2E35 0,#1E2126 100%) !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-head-left{ max-width:58% !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-logo{ margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-biz-name{ font-size:24px !important; font-weight:800 !important; letter-spacing:.02em !important; line-height:1.05 !important; color:#FFFFFF !important; margin:0 0 10px !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-biz-contact div, .invoice-preview.tmpl-vg10-04-flatlay .inv-biz-address, .invoice-preview.tmpl-vg10-04-flatlay .inv-biz-tax{ font-size:11px !important; color:#CFD3D8 !important; opacity:1 !important; line-height:1.7 !important; margin-top:0 !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-biz-address{ margin-top:6px !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-head-right{ text-align:right !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-doc-title{ display:inline-block !important; font-size:48px !important; font-weight:900 !important; letter-spacing:.04em !important; text-transform:uppercase !important; line-height:1 !important; color:#FFFFFF !important; margin:0 0 10px !important; padding-bottom:8px !important; border-bottom:4px solid #78A83F !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-doc-num{ display:block !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:#A9D774 !important; opacity:1 !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-doc-po{ font-size:10.5px !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:#CFD3D8 !important; opacity:1 !important; margin-top:6px !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-body{ position:relative !important; padding:26px 44px 0 !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-parties{ display:grid !important; grid-template-columns:minmax(0,1fr) 250px !important; gap:24px !important; padding:0 0 18px !important; margin-bottom:18px !important; border:none !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-bill-to{ max-width:none !important; padding-top:12px !important; border-top:3px solid #78A83F !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-details{ min-width:0 !important; text-align:left !important; background:#F0F0EE !important; padding:14px 16px !important; border-radius:0 !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-label{ font-size:9.5px !important; font-weight:800 !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:#4F7A22 !important; margin-bottom:6px !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-client-name{ font-size:16px !important; font-weight:800 !important; color:#1E2126 !important; margin-bottom:3px !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-bill-to div{ font-size:12.5px !important; color:#40444A !important; line-height:1.65 !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-detail-row{ display:flex !important; justify-content:space-between !important; gap:12px !important; font-size:12px !important; padding:3px 0 !important; color:#40444A !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-detail-row span{ font-size:9.5px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:#5E636A !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-detail-row b{ color:#1E2126 !important; font-weight:700 !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-table{ margin-bottom:0 !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-table thead tr{ background:#1E2126 !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-table thead th{ background:#1E2126 !important; color:#FFFFFF !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.02em !important; text-transform:none !important; padding:11px 12px !important; border:none !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-table tbody td{ padding:12px 12px !important; font-size:13px !important; color:#1E2126 !important; border-bottom:1px solid #DDDFE2 !important; } .invoice-preview.tmpl-vg10-04-flatlay .td-desc{ font-weight:700 !important; } .invoice-preview.tmpl-vg10-04-flatlay .td-num{ color:#40444A !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-totals{ width:320px !important; margin:16px 0 22px auto !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-totals>div{ font-size:13px !important; color:#40444A !important; padding:6px 12px !important; border-bottom:1px solid #DDDFE2 !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-totals>div.inv-total-grand{ margin-top:8px !important; padding:12px 14px !important; border:none !important; border-left:5px solid #78A83F !important; background:#1E2126 !important; color:#FFFFFF !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.16em !important; text-transform:uppercase !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-total-grand b{ font-size:19px !important; color:#A9D774 !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-block{ background:#F0F0EE !important; border:none !important; border-left:4px solid #78A83F !important; border-radius:0 !important; padding:14px 16px !important; margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-terms{ background:transparent !important; border-left:none !important; border-top:1px solid #DDDFE2 !important; padding:12px 0 0 !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-block div{ color:#40444A !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-signature-row{ justify-content:flex-end !important; margin-top:18px !important; padding-bottom:26px !important; } .invoice-preview.tmpl-vg10-04-flatlay .sig-line{ border-top:1.5px solid #1E2126 !important; } .invoice-preview.tmpl-vg10-04-flatlay .sig-caption{ color:#5E636A !important; letter-spacing:.16em !important; text-transform:uppercase !important; font-size:9.5px !important; } .invoice-preview.tmpl-vg10-04-flatlay .inv-body::after{ content:"Thank you for choosing us" !important; display:block !important; margin:0 -44px !important; padding:24px 44px !important; color:#A9D774 !important; font-family:var(--font-serif) !important; font-style:italic !important; font-size:16px !important; text-align:center !important; letter-spacing:.04em !important; background:linear-gradient(0deg,rgba(30,33,38,.55),rgba(30,33,38,.55)),repeating-linear-gradient(-18deg,#1E2126 0,#1E2126 60px,#78A83F 60px,#78A83F 66px,#1E2126 66px,#1E2126 120px,#4F7A22 120px,#4F7A22 123px) !important; } /* ========================================================================== vg10-05-visual - white panel cut on a steep diagonal against a dark right side holding the document word, a blue rule under the name, blue labels, ruled meta list, dark table head, blue total bar, dark landscape footer band with a script motto. Source: pk-vg-05-visual (accent #3F59A8 blue, dark #32321C). ========================================================================== */ .invoice-preview.tmpl-vg10-05-visual{ background:#FFFFFF !important; color:#32321C !important; font-family:var(--font-sans) !important; position:relative !important; isolation:isolate !important; overflow:hidden !important; } .invoice-preview.tmpl-vg10-05-visual .inv-head{ display:grid !important; grid-template-columns:minmax(0,1fr) 280px !important; gap:0 !important; align-items:stretch !important; min-height:232px !important; padding:0 !important; margin:0 !important; border:none !important; background:linear-gradient(118deg,#FFFFFF 0,#FFFFFF calc(100% - 300px),#3F59A8 calc(100% - 300px),#3F59A8 calc(100% - 290px),#32321C calc(100% - 290px)) !important; } .invoice-preview.tmpl-vg10-05-visual .inv-head-left{ max-width:380px !important; padding:40px 24px 30px 44px !important; } .invoice-preview.tmpl-vg10-05-visual .inv-logo{ margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-05-visual .inv-biz-name{ font-size:26px !important; font-weight:800 !important; letter-spacing:-.01em !important; line-height:1.05 !important; color:#32321C !important; margin:0 0 10px !important; padding-bottom:10px !important; border-bottom:3px solid #3F59A8 !important; display:inline-block !important; } .invoice-preview.tmpl-vg10-05-visual .inv-biz-contact div, .invoice-preview.tmpl-vg10-05-visual .inv-biz-address, .invoice-preview.tmpl-vg10-05-visual .inv-biz-tax{ font-size:11px !important; color:#4E4E3A !important; opacity:1 !important; line-height:1.7 !important; margin-top:0 !important; letter-spacing:.04em !important; } .invoice-preview.tmpl-vg10-05-visual .inv-biz-address{ margin-top:6px !important; } .invoice-preview.tmpl-vg10-05-visual .inv-head-right{ text-align:right !important; padding:44px 40px 26px 10px !important; } .invoice-preview.tmpl-vg10-05-visual .inv-doc-title{ display:block !important; font-size:34px !important; font-weight:700 !important; letter-spacing:.3em !important; text-transform:uppercase !important; line-height:1 !important; color:#FFFFFF !important; margin:0 0 12px !important; } .invoice-preview.tmpl-vg10-05-visual .inv-doc-num{ display:block !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:#B7C4EE !important; opacity:1 !important; } .invoice-preview.tmpl-vg10-05-visual .inv-doc-po{ font-size:10.5px !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:#D6D6CC !important; opacity:1 !important; margin-top:6px !important; } .invoice-preview.tmpl-vg10-05-visual .inv-body{ position:relative !important; padding:26px 44px 0 !important; } .invoice-preview.tmpl-vg10-05-visual .inv-parties{ display:grid !important; grid-template-columns:minmax(0,1fr) 240px !important; gap:28px !important; padding:0 0 18px !important; margin-bottom:18px !important; border:none !important; border-bottom:1px solid #D8D8D0 !important; } .invoice-preview.tmpl-vg10-05-visual .inv-bill-to{ max-width:none !important; } .invoice-preview.tmpl-vg10-05-visual .inv-details{ min-width:0 !important; text-align:left !important; background:transparent !important; padding:0 !important; } .invoice-preview.tmpl-vg10-05-visual .inv-label{ font-size:9.5px !important; font-weight:800 !important; letter-spacing:.24em !important; text-transform:uppercase !important; color:#3F59A8 !important; margin-bottom:6px !important; } .invoice-preview.tmpl-vg10-05-visual .inv-client-name{ font-size:16px !important; font-weight:800 !important; color:#32321C !important; margin-bottom:3px !important; } .invoice-preview.tmpl-vg10-05-visual .inv-bill-to div{ font-size:12.5px !important; color:#4E4E3A !important; line-height:1.65 !important; } .invoice-preview.tmpl-vg10-05-visual .inv-detail-row{ display:flex !important; justify-content:space-between !important; gap:12px !important; font-size:12px !important; padding:5px 0 !important; color:#4E4E3A !important; border-bottom:1px solid #D8D8D0 !important; } .invoice-preview.tmpl-vg10-05-visual .inv-detail-row:last-child{ border-bottom:none !important; } .invoice-preview.tmpl-vg10-05-visual .inv-detail-row span{ font-size:9.5px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:#6B6B58 !important; } .invoice-preview.tmpl-vg10-05-visual .inv-detail-row b{ color:#32321C !important; font-weight:700 !important; } .invoice-preview.tmpl-vg10-05-visual .inv-table{ margin-bottom:0 !important; } .invoice-preview.tmpl-vg10-05-visual .inv-table thead tr{ background:#32321C !important; } .invoice-preview.tmpl-vg10-05-visual .inv-table thead th{ background:#32321C !important; color:#FFFFFF !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.18em !important; text-transform:uppercase !important; padding:11px 12px !important; border:none !important; } .invoice-preview.tmpl-vg10-05-visual .inv-table tbody td{ padding:12px 12px !important; font-size:13px !important; color:#32321C !important; border-bottom:1px solid #D8D8D0 !important; } .invoice-preview.tmpl-vg10-05-visual .td-desc{ font-weight:700 !important; } .invoice-preview.tmpl-vg10-05-visual .td-num{ color:#4E4E3A !important; } .invoice-preview.tmpl-vg10-05-visual .inv-totals{ width:320px !important; margin:16px 0 22px auto !important; } .invoice-preview.tmpl-vg10-05-visual .inv-totals>div{ font-size:13px !important; color:#4E4E3A !important; padding:6px 12px !important; border-bottom:1px solid #D8D8D0 !important; } .invoice-preview.tmpl-vg10-05-visual .inv-totals>div.inv-total-grand{ margin-top:8px !important; padding:12px 14px !important; border:none !important; background:#3F59A8 !important; color:#FFFFFF !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.16em !important; text-transform:uppercase !important; } .invoice-preview.tmpl-vg10-05-visual .inv-total-grand b{ font-size:19px !important; color:#FFFFFF !important; } .invoice-preview.tmpl-vg10-05-visual .inv-block{ background:#F2F2EC !important; border:none !important; border-radius:0 !important; padding:14px 16px !important; margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-05-visual .inv-terms{ background:transparent !important; border-top:1px solid #D8D8D0 !important; padding:12px 0 0 !important; } .invoice-preview.tmpl-vg10-05-visual .inv-block div{ color:#4E4E3A !important; } .invoice-preview.tmpl-vg10-05-visual .inv-signature-row{ justify-content:flex-end !important; margin-top:18px !important; padding-bottom:26px !important; } .invoice-preview.tmpl-vg10-05-visual .sig-line{ border-top:1.5px solid #3F59A8 !important; } .invoice-preview.tmpl-vg10-05-visual .sig-caption{ color:#6B6B58 !important; letter-spacing:.16em !important; text-transform:uppercase !important; font-size:9.5px !important; } .invoice-preview.tmpl-vg10-05-visual .inv-body::after{ content:"Every frame, crafted with care" !important; display:block !important; margin:0 -44px !important; padding:26px 44px !important; background:linear-gradient(180deg,#3A3A22 0,#32321C 100%) !important; border-top:6px solid #3F59A8 !important; color:#FFFFFF !important; font-family:var(--font-serif) !important; font-style:italic !important; font-size:16px !important; text-align:center !important; letter-spacing:.04em !important; } /* ========================================================================== vg10-08-corporate - full-height dark navy sidebar with a slanted foot holding the brand in violet, a spaced number line and a large document word top right, tinted meta strip, navy-headed ruled table, tinted notes card, violet total bar, spaced motto between rules at the foot. Source: pk-vg-08-corporate (accent #A85BD6 violet, navy #211C30). ========================================================================== */ .invoice-preview.tmpl-vg10-08-corporate{ background:#FFFFFF !important; color:#211C30 !important; font-family:var(--font-sans) !important; position:relative !important; isolation:isolate !important; padding:0 0 0 200px !important; overflow:hidden !important; } .invoice-preview.tmpl-vg10-08-corporate::before{ content:"" !important; position:absolute !important; left:0 !important; top:0 !important; bottom:0 !important; width:200px !important; background:#211C30 !important; clip-path:polygon(0 0,100% 0,100% calc(100% - 70px),0 100%) !important; z-index:0 !important; pointer-events:none !important; } .invoice-preview.tmpl-vg10-08-corporate::after{ content:"" !important; position:absolute !important; left:0 !important; top:0 !important; bottom:0 !important; width:200px !important; background:#A85BD6 !important; clip-path:polygon(0 calc(100% - 4px),100% calc(100% - 74px),100% calc(100% - 70px),0 100%) !important; z-index:0 !important; pointer-events:none !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-head{ position:relative !important; z-index:1 !important; display:block !important; min-height:200px !important; padding:40px 44px 10px 34px !important; margin:0 !important; border:none !important; background:transparent !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-head-left{ position:absolute !important; left:-168px !important; top:40px !important; width:140px !important; max-width:none !important; z-index:1 !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-logo{ margin-bottom:14px !important; max-width:120px !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-biz-name{ font-size:19px !important; font-weight:800 !important; letter-spacing:.02em !important; line-height:1.1 !important; color:#C98BEA !important; margin-bottom:12px !important; padding-bottom:12px !important; border-bottom:2px solid #A85BD6 !important; word-break:break-word !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-biz-contact div, .invoice-preview.tmpl-vg10-08-corporate .inv-biz-address, .invoice-preview.tmpl-vg10-08-corporate .inv-biz-tax{ font-size:10.5px !important; color:#D9D4E4 !important; opacity:1 !important; line-height:1.7 !important; margin-top:0 !important; word-break:break-word !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-biz-address{ margin-top:8px !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-head-right{ text-align:right !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-doc-num{ display:block !important; font-size:11.5px !important; font-weight:700 !important; letter-spacing:.34em !important; text-transform:uppercase !important; color:#A85BD6 !important; opacity:1 !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-doc-title{ display:block !important; font-size:54px !important; font-weight:900 !important; letter-spacing:-.01em !important; text-transform:uppercase !important; line-height:.95 !important; color:#211C30 !important; margin:0 0 10px !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-doc-po{ font-size:10.5px !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:#615A70 !important; opacity:1 !important; margin-top:6px !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-body{ position:relative !important; z-index:1 !important; padding:8px 44px 40px 34px !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-parties{ display:block !important; padding:0 !important; margin-bottom:18px !important; border:none !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-bill-to{ max-width:none !important; padding:0 0 16px !important; border-bottom:1px solid #D8D4E0 !important; margin-bottom:16px !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-details{ min-width:0 !important; text-align:left !important; display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:2px !important; background:transparent !important; padding:0 !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-details .inv-label{ grid-column:1 / -1 !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-label{ font-size:9.5px !important; font-weight:800 !important; letter-spacing:.24em !important; text-transform:uppercase !important; color:#A85BD6 !important; margin-bottom:6px !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-client-name{ font-size:17px !important; font-weight:800 !important; color:#211C30 !important; margin-bottom:3px !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-bill-to div{ font-size:12.5px !important; color:#3F3950 !important; line-height:1.65 !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-detail-row{ display:flex !important; flex-direction:column !important; gap:2px !important; font-size:12px !important; padding:10px 12px !important; color:#3F3950 !important; background:#F4EEF9 !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-detail-row span{ font-size:9px !important; font-weight:700 !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:#7A4F98 !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-detail-row b{ color:#211C30 !important; font-weight:700 !important; font-size:12.5px !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-table{ margin-bottom:0 !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-table thead tr{ background:#211C30 !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-table thead th{ background:#211C30 !important; color:#FFFFFF !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.16em !important; text-transform:uppercase !important; padding:11px 12px !important; border:none !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-table tbody td{ padding:12px 12px !important; font-size:13px !important; color:#211C30 !important; border-bottom:1px solid #D8D4E0 !important; } .invoice-preview.tmpl-vg10-08-corporate .td-desc{ font-weight:700 !important; } .invoice-preview.tmpl-vg10-08-corporate .td-num{ color:#3F3950 !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-totals{ width:320px !important; margin:16px 0 22px auto !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-totals>div{ font-size:13px !important; color:#3F3950 !important; padding:6px 12px !important; border-bottom:1px solid #D8D4E0 !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-totals>div.inv-total-grand{ margin-top:8px !important; padding:12px 14px !important; border:none !important; background:#A85BD6 !important; color:#FFFFFF !important; font-size:13px !important; font-weight:800 !important; letter-spacing:.14em !important; text-transform:uppercase !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-total-grand b{ font-size:20px !important; color:#FFFFFF !important; font-weight:900 !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-block{ background:#F4EEF9 !important; border:none !important; border-radius:6px !important; padding:14px 16px !important; margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-terms{ background:transparent !important; border-radius:0 !important; border-top:1px solid #D8D4E0 !important; padding:12px 0 0 !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-block div{ color:#3F3950 !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-signature-row{ justify-content:flex-end !important; margin-top:18px !important; } .invoice-preview.tmpl-vg10-08-corporate .sig-line{ border-top:1.5px solid #211C30 !important; } .invoice-preview.tmpl-vg10-08-corporate .sig-caption{ color:#615A70 !important; letter-spacing:.16em !important; text-transform:uppercase !important; font-size:9.5px !important; } .invoice-preview.tmpl-vg10-08-corporate .inv-body::after{ content:"Story \00b7 Craft \00b7 Delivery" !important; display:block !important; margin-top:28px !important; padding:12px 0 !important; border-top:1px solid #211C30 !important; border-bottom:1px solid #211C30 !important; text-align:center !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.4em !important; text-transform:uppercase !important; color:#211C30 !important; } /* ========================================================================== vg10-09-graphic - black angled block top right holding the document word with a gold rule, centered wordmark on white, black-headed zebra table on stone, stone services card, black total bar with gold figures, black footer band with a gold script thank-you and a slanted gold frame. Source: pk-vg-09-graphic (accent #B0A956 gold, black #121212, stone #EFEDE9). ========================================================================== */ .invoice-preview.tmpl-vg10-09-graphic{ background:#FFFFFF !important; color:#121212 !important; font-family:var(--font-sans) !important; position:relative !important; isolation:isolate !important; overflow:hidden !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-head{ display:grid !important; grid-template-columns:minmax(0,1fr) 320px !important; gap:0 !important; align-items:stretch !important; min-height:220px !important; padding:0 !important; margin:0 !important; border:none !important; background:linear-gradient(-74deg,#121212 0,#121212 300px,#B0A956 300px,#B0A956 306px,#FFFFFF 306px) !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-head-left{ max-width:380px !important; padding:42px 24px 30px 44px !important; text-align:left !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-logo{ margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-biz-name{ font-size:22px !important; font-weight:900 !important; letter-spacing:.14em !important; text-transform:uppercase !important; line-height:1.1 !important; color:#121212 !important; margin:0 0 10px !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-biz-contact div, .invoice-preview.tmpl-vg10-09-graphic .inv-biz-address, .invoice-preview.tmpl-vg10-09-graphic .inv-biz-tax{ font-size:11px !important; color:#3A3A3A !important; opacity:1 !important; line-height:1.7 !important; margin-top:0 !important; letter-spacing:.04em !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-biz-address{ margin-top:6px !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-head-right{ text-align:right !important; padding:44px 40px 26px 20px !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-doc-title{ display:inline-block !important; font-size:38px !important; font-weight:900 !important; letter-spacing:.12em !important; text-transform:uppercase !important; line-height:1 !important; color:#FFFFFF !important; margin:0 0 12px !important; padding-bottom:10px !important; border-bottom:3px solid #B0A956 !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-doc-num{ display:block !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.24em !important; text-transform:uppercase !important; color:#D9D3A0 !important; opacity:1 !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-doc-po{ font-size:10.5px !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:#CFCFCF !important; opacity:1 !important; margin-top:6px !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-body{ position:relative !important; padding:26px 44px 0 !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-parties{ display:grid !important; grid-template-columns:minmax(0,1fr) 240px !important; gap:28px !important; padding:0 0 18px !important; margin-bottom:18px !important; border:none !important; border-bottom:2px solid #121212 !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-bill-to{ max-width:none !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-details{ min-width:0 !important; text-align:left !important; background:transparent !important; padding:0 0 0 20px !important; border-left:1px solid #C8C8C4 !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-label{ font-size:9.5px !important; font-weight:800 !important; letter-spacing:.26em !important; text-transform:uppercase !important; color:#7C7738 !important; margin-bottom:6px !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-client-name{ font-size:16px !important; font-weight:800 !important; color:#121212 !important; margin-bottom:3px !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-bill-to div{ font-size:12.5px !important; color:#3A3A3A !important; line-height:1.65 !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-detail-row{ display:flex !important; justify-content:space-between !important; gap:12px !important; font-size:12px !important; padding:4px 0 !important; color:#3A3A3A !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-detail-row span{ font-size:9.5px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:#5E5E5E !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-detail-row b{ color:#121212 !important; font-weight:700 !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-table{ margin-bottom:0 !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-table thead tr{ background:#121212 !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-table thead th{ background:#121212 !important; color:#FFFFFF !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase !important; padding:11px 12px !important; border:none !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-table tbody td{ padding:12px 12px !important; font-size:13px !important; color:#121212 !important; border-bottom:none !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-table tbody tr:nth-child(even) td{ background:#EFEDE9 !important; } .invoice-preview.tmpl-vg10-09-graphic .td-desc{ font-weight:700 !important; } .invoice-preview.tmpl-vg10-09-graphic .td-num{ color:#3A3A3A !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-totals{ width:320px !important; margin:16px 0 22px auto !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-totals>div{ font-size:13px !important; color:#3A3A3A !important; padding:6px 12px !important; border-bottom:1px solid #C8C8C4 !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-totals>div.inv-total-grand{ margin-top:8px !important; padding:12px 14px !important; border:none !important; background:#121212 !important; color:#FFFFFF !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-total-grand b{ font-size:19px !important; color:#D9D3A0 !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-block{ background:#EFEDE9 !important; border:none !important; border-radius:0 !important; padding:14px 16px !important; margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-terms{ background:transparent !important; border-top:1px solid #C8C8C4 !important; padding:12px 0 0 !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-block div{ color:#3A3A3A !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-signature-row{ justify-content:flex-end !important; margin-top:18px !important; padding-bottom:26px !important; } .invoice-preview.tmpl-vg10-09-graphic .sig-line{ border-top:1.5px solid #121212 !important; } .invoice-preview.tmpl-vg10-09-graphic .sig-caption{ color:#5E5E5E !important; letter-spacing:.16em !important; text-transform:uppercase !important; font-size:9.5px !important; } .invoice-preview.tmpl-vg10-09-graphic .inv-body::after{ content:"Thank you" !important; display:block !important; margin:0 -44px !important; padding:26px 44px 26px 70px !important; color:#D9D3A0 !important; font-family:var(--font-serif) !important; font-style:italic !important; font-size:22px !important; text-align:left !important; background:linear-gradient(-70deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 180px,#B0A956 180px,#B0A956 186px,rgba(0,0,0,0) 186px,rgba(0,0,0,0) 214px,#B0A956 214px,#B0A956 220px,rgba(0,0,0,0) 220px),#121212 !important; } /* ========================================================================== vg10-13-minimal - serif brand with a sage motto line, a very large serif document word, four soft rounded cards with sage icon circles, a rounded sage table head over hairline rows, a tinted total card with a dark navy total bar and an olive sprig, a serif hairline footer. Source: pk-vg-13-minimal (accent #7E9580 sage, dark #2D2E47, ink #171621). ========================================================================== */ .invoice-preview.tmpl-vg10-13-minimal{ background:#FFFFFF !important; color:#171621 !important; font-family:var(--font-serif) !important; position:relative !important; isolation:isolate !important; overflow:hidden !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-head{ display:flex !important; justify-content:space-between !important; align-items:flex-start !important; gap:24px !important; padding:42px 44px 18px !important; margin:0 !important; border:none !important; background:transparent !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-head-left{ max-width:56% !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-logo{ margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-biz-name{ font-family:var(--font-serif) !important; font-size:26px !important; font-weight:600 !important; letter-spacing:.02em !important; line-height:1.1 !important; color:#171621 !important; margin:0 0 8px !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-biz-contact{ padding-top:8px !important; border-top:1px solid #7E9580 !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-biz-contact div, .invoice-preview.tmpl-vg10-13-minimal .inv-biz-address, .invoice-preview.tmpl-vg10-13-minimal .inv-biz-tax{ font-family:var(--font-sans) !important; font-size:11px !important; color:#4A4955 !important; opacity:1 !important; line-height:1.7 !important; margin-top:0 !important; letter-spacing:.02em !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-biz-address{ margin-top:6px !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-head-right{ text-align:right !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-doc-title{ display:block !important; font-family:var(--font-serif) !important; font-size:60px !important; font-weight:400 !important; letter-spacing:.02em !important; text-transform:capitalize !important; line-height:.95 !important; color:#2D2E47 !important; margin:0 0 8px !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-doc-num{ display:block !important; font-family:var(--font-sans) !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.3em !important; text-transform:uppercase !important; color:#5E7A62 !important; opacity:1 !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-doc-po{ font-family:var(--font-sans) !important; font-size:10.5px !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:#6B6A76 !important; opacity:1 !important; margin-top:6px !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-body{ position:relative !important; padding:8px 44px 40px !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-parties{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:14px !important; padding:0 !important; margin-bottom:18px !important; border:none !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-bill-to, .invoice-preview.tmpl-vg10-13-minimal .inv-details{ max-width:none !important; min-width:0 !important; text-align:left !important; background:#F2F5F2 !important; border-radius:16px !important; padding:16px 18px 16px 60px !important; position:relative !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-bill-to::before, .invoice-preview.tmpl-vg10-13-minimal .inv-details::before{ content:"" !important; position:absolute !important; left:18px !important; top:16px !important; width:28px !important; height:28px !important; border-radius:50% !important; background:#7E9580 !important; box-shadow:inset 0 0 0 6px #F2F5F2, inset 0 0 0 8px #7E9580 !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-label{ font-family:var(--font-sans) !important; font-size:9.5px !important; font-weight:700 !important; letter-spacing:.22em !important; text-transform:uppercase !important; color:#5E7A62 !important; margin-bottom:6px !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-client-name{ font-family:var(--font-serif) !important; font-size:17px !important; font-weight:600 !important; color:#171621 !important; margin-bottom:3px !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-bill-to div{ font-family:var(--font-sans) !important; font-size:12px !important; color:#4A4955 !important; line-height:1.65 !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-detail-row{ display:flex !important; justify-content:space-between !important; gap:12px !important; font-family:var(--font-sans) !important; font-size:12px !important; padding:3px 0 !important; color:#4A4955 !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-detail-row span{ font-size:9.5px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:#6B6A76 !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-detail-row b{ color:#171621 !important; font-weight:700 !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-table{ margin-bottom:0 !important; border-collapse:separate !important; border-spacing:0 !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-table thead tr{ background:transparent !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-table thead th{ background:#7E9580 !important; color:#FFFFFF !important; font-family:var(--font-sans) !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.16em !important; text-transform:uppercase !important; padding:11px 14px !important; border:none !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-table thead th:first-child{ border-radius:12px 0 0 12px !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-table thead th:last-child{ border-radius:0 12px 12px 0 !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-table tbody td{ padding:12px 14px !important; font-size:13px !important; color:#171621 !important; border-bottom:1px solid #DCE3DC !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-table tbody tr:last-child td{ border-bottom:1px solid #DCE3DC !important; } .invoice-preview.tmpl-vg10-13-minimal .td-desc{ font-family:var(--font-serif) !important; font-weight:600 !important; } .invoice-preview.tmpl-vg10-13-minimal .td-num{ font-family:var(--font-sans) !important; color:#4A4955 !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-totals{ width:330px !important; margin:16px 0 22px auto !important; background:#F2F5F2 !important; border-radius:16px !important; padding:14px 14px 48px !important; position:relative !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-totals::after{ content:"" !important; position:absolute !important; left:16px !important; bottom:6px !important; width:58px !important; height:36px !important; background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA0MCI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjN0U5NTgwIiBzdHJva2Utd2lkdGg9IjEuNiIgZD0iTTQgMzZDMTggMzAgMzQgMTggNjAgNiIvPjxwYXRoIGZpbGw9IiM3RTk1ODAiIGQ9Ik0xOCAyN2MtMS03IDMtMTIgOS0xMy0xIDctNCAxMS05IDEzem0xMi04YzAtNyA1LTExIDExLTExLTEgNy01IDEwLTExIDExem0xMi03YzEtNiA2LTkgMTItOC0yIDYtNiA4LTEyIDh6TTE0IDMzYy02IDEtMTAtMi0xMS04IDYgMCA5IDMgMTEgOHptMTEtNmMtNiAyLTExIDAtMTMtNiA2LTEgMTAgMSAxMyA2em0xMi02Yy02IDItMTEgMC0xMy01IDYtMiAxMCAwIDEzIDV6Ii8+PC9zdmc+) center/contain no-repeat !important; pointer-events:none !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-totals>div{ font-family:var(--font-sans) !important; font-size:13px !important; color:#4A4955 !important; padding:6px 8px !important; border-bottom:1px solid #DCE3DC !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-totals>div.inv-total-grand{ margin-top:8px !important; padding:12px 14px !important; border:none !important; border-radius:10px !important; background:#2D2E47 !important; color:#FFFFFF !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.16em !important; text-transform:uppercase !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-total-grand b{ font-size:19px !important; color:#FFFFFF !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-block{ background:#F2F5F2 !important; border:none !important; border-radius:16px !important; padding:14px 18px !important; margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-terms{ background:transparent !important; border-radius:0 !important; border-top:1px solid #DCE3DC !important; padding:12px 0 0 !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-block div{ font-family:var(--font-sans) !important; color:#4A4955 !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-signature-row{ justify-content:flex-end !important; margin-top:18px !important; } .invoice-preview.tmpl-vg10-13-minimal .sig-line{ border-top:1.5px solid #7E9580 !important; } .invoice-preview.tmpl-vg10-13-minimal .sig-caption{ font-family:var(--font-sans) !important; color:#6B6A76 !important; letter-spacing:.16em !important; text-transform:uppercase !important; font-size:9.5px !important; } .invoice-preview.tmpl-vg10-13-minimal .inv-body::after{ content:"With thanks" !important; display:block !important; margin-top:26px !important; padding-top:14px !important; border-top:1px solid #DCE3DC !important; text-align:center !important; font-family:var(--font-serif) !important; font-style:italic !important; font-size:16px !important; color:#2D2E47 !important; } /* ========================================================================== vg10-14-editorial - warm off-white sheet split by hairlines, a huge condensed trade word behind the header, the document word on a taupe plate, boxed grid table with a taupe head, a black and taupe total strip, a film strip motif and a ruled footer, boxed payment block. Source: pk-vg-14-editorial (accent #A3806B taupe as a half tint #D1BFB5, ink #121416, paper #F9F9F5). ========================================================================== */ .invoice-preview.tmpl-vg10-14-editorial{ background:#F9F9F5 !important; color:#121416 !important; font-family:var(--font-sans) !important; position:relative !important; isolation:isolate !important; overflow:hidden !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-head{ position:relative !important; display:flex !important; justify-content:space-between !important; align-items:flex-end !important; gap:24px !important; padding:84px 44px 22px !important; margin:0 !important; border:none !important; border-bottom:1px solid #121416 !important; background:transparent !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-head::before{ content:"Videography" !important; position:absolute !important; left:40px !important; top:12px !important; font-size:64px !important; font-weight:900 !important; letter-spacing:-.02em !important; text-transform:uppercase !important; line-height:1 !important; color:#E7DED8 !important; transform:scaleX(.7) !important; transform-origin:left top !important; white-space:nowrap !important; pointer-events:none !important; z-index:0 !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-head::after{ content:"" !important; position:absolute !important; left:44px !important; top:66px !important; width:64px !important; height:6px !important; background:#A3806B !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-head-left{ position:relative !important; z-index:1 !important; max-width:56% !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-logo{ margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-biz-name{ font-size:22px !important; font-weight:800 !important; letter-spacing:.02em !important; line-height:1.1 !important; color:#121416 !important; margin:0 0 8px !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-biz-contact div, .invoice-preview.tmpl-vg10-14-editorial .inv-biz-address, .invoice-preview.tmpl-vg10-14-editorial .inv-biz-tax{ font-size:11px !important; color:#3E4044 !important; opacity:1 !important; line-height:1.7 !important; margin-top:0 !important; letter-spacing:.02em !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-biz-address{ margin-top:6px !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-head-right{ position:relative !important; z-index:1 !important; text-align:right !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-doc-title{ display:inline-block !important; font-size:26px !important; font-weight:800 !important; letter-spacing:.24em !important; text-transform:uppercase !important; line-height:1 !important; color:#121416 !important; margin:0 0 10px !important; padding:12px 18px 10px 22px !important; background:#D1BFB5 !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-doc-num{ display:block !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:#121416 !important; opacity:1 !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-doc-po{ font-size:10.5px !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:#5C5F64 !important; opacity:1 !important; margin-top:6px !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-body{ position:relative !important; padding:22px 44px 40px !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-parties{ display:grid !important; grid-template-columns:minmax(0,1fr) 250px !important; gap:28px !important; padding:0 0 18px !important; margin-bottom:18px !important; border:none !important; border-bottom:1px solid #121416 !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-bill-to{ max-width:none !important; border-left:3px solid #A3806B !important; padding-left:14px !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-details{ min-width:0 !important; text-align:left !important; background:transparent !important; padding:0 0 0 14px !important; border-left:3px solid #121416 !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-label{ font-size:9.5px !important; font-weight:800 !important; letter-spacing:.26em !important; text-transform:uppercase !important; color:#7A5A46 !important; margin-bottom:6px !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-client-name{ font-family:var(--font-serif) !important; font-size:17px !important; font-weight:700 !important; color:#121416 !important; margin-bottom:3px !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-bill-to div{ font-size:12.5px !important; color:#3E4044 !important; line-height:1.65 !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-detail-row{ display:flex !important; justify-content:space-between !important; gap:12px !important; font-size:12px !important; padding:4px 0 !important; color:#3E4044 !important; border-bottom:1px solid #D9D5CC !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-detail-row:last-child{ border-bottom:none !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-detail-row span{ font-size:9.5px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:#5C5F64 !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-detail-row b{ color:#121416 !important; font-weight:700 !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-table{ margin-bottom:0 !important; border:1px solid #121416 !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-table thead tr{ background:#D1BFB5 !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-table thead th{ background:#D1BFB5 !important; color:#121416 !important; font-size:10px !important; font-weight:800 !important; letter-spacing:.18em !important; text-transform:uppercase !important; padding:10px 12px !important; border:1px solid #121416 !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-table tbody td{ padding:11px 12px !important; font-size:13px !important; color:#121416 !important; border:1px solid #121416 !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-table tbody tr:last-child td{ border-bottom:1px solid #121416 !important; } .invoice-preview.tmpl-vg10-14-editorial .td-desc{ font-family:var(--font-serif) !important; font-weight:700 !important; } .invoice-preview.tmpl-vg10-14-editorial .td-num{ color:#3E4044 !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-totals{ width:330px !important; margin:16px 0 22px auto !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-totals>div{ font-size:13px !important; color:#3E4044 !important; padding:6px 12px !important; border-bottom:1px solid #D9D5CC !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-totals>div.inv-total-grand{ margin-top:8px !important; padding:12px 14px !important; border:none !important; border-left:14px solid #A3806B !important; background:#121416 !important; color:#FFFFFF !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-total-grand b{ font-size:19px !important; color:#FFFFFF !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-block{ background:transparent !important; border:1px solid #121416 !important; border-radius:0 !important; padding:14px 16px !important; margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-terms{ border:none !important; border-top:1px solid #D9D5CC !important; padding:12px 0 0 !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-block div{ color:#3E4044 !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-signature-row{ justify-content:flex-end !important; margin-top:18px !important; } .invoice-preview.tmpl-vg10-14-editorial .sig-line{ border-top:1.5px solid #121416 !important; } .invoice-preview.tmpl-vg10-14-editorial .sig-caption{ color:#5C5F64 !important; letter-spacing:.16em !important; text-transform:uppercase !important; font-size:9.5px !important; } .invoice-preview.tmpl-vg10-14-editorial .inv-body::after{ content:"" !important; display:block !important; margin-top:28px !important; height:26px !important; border-top:1px solid #121416 !important; padding-top:12px !important; background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNDAiPjxyZWN0IHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiIGZpbGw9IiMxMjE0MTYiLz48ZyBmaWxsPSIjRjlGOUY1Ij48cmVjdCB4PSI0IiB5PSIzIiB3aWR0aD0iOCIgaGVpZ2h0PSI1IiByeD0iMSIvPjxyZWN0IHg9IjIwIiB5PSIzIiB3aWR0aD0iOCIgaGVpZ2h0PSI1IiByeD0iMSIvPjxyZWN0IHg9IjM2IiB5PSIzIiB3aWR0aD0iOCIgaGVpZ2h0PSI1IiByeD0iMSIvPjxyZWN0IHg9IjUyIiB5PSIzIiB3aWR0aD0iOCIgaGVpZ2h0PSI1IiByeD0iMSIvPjxyZWN0IHg9IjY4IiB5PSIzIiB3aWR0aD0iOCIgaGVpZ2h0PSI1IiByeD0iMSIvPjxyZWN0IHg9Ijg0IiB5PSIzIiB3aWR0aD0iOCIgaGVpZ2h0PSI1IiByeD0iMSIvPjxyZWN0IHg9IjEwMCIgeT0iMyIgd2lkdGg9IjgiIGhlaWdodD0iNSIgcng9IjEiLz48cmVjdCB4PSI0IiB5PSIzMiIgd2lkdGg9IjgiIGhlaWdodD0iNSIgcng9IjEiLz48cmVjdCB4PSIyMCIgeT0iMzIiIHdpZHRoPSI4IiBoZWlnaHQ9IjUiIHJ4PSIxIi8+PHJlY3QgeD0iMzYiIHk9IjMyIiB3aWR0aD0iOCIgaGVpZ2h0PSI1IiByeD0iMSIvPjxyZWN0IHg9IjUyIiB5PSIzMiIgd2lkdGg9IjgiIGhlaWdodD0iNSIgcng9IjEiLz48cmVjdCB4PSI2OCIgeT0iMzIiIHdpZHRoPSI4IiBoZWlnaHQ9IjUiIHJ4PSIxIi8+PHJlY3QgeD0iODQiIHk9IjMyIiB3aWR0aD0iOCIgaGVpZ2h0PSI1IiByeD0iMSIvPjxyZWN0IHg9IjEwMCIgeT0iMzIiIHdpZHRoPSI4IiBoZWlnaHQ9IjUiIHJ4PSIxIi8+PC9nPjxnIGZpbGw9IiNEMUJGQjUiPjxyZWN0IHg9IjYiIHk9IjEyIiB3aWR0aD0iMzIiIGhlaWdodD0iMTYiLz48cmVjdCB4PSI0NCIgeT0iMTIiIHdpZHRoPSIzMiIgaGVpZ2h0PSIxNiIvPjxyZWN0IHg9IjgyIiB5PSIxMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjE2Ii8+PC9nPjwvc3ZnPg==) left 12px/auto 26px repeat-x !important; box-sizing:content-box !important; } /* ========================================================================== vg10-15-elegant - centered monogram and spaced serif capitals over a thin rule, a full-width forest band with an italic quote, a widely spaced serif document word with a short rule, hairline-split columns, a forest table head, boxed subtotal panel over a forest total bar, ruled center footer on warm paper. Source: pk-vg-15-elegant (accent #254B3E forest, ink #1C2A25, paper #FCFBF8). ========================================================================== */ .invoice-preview.tmpl-vg10-15-elegant{ background:#FCFBF8 !important; color:#1C2A25 !important; font-family:var(--font-serif) !important; position:relative !important; isolation:isolate !important; overflow:hidden !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-head{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:0 !important; padding:40px 44px 0 !important; margin:0 !important; border:none !important; background:transparent !important; text-align:center !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-head-left{ max-width:520px !important; text-align:center !important; padding-bottom:22px !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-logo{ margin:0 auto 14px !important; display:block !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-biz-name{ font-family:var(--font-serif) !important; font-size:24px !important; font-weight:500 !important; letter-spacing:.3em !important; text-transform:uppercase !important; line-height:1.15 !important; color:#1C2A25 !important; margin:0 0 10px !important; padding-bottom:10px !important; border-bottom:1px solid #254B3E !important; display:inline-block !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-biz-contact div, .invoice-preview.tmpl-vg10-15-elegant .inv-biz-address, .invoice-preview.tmpl-vg10-15-elegant .inv-biz-tax{ font-family:var(--font-sans) !important; font-size:11px !important; color:#3F4E47 !important; opacity:1 !important; line-height:1.7 !important; margin:0 auto !important; max-width:none !important; letter-spacing:.06em !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-biz-address{ margin-top:4px !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-head-right{ width:calc(100% + 88px) !important; margin:0 -44px !important; text-align:center !important; padding:34px 44px 30px !important; background:linear-gradient(180deg,#2C5647 0,#254B3E 100%) !important; position:relative !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-head-right::before{ content:"\201C Every frame tells the story \201D" !important; display:block !important; font-family:var(--font-serif) !important; font-style:italic !important; font-size:14px !important; color:#D9E4DE !important; letter-spacing:.04em !important; margin-bottom:16px !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-doc-title{ display:inline-block !important; font-family:var(--font-serif) !important; font-size:30px !important; font-weight:400 !important; letter-spacing:.42em !important; text-transform:uppercase !important; line-height:1 !important; color:#FFFFFF !important; margin:0 0 12px !important; padding-bottom:12px !important; border-bottom:1px solid #A7C1B4 !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-doc-num{ display:block !important; font-family:var(--font-sans) !important; font-size:11px !important; font-weight:600 !important; letter-spacing:.3em !important; text-transform:uppercase !important; color:#D9E4DE !important; opacity:1 !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-doc-po{ font-family:var(--font-sans) !important; font-size:10.5px !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:#D9E4DE !important; opacity:1 !important; margin-top:6px !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-body{ position:relative !important; padding:30px 44px 40px !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-parties{ display:grid !important; grid-template-columns:minmax(0,1fr) 250px !important; gap:0 !important; padding:0 0 20px !important; margin-bottom:20px !important; border:none !important; border-bottom:1px solid #C9CFC9 !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-bill-to{ max-width:none !important; padding-right:28px !important; border-right:1px solid #C9CFC9 !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-details{ min-width:0 !important; text-align:left !important; background:transparent !important; padding:0 0 0 28px !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-label{ font-family:var(--font-sans) !important; font-size:9.5px !important; font-weight:700 !important; letter-spacing:.3em !important; text-transform:uppercase !important; color:#254B3E !important; margin-bottom:8px !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-client-name{ font-family:var(--font-serif) !important; font-size:18px !important; font-weight:600 !important; color:#1C2A25 !important; margin-bottom:3px !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-bill-to div{ font-family:var(--font-sans) !important; font-size:12px !important; color:#3F4E47 !important; line-height:1.7 !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-detail-row{ display:flex !important; justify-content:space-between !important; gap:12px !important; font-family:var(--font-sans) !important; font-size:12px !important; padding:4px 0 !important; color:#3F4E47 !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-detail-row span{ font-size:9.5px !important; font-weight:700 !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:#5E6B65 !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-detail-row b{ color:#1C2A25 !important; font-weight:700 !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-table{ margin-bottom:0 !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-table thead tr{ background:#254B3E !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-table thead th{ background:#254B3E !important; color:#FFFFFF !important; font-family:var(--font-sans) !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase !important; padding:11px 12px !important; border:none !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-table tbody td{ padding:12px 12px !important; font-size:13px !important; color:#1C2A25 !important; border-bottom:1px solid #C9CFC9 !important; } .invoice-preview.tmpl-vg10-15-elegant .td-desc{ font-family:var(--font-serif) !important; font-weight:600 !important; } .invoice-preview.tmpl-vg10-15-elegant .td-num{ font-family:var(--font-sans) !important; color:#3F4E47 !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-totals{ width:320px !important; margin:16px 0 22px auto !important; border:1px solid #254B3E !important; padding:8px 0 0 !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-totals>div{ font-family:var(--font-sans) !important; font-size:13px !important; color:#3F4E47 !important; padding:6px 14px !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-totals>div.inv-total-grand{ margin-top:8px !important; padding:12px 14px !important; border:none !important; background:#254B3E !important; color:#FFFFFF !important; font-size:11.5px !important; font-weight:700 !important; letter-spacing:.24em !important; text-transform:uppercase !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-total-grand b{ font-family:var(--font-serif) !important; font-size:19px !important; color:#FFFFFF !important; letter-spacing:0 !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-block{ background:transparent !important; border:1px solid #C9CFC9 !important; border-radius:0 !important; padding:14px 16px !important; margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-terms{ border:none !important; border-top:1px solid #C9CFC9 !important; padding:12px 0 0 !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-block div{ font-family:var(--font-sans) !important; color:#3F4E47 !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-signature-row{ justify-content:flex-end !important; margin-top:18px !important; } .invoice-preview.tmpl-vg10-15-elegant .sig-line{ border-top:1px solid #254B3E !important; } .invoice-preview.tmpl-vg10-15-elegant .sig-caption{ font-family:var(--font-sans) !important; color:#5E6B65 !important; letter-spacing:.2em !important; text-transform:uppercase !important; font-size:9.5px !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-body::after{ content:"Thank you" !important; display:block !important; margin-top:28px !important; padding:14px 0 0 !important; border-top:1px solid #254B3E !important; text-align:center !important; font-family:var(--font-serif) !important; font-size:12px !important; letter-spacing:.4em !important; text-transform:uppercase !important; color:#254B3E !important; } /* ========================================================================== vg10-19-bright - heavy navy name over a coral rule, a coral corner wedge with a navy edge stripe top right holding the document word, pale bill-to card, four ruled meta cells, navy-headed ruled table, a play mark on the notes card, totals ending in a navy and coral arrow bar, a navy footer band. Source: pk-vg-19-bright (accent #F0425F coral, navy #112A36, pale #F3F4F6). ========================================================================== */ .invoice-preview.tmpl-vg10-19-bright{ background:#FFFFFF !important; color:#112A36 !important; font-family:var(--font-sans) !important; position:relative !important; isolation:isolate !important; overflow:hidden !important; } .invoice-preview.tmpl-vg10-19-bright .inv-head{ display:grid !important; grid-template-columns:minmax(0,1fr) 320px !important; gap:0 !important; align-items:stretch !important; min-height:220px !important; padding:0 !important; margin:0 !important; border:none !important; background:linear-gradient(118deg,#FFFFFF 0,#FFFFFF calc(100% - 350px),#112A36 calc(100% - 350px),#112A36 calc(100% - 340px),#F0425F calc(100% - 340px)) !important; } .invoice-preview.tmpl-vg10-19-bright .inv-head-left{ max-width:380px !important; padding:40px 24px 28px 44px !important; } .invoice-preview.tmpl-vg10-19-bright .inv-logo{ margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-19-bright .inv-biz-name{ display:inline-block !important; font-size:28px !important; font-weight:900 !important; letter-spacing:-.02em !important; line-height:1 !important; color:#112A36 !important; margin:0 0 10px !important; padding-bottom:8px !important; border-bottom:4px solid #F0425F !important; } .invoice-preview.tmpl-vg10-19-bright .inv-biz-contact div, .invoice-preview.tmpl-vg10-19-bright .inv-biz-address, .invoice-preview.tmpl-vg10-19-bright .inv-biz-tax{ font-size:11px !important; color:#3B4C56 !important; opacity:1 !important; line-height:1.7 !important; margin-top:0 !important; letter-spacing:.02em !important; } .invoice-preview.tmpl-vg10-19-bright .inv-biz-address{ margin-top:6px !important; } .invoice-preview.tmpl-vg10-19-bright .inv-head-right{ text-align:right !important; padding:44px 40px 26px 10px !important; } .invoice-preview.tmpl-vg10-19-bright .inv-doc-title{ display:block !important; font-size:44px !important; font-weight:900 !important; letter-spacing:.02em !important; text-transform:uppercase !important; line-height:1 !important; color:#112A36 !important; margin:0 0 12px !important; } .invoice-preview.tmpl-vg10-19-bright .inv-doc-num{ display:inline-block !important; font-size:11.5px !important; font-weight:800 !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:#FFFFFF !important; background:#112A36 !important; padding:5px 10px !important; opacity:1 !important; } .invoice-preview.tmpl-vg10-19-bright .inv-doc-po{ font-size:10.5px !important; font-weight:700 !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:#112A36 !important; opacity:1 !important; margin-top:8px !important; display:block !important; } .invoice-preview.tmpl-vg10-19-bright .inv-body{ position:relative !important; padding:26px 44px 0 !important; } .invoice-preview.tmpl-vg10-19-bright .inv-parties{ display:grid !important; grid-template-columns:minmax(0,1fr) 280px !important; gap:18px !important; padding:0 !important; margin-bottom:18px !important; border:none !important; } .invoice-preview.tmpl-vg10-19-bright .inv-bill-to{ max-width:none !important; background:#F3F4F6 !important; border-radius:8px !important; padding:16px 18px !important; } .invoice-preview.tmpl-vg10-19-bright .inv-details{ min-width:0 !important; text-align:left !important; display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:0 !important; background:transparent !important; padding:0 !important; border:1px solid #112A36 !important; border-radius:8px !important; overflow:hidden !important; } .invoice-preview.tmpl-vg10-19-bright .inv-details .inv-label{ grid-column:1 / -1 !important; margin:0 !important; padding:8px 12px !important; background:#112A36 !important; color:#FFFFFF !important; } .invoice-preview.tmpl-vg10-19-bright .inv-label{ font-size:9.5px !important; font-weight:800 !important; letter-spacing:.22em !important; text-transform:uppercase !important; color:#C7203D !important; margin-bottom:6px !important; } .invoice-preview.tmpl-vg10-19-bright .inv-client-name{ font-size:17px !important; font-weight:900 !important; color:#112A36 !important; margin-bottom:3px !important; } .invoice-preview.tmpl-vg10-19-bright .inv-bill-to div{ font-size:12.5px !important; color:#3B4C56 !important; line-height:1.65 !important; } .invoice-preview.tmpl-vg10-19-bright .inv-detail-row{ display:flex !important; flex-direction:column !important; gap:2px !important; font-size:12px !important; padding:9px 12px !important; color:#3B4C56 !important; border-bottom:1px solid #D5DBE0 !important; border-right:1px solid #D5DBE0 !important; } .invoice-preview.tmpl-vg10-19-bright .inv-detail-row:nth-child(2n+1){ border-right:none !important; } .invoice-preview.tmpl-vg10-19-bright .inv-detail-row span{ font-size:9px !important; font-weight:700 !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:#5A6B75 !important; } .invoice-preview.tmpl-vg10-19-bright .inv-detail-row b{ color:#112A36 !important; font-weight:800 !important; font-size:12.5px !important; } .invoice-preview.tmpl-vg10-19-bright .inv-table{ margin-bottom:0 !important; } .invoice-preview.tmpl-vg10-19-bright .inv-table thead tr{ background:#112A36 !important; } .invoice-preview.tmpl-vg10-19-bright .inv-table thead th{ background:#112A36 !important; color:#FFFFFF !important; font-size:10px !important; font-weight:800 !important; letter-spacing:.16em !important; text-transform:uppercase !important; padding:11px 12px !important; border:none !important; } .invoice-preview.tmpl-vg10-19-bright .inv-table tbody td{ padding:12px 12px !important; font-size:13px !important; color:#112A36 !important; border-bottom:1px solid #D5DBE0 !important; } .invoice-preview.tmpl-vg10-19-bright .td-desc{ font-weight:800 !important; } .invoice-preview.tmpl-vg10-19-bright .td-num{ color:#3B4C56 !important; } .invoice-preview.tmpl-vg10-19-bright .inv-totals{ width:340px !important; margin:16px 0 22px auto !important; } .invoice-preview.tmpl-vg10-19-bright .inv-totals>div{ font-size:13px !important; color:#3B4C56 !important; padding:6px 12px !important; border-bottom:1px solid #D5DBE0 !important; } .invoice-preview.tmpl-vg10-19-bright .inv-totals>div.inv-total-grand{ margin-top:10px !important; padding:12px 34px 12px 14px !important; border:none !important; background:linear-gradient(90deg,#112A36 0,#112A36 68%,#F0425F 68%) !important; clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%) !important; color:#FFFFFF !important; font-size:12px !important; font-weight:800 !important; letter-spacing:.16em !important; text-transform:uppercase !important; } .invoice-preview.tmpl-vg10-19-bright .inv-total-grand b{ font-size:19px !important; color:#FFFFFF !important; } .invoice-preview.tmpl-vg10-19-bright .inv-block{ background:#F3F4F6 !important; border:none !important; border-radius:8px !important; padding:14px 16px !important; margin-bottom:12px !important; } .invoice-preview.tmpl-vg10-19-bright .inv-notes{ position:relative !important; padding-left:58px !important; } .invoice-preview.tmpl-vg10-19-bright .inv-notes::before{ content:"" !important; position:absolute !important; left:16px !important; top:14px !important; width:30px !important; height:30px !important; background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTkiIGZpbGw9IiNGMDQyNUYiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTUgMTFsMTQgOS0xNCA5eiIvPjwvc3ZnPg==) center/contain no-repeat !important; } .invoice-preview.tmpl-vg10-19-bright .inv-terms{ background:transparent !important; border-radius:0 !important; border-top:1px solid #D5DBE0 !important; padding:12px 0 0 !important; } .invoice-preview.tmpl-vg10-19-bright .inv-block div{ color:#3B4C56 !important; } .invoice-preview.tmpl-vg10-19-bright .inv-signature-row{ justify-content:flex-end !important; margin-top:18px !important; padding-bottom:26px !important; } .invoice-preview.tmpl-vg10-19-bright .sig-line{ border-top:2px solid #F0425F !important; } .invoice-preview.tmpl-vg10-19-bright .sig-caption{ color:#5A6B75 !important; letter-spacing:.16em !important; text-transform:uppercase !important; font-size:9.5px !important; } .invoice-preview.tmpl-vg10-19-bright .inv-body::after{ content:"Lights. Camera. Invoice." !important; display:block !important; margin:0 -44px !important; padding:18px 44px !important; background:#112A36 !important; border-top:6px solid #F0425F !important; color:#FFFFFF !important; font-size:11px !important; font-weight:800 !important; letter-spacing:.32em !important; text-transform:uppercase !important; text-align:center !important; } /* Print: the page's own @media print tightens .inv-body/.inv-head padding to 24px, so the full-bleed bands above (drawn with a -44px margin) line up with that narrower gutter. */ @media print{ .invoice-preview.tmpl-vg10-01-cinematic .inv-body::after, .invoice-preview.tmpl-vg10-04-flatlay .inv-body::after, .invoice-preview.tmpl-vg10-05-visual .inv-body::after, .invoice-preview.tmpl-vg10-09-graphic .inv-body::after, .invoice-preview.tmpl-vg10-19-bright .inv-body::after{ margin-left:-24px !important; margin-right:-24px !important; } .invoice-preview.tmpl-vg10-15-elegant .inv-head-right{ width:calc(100% + 48px) !important; margin-left:-24px !important; margin-right:-24px !important; } } /* Phone: the page's own #invoicePreview .inv-total-grand{font-size:21px} (an id rule, so it beats every block above on the div) would otherwise be inherited by the label span and wrap "Balance due" onto two lines inside the bar. A rule matched directly on the span is not subject to that inheritance, so the label keeps its designed size at every width. */ .invoice-preview.tmpl-vg10-01-cinematic .inv-totals>div.inv-total-grand span, .invoice-preview.tmpl-vg10-03-pixel .inv-totals>div.inv-total-grand span, .invoice-preview.tmpl-vg10-04-flatlay .inv-totals>div.inv-total-grand span, .invoice-preview.tmpl-vg10-05-visual .inv-totals>div.inv-total-grand span, .invoice-preview.tmpl-vg10-08-corporate .inv-totals>div.inv-total-grand span, .invoice-preview.tmpl-vg10-09-graphic .inv-totals>div.inv-total-grand span, .invoice-preview.tmpl-vg10-13-minimal .inv-totals>div.inv-total-grand span, .invoice-preview.tmpl-vg10-14-editorial .inv-totals>div.inv-total-grand span, .invoice-preview.tmpl-vg10-15-elegant .inv-totals>div.inv-total-grand span, .invoice-preview.tmpl-vg10-19-bright .inv-totals>div.inv-total-grand span{ font-size:12px !important; }