fix(cybersecurity): Restructure content for proper 2-page layout
- 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:
@@ -11,13 +11,14 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.5; color: #33
|
||||
.page {
|
||||
width: 8.5in;
|
||||
height: 11in;
|
||||
padding: 0.5in;
|
||||
padding-bottom: 0.75in;
|
||||
padding: 0.4in;
|
||||
padding-bottom: 0.7in;
|
||||
background: white;
|
||||
position: relative;
|
||||
margin: 20px auto;
|
||||
box-shadow: 0 0 20px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
@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; }
|
||||
.page {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 11in;
|
||||
margin: 0;
|
||||
padding: 0.5in;
|
||||
padding-bottom: 0.75in;
|
||||
padding: 0.4in;
|
||||
padding-bottom: 0.7in;
|
||||
page-break-after: always;
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 3px solid #1e3c72;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.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; }
|
||||
|
||||
h1 { color: #1e3c72; font-size: 24px; margin-bottom: 6px; 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; }
|
||||
h3 { color: #1e3c72; font-size: 13px; margin: 10px 0 5px 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; }
|
||||
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; }
|
||||
|
||||
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 {
|
||||
background: #fff3cd;
|
||||
border-left: 4px solid #f39c12;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
padding: 8px;
|
||||
margin: 8px 0;
|
||||
border-radius: 4px;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.myth { font-weight: bold; color: #dc3545; font-size: 12px; margin-bottom: 6px; }
|
||||
.reality { font-size: 11px; margin: 3px 0; padding-left: 15px; position: relative; }
|
||||
.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; }
|
||||
|
||||
.threat-box {
|
||||
background: #f8d7da;
|
||||
border: 2px solid #dc3545;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
padding: 8px;
|
||||
margin: 8px 0;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.threat-header {
|
||||
@@ -119,9 +121,9 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
|
||||
.cost-box {
|
||||
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
|
||||
color: white;
|
||||
padding: 12px;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
margin: 10px 0;
|
||||
margin: 8px 0;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.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:last-child { text-align: right; }
|
||||
.cost-total {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
margin-top: 6px;
|
||||
padding-top: 6px;
|
||||
border-top: 2px solid white;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -188,48 +190,48 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
|
||||
.protection-layer {
|
||||
background: #d4edda;
|
||||
border-left: 4px solid #27ae60;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
padding: 8px;
|
||||
margin: 8px 0;
|
||||
border-radius: 4px;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.layer-header {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #27ae60;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.feature-item {
|
||||
margin: 6px 0;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.feature-name {
|
||||
font-weight: bold;
|
||||
color: #1e3c72;
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.feature-desc {
|
||||
font-size: 10px;
|
||||
margin-left: 15px;
|
||||
font-size: 9px;
|
||||
margin-left: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 10px 0;
|
||||
font-size: 9px;
|
||||
margin: 8px 0;
|
||||
font-size: 8px;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.comparison-table th {
|
||||
background: #1e3c72;
|
||||
color: white;
|
||||
padding: 6px 4px;
|
||||
padding: 5px 3px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
font-size: 9px;
|
||||
border: 1px solid white;
|
||||
}
|
||||
.comparison-table td {
|
||||
padding: 5px 4px;
|
||||
padding: 4px 3px;
|
||||
border: 1px solid #e0e0e0;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -251,25 +253,25 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
|
||||
background: white;
|
||||
border: 3px solid #27ae60;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
margin: 8px 0;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.case-study-header {
|
||||
background: #27ae60;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
margin: -12px -12px 10px -12px;
|
||||
padding: 6px;
|
||||
margin: -10px -10px 8px -10px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
font-size: 13px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.case-outcome {
|
||||
background: #d4edda;
|
||||
padding: 8px;
|
||||
padding: 6px;
|
||||
border-radius: 4px;
|
||||
margin: 8px 0;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.case-outcome h4 {
|
||||
color: #27ae60;
|
||||
@@ -279,9 +281,9 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
|
||||
.roi-calculator {
|
||||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
|
||||
color: white;
|
||||
padding: 12px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
margin: 10px 0;
|
||||
margin: 8px 0;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.roi-calculator h2 {
|
||||
@@ -291,12 +293,12 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
|
||||
.roi-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin: 10px 0;
|
||||
gap: 8px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.roi-card {
|
||||
background: rgba(255,255,255,0.15);
|
||||
padding: 10px;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.roi-card h4 {
|
||||
@@ -324,8 +326,8 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
|
||||
background: #d1ecf1;
|
||||
border: 2px solid #17a2b8;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
margin: 8px 0;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.assessment-box h3 {
|
||||
@@ -355,10 +357,10 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
|
||||
.cta-box {
|
||||
background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
|
||||
color: white;
|
||||
padding: 15px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
margin: 12px 0;
|
||||
margin: 8px 0;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.cta-box h2 {
|
||||
@@ -368,9 +370,9 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
|
||||
font-size: 16px;
|
||||
}
|
||||
.phone-large {
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin: 8px 0;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.cta-box p {
|
||||
font-size: 12px;
|
||||
@@ -393,8 +395,8 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
|
||||
background: #fff3cd;
|
||||
border: 2px solid #f39c12;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
margin: 8px 0;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
.offer-box h3 {
|
||||
@@ -423,11 +425,11 @@ p { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0.4in;
|
||||
left: 0.5in;
|
||||
right: 0.5in;
|
||||
bottom: 0.3in;
|
||||
left: 0.4in;
|
||||
right: 0.4in;
|
||||
text-align: center;
|
||||
padding-top: 8px;
|
||||
padding-top: 6px;
|
||||
border-top: 2px solid #1e3c72;
|
||||
color: #666;
|
||||
font-size: 9px;
|
||||
@@ -544,30 +546,23 @@ Former employee still has access. Disgruntled employee sells credentials.
|
||||
<div class="cost-box">
|
||||
<h2>The True Cost of a Breach</h2>
|
||||
<table class="cost-table">
|
||||
<tr><td>Forensic Investigation</td><td>$10,000-$50,000</td></tr>
|
||||
<tr><td>Legal Fees</td><td>$15,000-$100,000</td></tr>
|
||||
<tr><td>Notification & Credit Monitoring</td><td>$5,000-$20,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>
|
||||
<tr><td>Direct Costs (Forensics, Legal, Notification)</td><td>$30,000-$170,000</td></tr>
|
||||
<tr><td>Downtime Costs (Lost Productivity & Revenue)</td><td>$75,000-$600,000</td></tr>
|
||||
<tr><td>Regulatory Fines (HIPAA, PCI-DSS)</td><td>$55,000-$100,000</td></tr>
|
||||
</table>
|
||||
<div class="cost-total">TOTAL TYPICAL BREACH: $120,000-$1,240,000</div>
|
||||
</div>
|
||||
|
||||
<h2>Warning Signs You're At Risk</h2>
|
||||
<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>Employees use personal email for work</li>
|
||||
<li>No multi-factor authentication (MFA)</li>
|
||||
<li>Passwords shared via text/email</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 security awareness training</li>
|
||||
<li>IT handled by "someone's nephew"</li>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user