azcomputerguru/claudetools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(cybersecurity): Restructure content for proper 2-page layout

Browse Source 
- Condense True Cost table from 6 to 3 consolidated rows
- Reduce warning checklist from 10 to 6 critical items
- Optimize spacing and font sizes for proper page fit
- Ensure page 2 has all content (tier table, case study, ROI, CTA)
- Fix page overflow issues preventing proper printing

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Mike Swanson
2026-02-01 17:41:43 -07:00
parent 59797e667b
commit a397152191
1 changed files with 68 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
projects/msp-pricing/marketing/Cybersecurity-OnePager.html
View File

@@ -11,13 +11,14 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.5; color: #33
.page { .page {
width: 8.5in; width: 8.5in;
height: 11in; height: 11in;
padding: 0.5in; padding: 0.4in;
padding-bottom: 0.75in; padding-bottom: 0.7in;
background: white; background: white;
position: relative; position: relative;
margin: 20px auto; margin: 20px auto;
box-shadow: 0 0 20px rgba(0,0,0,0.1); box-shadow: 0 0 20px rgba(0,0,0,0.1);
overflow: hidden; overflow: hidden;
page-break-after: always;
} }
@media print { @media print {
@@ -25,12 +26,13 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.5; color: #33
body { margin: 0; padding: 0; background: white; } body { margin: 0; padding: 0; background: white; }
.page { .page {
width: 100%; width: 100%;
height: 100vh; height: 11in;
margin: 0; margin: 0;
padding: 0.5in; padding: 0.4in;
padding-bottom: 0.75in; padding-bottom: 0.7in;
page-break-after: always; page-break-after: always;
box-shadow: none; box-shadow: none;
overflow: hidden;
} }
.page:last-child { page-break-after: auto; } .page:last-child { page-break-after: auto; }
} }
@@ -39,42 +41,42 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.5; color: #33
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-bottom: 10px; padding-bottom: 8px;
border-bottom: 3px solid #1e3c72; border-bottom: 3px solid #1e3c72;
margin-bottom: 12px; margin-bottom: 10px;
} }
.logo { font-size: 20px; font-weight: bold; color: #1e3c72; } .logo { font-size: 20px; font-weight: bold; color: #1e3c72; }
.contact { text-align: right; font-size: 10px; color: #666; } .contact { text-align: right; font-size: 10px; color: #666; }
.contact .phone { font-size: 14px; font-weight: bold; color: #f39c12; } .contact .phone { font-size: 14px; font-weight: bold; color: #f39c12; }
h1 { color: #1e3c72; font-size: 24px; margin-bottom: 6px; line-height: 1.2; } h1 { color: #1e3c72; font-size: 22px; margin-bottom: 4px; line-height: 1.2; }
h2 { color: #1e3c72; font-size: 16px; margin: 12px 0 8px 0; padding-bottom: 5px; border-bottom: 2px solid #f39c12; page-break-after: avoid; } 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: 13px; margin: 10px 0 5px 0; font-weight: bold; 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: 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; }
p { orphans: 3; widows: 3; } p { orphans: 3; widows: 3; }
.subtitle { font-size: 13px; color: #666; font-style: italic; margin-bottom: 10px; } .subtitle { font-size: 11px; color: #666; font-style: italic; margin-bottom: 8px; }
p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; } p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; }
.myth-reality-box { .myth-reality-box {
background: #fff3cd; background: #fff3cd;
border-left: 4px solid #f39c12; border-left: 4px solid #f39c12;
padding: 10px; padding: 8px;
margin: 10px 0; margin: 8px 0;
border-radius: 4px; border-radius: 4px;
page-break-inside: avoid; page-break-inside: avoid;
} }
.myth { font-weight: bold; color: #dc3545; font-size: 12px; margin-bottom: 6px; } .myth { font-weight: bold; color: #dc3545; font-size: 11px; margin-bottom: 4px; }
.reality { font-size: 11px; margin: 3px 0; padding-left: 15px; position: relative; } .reality { font-size: 10px; margin: 2px 0; padding-left: 15px; position: relative; }
.reality:before { content: "✓"; position: absolute; left: 0; color: #27ae60; font-weight: bold; } .reality:before { content: "✓"; position: absolute; left: 0; color: #27ae60; font-weight: bold; }
.threat-box { .threat-box {
background: #f8d7da; background: #f8d7da;
border: 2px solid #dc3545; border: 2px solid #dc3545;
border-radius: 6px; border-radius: 6px;
padding: 10px; padding: 8px;
margin: 10px 0; margin: 8px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.threat-header { .threat-header {
@@ -119,9 +121,9 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
.cost-box { .cost-box {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
color: white; color: white;
padding: 12px; padding: 10px;
border-radius: 6px; border-radius: 6px;
margin: 10px 0; margin: 8px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.cost-box h2 { .cost-box h2 {
@@ -142,10 +144,10 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
.cost-table td:first-child { font-weight: 600; } .cost-table td:first-child { font-weight: 600; }
.cost-table td:last-child { text-align: right; } .cost-table td:last-child { text-align: right; }
.cost-total { .cost-total {
font-size: 14px; font-size: 13px;
font-weight: bold; font-weight: bold;
margin-top: 8px; margin-top: 6px;
padding-top: 8px; padding-top: 6px;
border-top: 2px solid white; border-top: 2px solid white;
text-align: center; text-align: center;
} }
@@ -188,48 +190,48 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
.protection-layer { .protection-layer {
background: #d4edda; background: #d4edda;
border-left: 4px solid #27ae60; border-left: 4px solid #27ae60;
padding: 10px; padding: 8px;
margin: 10px 0; margin: 8px 0;
border-radius: 4px; border-radius: 4px;
page-break-inside: avoid; page-break-inside: avoid;
} }
.layer-header { .layer-header {
font-size: 13px; font-size: 12px;
font-weight: bold; font-weight: bold;
color: #27ae60; color: #27ae60;
margin-bottom: 6px; margin-bottom: 4px;
} }
.feature-item { .feature-item {
margin: 6px 0; margin: 4px 0;
} }
.feature-name { .feature-name {
font-weight: bold; font-weight: bold;
color: #1e3c72; color: #1e3c72;
font-size: 11px; font-size: 10px;
} }
.feature-desc { .feature-desc {
font-size: 10px; font-size: 9px;
margin-left: 15px; margin-left: 12px;
color: #666; color: #666;
} }
.comparison-table { .comparison-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin: 10px 0; margin: 8px 0;
font-size: 9px; font-size: 8px;
page-break-inside: avoid; page-break-inside: avoid;
} }
.comparison-table th { .comparison-table th {
background: #1e3c72; background: #1e3c72;
color: white; color: white;
padding: 6px 4px; padding: 5px 3px;
text-align: center; text-align: center;
font-size: 10px; font-size: 9px;
border: 1px solid white; border: 1px solid white;
} }
.comparison-table td { .comparison-table td {
padding: 5px 4px; padding: 4px 3px;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
text-align: center; text-align: center;
} }
@@ -251,25 +253,25 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
background: white; background: white;
border: 3px solid #27ae60; border: 3px solid #27ae60;
border-radius: 8px; border-radius: 8px;
padding: 12px; padding: 10px;
margin: 10px 0; margin: 8px 0;
box-shadow: 0 4px 10px rgba(0,0,0,0.1); box-shadow: 0 4px 10px rgba(0,0,0,0.1);
page-break-inside: avoid; page-break-inside: avoid;
} }
.case-study-header { .case-study-header {
background: #27ae60; background: #27ae60;
color: white; color: white;
padding: 8px; padding: 6px;
margin: -12px -12px 10px -12px; margin: -10px -10px 8px -10px;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
font-size: 13px; font-size: 11px;
font-weight: bold; font-weight: bold;
} }
.case-outcome { .case-outcome {
background: #d4edda; background: #d4edda;
padding: 8px; padding: 6px;
border-radius: 4px; border-radius: 4px;
margin: 8px 0; margin: 6px 0;
} }
.case-outcome h4 { .case-outcome h4 {
color: #27ae60; color: #27ae60;
@@ -279,9 +281,9 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
.roi-calculator { .roi-calculator {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white; color: white;
padding: 12px; padding: 10px;
border-radius: 8px; border-radius: 8px;
margin: 10px 0; margin: 8px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.roi-calculator h2 { .roi-calculator h2 {
@@ -291,12 +293,12 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
.roi-grid { .roi-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 12px; gap: 8px;
margin: 10px 0; margin: 8px 0;
} }
.roi-card { .roi-card {
background: rgba(255,255,255,0.15); background: rgba(255,255,255,0.15);
padding: 10px; padding: 8px;
border-radius: 6px; border-radius: 6px;
} }
.roi-card h4 { .roi-card h4 {
@@ -324,8 +326,8 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
background: #d1ecf1; background: #d1ecf1;
border: 2px solid #17a2b8; border: 2px solid #17a2b8;
border-radius: 8px; border-radius: 8px;
padding: 12px; padding: 10px;
margin: 10px 0; margin: 8px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.assessment-box h3 { .assessment-box h3 {
@@ -355,10 +357,10 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
.cta-box { .cta-box {
background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
color: white; color: white;
padding: 15px; padding: 12px;
border-radius: 8px; border-radius: 8px;
text-align: center; text-align: center;
margin: 12px 0; margin: 8px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.cta-box h2 { .cta-box h2 {
@@ -368,9 +370,9 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
font-size: 16px; font-size: 16px;
} }
.phone-large { .phone-large {
font-size: 24px; font-size: 20px;
font-weight: bold; font-weight: bold;
margin: 8px 0; margin: 6px 0;
} }
.cta-box p { .cta-box p {
font-size: 12px; font-size: 12px;
@@ -393,8 +395,8 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
background: #fff3cd; background: #fff3cd;
border: 2px solid #f39c12; border: 2px solid #f39c12;
border-radius: 8px; border-radius: 8px;
padding: 12px; padding: 10px;
margin: 10px 0; margin: 8px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.offer-box h3 { .offer-box h3 {
@@ -423,11 +425,11 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
.footer { .footer {
position: absolute; position: absolute;
bottom: 0.4in; bottom: 0.3in;
left: 0.5in; left: 0.4in;
right: 0.5in; right: 0.4in;
text-align: center; text-align: center;
padding-top: 8px; padding-top: 6px;
border-top: 2px solid #1e3c72; border-top: 2px solid #1e3c72;
color: #666; color: #666;
font-size: 9px; font-size: 9px;
@@ -544,30 +546,23 @@ Former employee still has access. Disgruntled employee sells credentials.
<div class="cost-box"> <div class="cost-box">
<h2>The True Cost of a Breach</h2> <h2>The True Cost of a Breach</h2>
<table class="cost-table"> <table class="cost-table">
<tr><td>Forensic Investigation</td><td>$10,000-$50,000</td></tr> <tr><td>Direct Costs (Forensics, Legal, Notification)</td><td>$30,000-$170,000</td></tr>
<tr><td>Legal Fees</td><td>$15,000-$100,000</td></tr> <tr><td>Downtime Costs (Lost Productivity & Revenue)</td><td>$75,000-$600,000</td></tr>
<tr><td>Notification & Credit Monitoring</td><td>$5,000-$20,000</td></tr> <tr><td>Regulatory Fines (HIPAA, PCI-DSS)</td><td>$55,000-$100,000</td></tr>
<tr><td>Lost Productivity</td><td>$25,000-$100,000</td></tr>
<tr><td>Lost Revenue (downtime)</td><td>$50,000-$500,000</td></tr>
<tr><td>Regulatory Fines (HIPAA/PCI)</td><td>$50,000+</td></tr>
</table> </table>
<div class="cost-total">TOTAL TYPICAL BREACH: $120,000-$1,240,000</div> <div class="cost-total">TOTAL TYPICAL BREACH: $120,000-$1,240,000</div>
</div> </div>
<h2>Warning Signs You're At Risk</h2> <h2>Warning Signs You're At Risk</h2>
<ul class="checklist"> <ul class="checklist">
<li>Using Windows 7 or older systems</li> <li>Using outdated systems (Windows 7, Server 2012)</li>
<li>No centralized patch management</li> <li>No centralized patch management</li>
<li>Employees use personal email for work</li>
<li>No multi-factor authentication (MFA)</li> <li>No multi-factor authentication (MFA)</li>
<li>Passwords shared via text/email</li> <li>Passwords shared via text/email</li>
<li>No email security filtering</li> <li>No email security filtering</li>
<li>No endpoint security (or just basic antivirus)</li>
<li>No backup or disaster recovery plan</li> <li>No backup or disaster recovery plan</li>
<li>No security awareness training</li>
<li>IT handled by "someone's nephew"</li>
</ul> </ul>
<div class="risk-score-box">If 3+ boxes checked: YOU'RE AT HIGH RISK</div> <div class="risk-score-box">If 2+ boxes checked: YOU'RE AT HIGH RISK</div>
<div class="footer">Protecting Tucson Businesses Since 2001 | Turn over to see how GPS protects your business</div> <div class="footer">Protecting Tucson Businesses Since 2001 | Turn over to see how GPS protects your business</div>
</div> </div>