diff --git a/projects/msp-pricing/marketing/Cybersecurity-OnePager.html b/projects/msp-pricing/marketing/Cybersecurity-OnePager.html index c21d85b..b0acaf5 100644 --- a/projects/msp-pricing/marketing/Cybersecurity-OnePager.html +++ b/projects/msp-pricing/marketing/Cybersecurity-OnePager.html @@ -11,8 +11,8 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.5; color: #33 .page { width: 8.5in; height: 11in; - padding: 0.4in; - padding-bottom: 0.7in; + padding: 0.6in; + padding-bottom: 0.8in; background: white; position: relative; margin: 20px auto; @@ -28,8 +28,8 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.5; color: #33 width: 100%; height: 11in; margin: 0; - padding: 0.4in; - padding-bottom: 0.7in; + padding: 0.6in; + padding-bottom: 0.8in; page-break-after: always; box-shadow: none; overflow: hidden; @@ -41,53 +41,53 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.5; color: #33 display: flex; justify-content: space-between; align-items: center; - padding-bottom: 8px; + padding-bottom: 12px; border-bottom: 3px solid #1e3c72; - margin-bottom: 10px; + margin-bottom: 16px; } -.logo { font-size: 20px; font-weight: bold; color: #1e3c72; } -.contact { text-align: right; font-size: 10px; color: #666; } -.contact .phone { font-size: 14px; font-weight: bold; color: #f39c12; } +.logo { font-size: 22px; font-weight: bold; color: #1e3c72; } +.contact { text-align: right; font-size: 11px; color: #666; } +.contact .phone { font-size: 16px; font-weight: bold; color: #f39c12; } -h1 { color: #1e3c72; font-size: 22px; margin-bottom: 4px; line-height: 1.2; } -h2 { color: #1e3c72; font-size: 15px; margin: 10px 0 6px 0; padding-bottom: 4px; border-bottom: 2px solid #f39c12; page-break-after: avoid; } -h3 { color: #1e3c72; font-size: 12px; margin: 8px 0 4px 0; font-weight: bold; page-break-after: avoid; } -h4 { color: #dc3545; font-size: 11px; margin: 6px 0 3px 0; font-weight: bold; page-break-after: avoid; } +h1 { color: #1e3c72; font-size: 26px; margin-bottom: 6px; line-height: 1.2; } +h2 { color: #1e3c72; font-size: 18px; margin: 15px 0 9px 0; padding-bottom: 4px; border-bottom: 2px solid #f39c12; page-break-after: avoid; } +h3 { color: #1e3c72; font-size: 14px; margin: 9px 0 5px 0; font-weight: bold; page-break-after: avoid; } +h4 { color: #dc3545; font-size: 12px; margin: 7px 0 4px 0; font-weight: bold; page-break-after: avoid; } p { orphans: 3; widows: 3; } -.subtitle { font-size: 11px; color: #666; font-style: italic; margin-bottom: 8px; } +.subtitle { font-size: 12px; color: #666; font-style: italic; margin-bottom: 9px; } -p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; } +p { font-size: 12px; margin-bottom: 8px; line-height: 1.5; } .myth-reality-box { background: #fff3cd; border-left: 4px solid #f39c12; - padding: 8px; - margin: 8px 0; + padding: 10px; + margin: 10px 0; border-radius: 4px; page-break-inside: avoid; } -.myth { font-weight: bold; color: #dc3545; font-size: 11px; margin-bottom: 4px; } -.reality { font-size: 10px; margin: 2px 0; padding-left: 15px; position: relative; } -.reality:before { content: "✓"; position: absolute; left: 0; color: #27ae60; font-weight: bold; } +.myth { font-weight: bold; color: #dc3545; font-size: 13px; margin-bottom: 5px; } +.reality { font-size: 12px; margin: 3px 0; padding-left: 18px; position: relative; line-height: 1.5; } +.reality:before { content: "✓"; position: absolute; left: 0; color: #27ae60; font-weight: bold; font-size: 14px; } .threat-box { background: #f8d7da; border: 2px solid #dc3545; border-radius: 6px; - padding: 8px; - margin: 8px 0; + padding: 10px; + margin: 10px 0; page-break-inside: avoid; } .threat-header { display: flex; align-items: center; - gap: 8px; - margin-bottom: 6px; + gap: 10px; + margin-bottom: 7px; } .threat-icon { - width: 24px; - height: 24px; + width: 28px; + height: 28px; background: #dc3545; color: white; border-radius: 50%; @@ -95,35 +95,36 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; } align-items: center; justify-content: center; font-weight: bold; - font-size: 14px; + font-size: 16px; } .threat-title { - font-size: 13px; + font-size: 14px; font-weight: bold; color: #dc3545; } -.threat-content { font-size: 10px; margin: 4px 0; } +.threat-content { font-size: 12px; margin: 5px 0; line-height: 1.5; } .threat-example { background: rgba(220, 53, 69, 0.1); - padding: 6px; - margin: 6px 0; + padding: 8px; + margin: 7px 0; border-radius: 3px; - font-size: 10px; + font-size: 11px; font-style: italic; + line-height: 1.5; } .threat-stats { - font-size: 10px; + font-size: 11px; font-weight: bold; color: #dc3545; - margin-top: 4px; + margin-top: 5px; } .cost-box { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); color: white; - padding: 10px; + padding: 12px; border-radius: 6px; - margin: 8px 0; + margin: 10px 0; page-break-inside: avoid; } .cost-box h2 { @@ -133,46 +134,48 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; } } .cost-table { width: 100%; - margin: 8px 0; + margin: 10px 0; border-collapse: collapse; - font-size: 10px; + font-size: 12px; } .cost-table td { - padding: 4px; + padding: 5px; border-bottom: 1px solid rgba(255,255,255,0.3); + line-height: 1.5; } .cost-table td:first-child { font-weight: 600; } .cost-table td:last-child { text-align: right; } .cost-total { - font-size: 13px; + font-size: 14px; font-weight: bold; - margin-top: 6px; - padding-top: 6px; + margin-top: 8px; + padding-top: 8px; border-top: 2px solid white; text-align: center; } .checklist { columns: 2; - column-gap: 15px; + column-gap: 20px; list-style: none; padding: 0; - margin: 8px 0; + margin: 10px 0; page-break-inside: avoid; } .checklist li { - padding: 3px 0; - padding-left: 18px; + padding: 4px 0; + padding-left: 20px; position: relative; - font-size: 10px; + font-size: 12px; break-inside: avoid; + line-height: 1.5; } .checklist li:before { content: "☐"; position: absolute; left: 0; color: #dc3545; - font-size: 12px; + font-size: 14px; } .risk-score-box { @@ -190,48 +193,49 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; } .protection-layer { background: #d4edda; border-left: 4px solid #27ae60; - padding: 8px; - margin: 8px 0; + padding: 10px; + margin: 10px 0; border-radius: 4px; page-break-inside: avoid; } .layer-header { - font-size: 12px; + font-size: 14px; font-weight: bold; color: #27ae60; - margin-bottom: 4px; + margin-bottom: 6px; } .feature-item { - margin: 4px 0; + margin: 6px 0; } .feature-name { font-weight: bold; color: #1e3c72; - font-size: 10px; + font-size: 12px; } .feature-desc { - font-size: 9px; - margin-left: 12px; + font-size: 11px; + margin-left: 14px; color: #666; + line-height: 1.5; } .comparison-table { width: 100%; border-collapse: collapse; - margin: 8px 0; - font-size: 8px; + margin: 10px 0; + font-size: 10px; page-break-inside: avoid; } .comparison-table th { background: #1e3c72; color: white; - padding: 5px 3px; + padding: 6px 4px; text-align: center; - font-size: 9px; + font-size: 10px; border: 1px solid white; } .comparison-table td { - padding: 4px 3px; + padding: 5px 4px; border: 1px solid #e0e0e0; text-align: center; } @@ -246,44 +250,47 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; } text-align: left; color: #1e3c72; } -.checkmark { color: #27ae60; font-weight: bold; font-size: 14px; } +.checkmark { color: #27ae60; font-weight: bold; font-size: 16px; } .dash { color: #999; } .case-study-box { background: white; border: 3px solid #27ae60; border-radius: 8px; - padding: 10px; - margin: 8px 0; + padding: 12px; + margin: 10px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.1); page-break-inside: avoid; } .case-study-header { background: #27ae60; color: white; - padding: 6px; - margin: -10px -10px 8px -10px; + padding: 8px; + margin: -12px -12px 10px -12px; border-radius: 5px 5px 0 0; - font-size: 11px; + font-size: 13px; font-weight: bold; } .case-outcome { background: #d4edda; - padding: 6px; + padding: 8px; border-radius: 4px; - margin: 6px 0; + margin: 8px 0; } .case-outcome h4 { color: #27ae60; - margin: 0 0 4px 0; + margin: 0 0 5px 0; +} +.case-outcome p { + line-height: 1.5; } .roi-calculator { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: white; - padding: 10px; + padding: 12px; border-radius: 8px; - margin: 8px 0; + margin: 10px 0; page-break-inside: avoid; } .roi-calculator h2 { @@ -293,31 +300,32 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; } .roi-grid { display: grid; grid-template-columns: 1fr 1fr; - gap: 8px; - margin: 8px 0; + gap: 10px; + margin: 10px 0; } .roi-card { background: rgba(255,255,255,0.15); - padding: 8px; + padding: 10px; border-radius: 6px; } .roi-card h4 { color: white; - margin: 0 0 6px 0; - font-size: 11px; + margin: 0 0 7px 0; + font-size: 12px; } .roi-breakdown { - font-size: 10px; + font-size: 11px; font-family: 'Courier New', monospace; + line-height: 1.5; } .roi-breakdown div { - margin: 2px 0; + margin: 3px 0; } .roi-total { - font-size: 14px; + font-size: 15px; font-weight: bold; - margin-top: 8px; - padding-top: 8px; + margin-top: 10px; + padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.3); text-align: center; } @@ -326,8 +334,8 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; } background: #d1ecf1; border: 2px solid #17a2b8; border-radius: 8px; - padding: 10px; - margin: 8px 0; + padding: 12px; + margin: 10px 0; page-break-inside: avoid; } .assessment-box h3 { @@ -337,13 +345,14 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; } .assessment-list { list-style: none; padding: 0; - margin: 8px 0; + margin: 10px 0; } .assessment-list li { padding: 4px 0; - padding-left: 20px; + padding-left: 22px; position: relative; - font-size: 10px; + font-size: 12px; + line-height: 1.5; } .assessment-list li:before { content: "✓"; @@ -351,32 +360,32 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; } left: 0; color: #17a2b8; font-weight: bold; - font-size: 12px; + font-size: 14px; } .cta-box { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; padding: 12px; - border-radius: 8px; + border-radius: 6px; text-align: center; - margin: 8px 0; + margin: 10px 0; page-break-inside: avoid; } .cta-box h2 { color: white; border: none; - margin: 0 0 8px 0; + margin: 0 0 5px 0; font-size: 16px; } .phone-large { - font-size: 20px; + font-size: 18px; font-weight: bold; - margin: 6px 0; + margin: 5px 0; } .cta-box p { - font-size: 12px; - margin: 5px 0; + font-size: 11px; + margin: 3px 0; } .guarantee-box { @@ -395,8 +404,8 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; } background: #fff3cd; border: 2px solid #f39c12; border-radius: 8px; - padding: 10px; - margin: 8px 0; + padding: 12px; + margin: 10px 0; page-break-inside: avoid; } .offer-box h3 { @@ -406,13 +415,14 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; } .offer-list { list-style: none; padding: 0; - margin: 8px 0; + margin: 10px 0; } .offer-list li { - padding: 3px 0; - padding-left: 20px; + padding: 4px 0; + padding-left: 22px; position: relative; - font-size: 11px; + font-size: 12px; + line-height: 1.5; } .offer-list li:before { content: "[OK]"; @@ -420,14 +430,14 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; } left: 0; color: #27ae60; font-weight: bold; - font-size: 9px; + font-size: 10px; } .footer { position: absolute; bottom: 0.3in; - left: 0.4in; - right: 0.4in; + left: 0.6in; + right: 0.6in; text-align: center; padding-top: 6px; border-top: 2px solid #1e3c72; @@ -439,16 +449,17 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; } .two-column { display: grid; grid-template-columns: 1fr 1fr; - gap: 12px; + gap: 15px; } ul.bullet-list { - margin: 5px 0; - padding-left: 15px; - font-size: 10px; + margin: 8px 0; + padding-left: 18px; + font-size: 12px; } ul.bullet-list li { - margin: 2px 0; + margin: 3px 0; + line-height: 1.5; } diff --git a/projects/msp-pricing/marketing/MSP-Buyers-Guide.html b/projects/msp-pricing/marketing/MSP-Buyers-Guide.html index a46418a..721144c 100644 --- a/projects/msp-pricing/marketing/MSP-Buyers-Guide.html +++ b/projects/msp-pricing/marketing/MSP-Buyers-Guide.html @@ -11,8 +11,8 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.6; color: #33 .page { width: 8.5in; height: 11in; - padding: 0.5in; - padding-bottom: 0.75in; + padding: 0.6in; + padding-bottom: 0.8in; background: white; position: relative; margin: 20px auto; @@ -25,12 +25,13 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.6; color: #33 body { margin: 0; padding: 0; background: white; } .page { width: 100%; - height: 100vh; + height: 11in; margin: 0; - padding: 0.5in; - padding-bottom: 0.75in; + padding: 0.6in; + padding-bottom: 0.8in; page-break-after: always; box-shadow: none; + overflow: hidden; } .page:last-child { page-break-after: auto; } } @@ -39,46 +40,47 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.6; color: #33 display: flex; justify-content: space-between; align-items: center; - padding-bottom: 10px; + padding-bottom: 12px; border-bottom: 3px solid #1e3c72; - margin-bottom: 15px; + margin-bottom: 16px; } -.logo { font-size: 20px; font-weight: bold; color: #1e3c72; } -.contact { text-align: right; font-size: 10px; color: #666; } -.contact .phone { font-size: 14px; font-weight: bold; color: #f39c12; } +.logo { font-size: 22px; font-weight: bold; color: #1e3c72; } +.contact { text-align: right; font-size: 11px; color: #666; } +.contact .phone { font-size: 16px; font-weight: bold; color: #f39c12; } -h1 { color: #1e3c72; font-size: 28px; margin-bottom: 8px; line-height: 1.2; } -h2 { color: #1e3c72; font-size: 18px; margin: 15px 0 10px 0; padding-bottom: 5px; border-bottom: 2px solid #f39c12; page-break-after: avoid; } -h3 { color: #1e3c72; font-size: 13px; margin: 10px 0 5px 0; font-weight: bold; page-break-after: avoid; } +h1 { color: #1e3c72; font-size: 26px; margin-bottom: 6px; line-height: 1.2; } +h2 { color: #1e3c72; font-size: 18px; margin: 15px 0 9px 0; padding-bottom: 4px; border-bottom: 2px solid #f39c12; page-break-after: avoid; } +h3 { color: #1e3c72; font-size: 14px; margin: 9px 0 5px 0; font-weight: bold; page-break-after: avoid; } p { orphans: 3; widows: 3; } -.subtitle { font-size: 14px; color: #666; font-style: italic; margin-bottom: 12px; } +.subtitle { font-size: 12px; color: #666; font-style: italic; margin-bottom: 9px; } -p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; } +p { font-size: 12px; margin-bottom: 8px; line-height: 1.5; } .checklist { list-style: none; padding: 0; margin: 10px 0; } -.checklist li { padding: 3px 0; padding-left: 20px; position: relative; font-size: 12px; } +.checklist li { padding: 4px 0; padding-left: 20px; position: relative; font-size: 12px; } .checklist li:before { content: "☐"; position: absolute; left: 0; color: #1e3c72; font-size: 14px; } .red-flag-box { background: #fff3cd; border-left: 4px solid #f39c12; - padding: 8px; - margin: 8px 0; + padding: 10px; + margin: 10px 0; border-radius: 3px; page-break-inside: avoid; } -.red-flag-box h3 { margin-top: 0; color: #f39c12; font-size: 13px; } -.red-flag-box .section { margin: 6px 0; font-size: 10px; } -.red-flag-box .section strong { display: block; margin-bottom: 2px; color: #333; } +.red-flag-box h3 { margin-top: 0; color: #f39c12; font-size: 14px; } +.red-flag-box .section { margin: 7px 0; font-size: 11px; line-height: 1.5; } +.red-flag-box .section strong { display: block; margin-bottom: 3px; color: #333; } .key-question-box { background: #d1ecf1; border-left: 4px solid #17a2b8; - padding: 6px 8px; - margin: 6px 0; + padding: 8px 10px; + margin: 8px 0; border-radius: 3px; - font-size: 10px; + font-size: 11px; + line-height: 1.5; page-break-inside: avoid; } .key-question-box strong { color: #17a2b8; } @@ -86,10 +88,11 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; } .good-answer-box { background: #d4edda; border-left: 4px solid #27ae60; - padding: 6px 8px; - margin: 6px 0; + padding: 8px 10px; + margin: 8px 0; border-radius: 3px; - font-size: 10px; + font-size: 11px; + line-height: 1.5; page-break-inside: avoid; } .good-answer-box strong { color: #27ae60; } @@ -98,18 +101,18 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; } width: 100%; border-collapse: collapse; margin: 10px 0; - font-size: 11px; + font-size: 12px; page-break-inside: avoid; } .pricing-table th { background: #1e3c72; color: white; - padding: 6px; + padding: 7px; text-align: left; font-weight: 600; } .pricing-table td { - padding: 5px 6px; + padding: 6px 7px; border-bottom: 1px solid #e0e0e0; } @@ -117,27 +120,27 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; } background: #f8f9fa; border: 2px solid #1e3c72; border-radius: 6px; - padding: 10px; - margin: 10px 0; + padding: 12px; + margin: 12px 0; page-break-inside: avoid; } .example-header { - font-size: 13px; + font-size: 14px; font-weight: bold; color: #1e3c72; - margin-bottom: 5px; + margin-bottom: 6px; } .cost-line { display: flex; justify-content: space-between; - font-size: 11px; - padding: 2px 0; + font-size: 12px; + padding: 3px 0; font-family: 'Courier New', monospace; } .cost-line.total { border-top: 2px solid #1e3c72; - margin-top: 5px; - padding-top: 5px; + margin-top: 6px; + padding-top: 6px; font-weight: bold; color: #1e3c72; } @@ -145,19 +148,20 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; } .testimonial-box { background: white; border-left: 4px solid #27ae60; - padding: 10px; - margin: 10px 0; + padding: 12px; + margin: 12px 0; font-style: italic; - font-size: 11px; + font-size: 12px; + line-height: 1.5; box-shadow: 0 2px 5px rgba(0,0,0,0.05); page-break-inside: avoid; } .testimonial-box .author { - margin-top: 5px; + margin-top: 6px; font-style: normal; font-weight: bold; color: #666; - font-size: 10px; + font-size: 11px; } .cover-page { @@ -207,11 +211,11 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; } .footer { position: absolute; - bottom: 0.4in; - left: 0.5in; - right: 0.5in; + bottom: 0.3in; + left: 0.6in; + right: 0.6in; text-align: center; - padding-top: 8px; + padding-top: 6px; border-top: 2px solid #1e3c72; color: #666; font-size: 9px; @@ -224,10 +228,11 @@ ul.feature-list { margin: 8px 0; } ul.feature-list li { - padding: 2px 0; - padding-left: 18px; + padding: 3px 0; + padding-left: 20px; position: relative; - font-size: 11px; + font-size: 12px; + line-height: 1.5; } ul.feature-list li:before { content: "✓"; @@ -235,31 +240,32 @@ ul.feature-list li:before { left: 0; color: #27ae60; font-weight: bold; + font-size: 14px; } .cta-box { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; - padding: 15px; - border-radius: 8px; + padding: 12px; + border-radius: 6px; text-align: center; - margin: 15px 0; + margin: 10px 0; page-break-inside: avoid; } .cta-box h2 { color: white; border: none; - margin: 0 0 8px 0; + margin: 0 0 5px 0; font-size: 16px; } .cta-box .phone-large { - font-size: 24px; + font-size: 18px; font-weight: bold; - margin: 8px 0; + margin: 5px 0; } .cta-box p { - font-size: 12px; - margin: 5px 0; + font-size: 11px; + margin: 3px 0; }