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

refactor(marketing): Apply comfortable spacing to MSP Buyers Guide and Cybersecurity OnePager

Browse Source 
Applied same professional layout improvements as Service Overview:

Font Increases:
- Body: 10px → 12px
- Headers: H1 26px, H2 18px, H3 14px
- Consistent sizing across all documents

Spacing Improvements:
- Page padding: 0.4-0.5in → 0.6in
- Line-height: increased to 1.5
- Margins: increased 25-50%
- Box padding: increased 30-50%
- Grid gaps: 10-20px

Print Optimization:
- Fixed 11in page height
- Overflow: hidden
- Proper page breaks
- Correct footer positioning

Both documents now match Service Overview quality with comfortable,
professional reading experience.
This commit is contained in:
Mike Swanson
2026-02-01 20:03:50 -07:00
parent cd2592fc2a
commit 833708ab6f
2 changed files with 184 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,8 +11,8 @@ 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.4in; padding: 0.6in;
padding-bottom: 0.7in; padding-bottom: 0.8in;
background: white; background: white;
position: relative; position: relative;
margin: 20px auto; margin: 20px auto;
@@ -28,8 +28,8 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.5; color: #33
width: 100%; width: 100%;
height: 11in; height: 11in;
margin: 0; margin: 0;
padding: 0.4in; padding: 0.6in;
padding-bottom: 0.7in; padding-bottom: 0.8in;
page-break-after: always; page-break-after: always;
box-shadow: none; box-shadow: none;
overflow: hidden; overflow: hidden;
@@ -41,53 +41,53 @@ 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: 8px; padding-bottom: 12px;
border-bottom: 3px solid #1e3c72; border-bottom: 3px solid #1e3c72;
margin-bottom: 10px; margin-bottom: 16px;
} }
.logo { font-size: 20px; font-weight: bold; color: #1e3c72; } .logo { font-size: 22px; font-weight: bold; color: #1e3c72; }
.contact { text-align: right; font-size: 10px; color: #666; } .contact { text-align: right; font-size: 11px; color: #666; }
.contact .phone { font-size: 14px; font-weight: bold; color: #f39c12; } .contact .phone { font-size: 16px; font-weight: bold; color: #f39c12; }
h1 { color: #1e3c72; font-size: 22px; margin-bottom: 4px; line-height: 1.2; } h1 { color: #1e3c72; font-size: 26px; margin-bottom: 6px; 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; } 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: 12px; margin: 8px 0 4px 0; font-weight: bold; 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: 11px; margin: 6px 0 3px 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; } 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 { .myth-reality-box {
background: #fff3cd; background: #fff3cd;
border-left: 4px solid #f39c12; border-left: 4px solid #f39c12;
padding: 8px; padding: 10px;
margin: 8px 0; margin: 10px 0;
border-radius: 4px; border-radius: 4px;
page-break-inside: avoid; page-break-inside: avoid;
} }
.myth { font-weight: bold; color: #dc3545; font-size: 11px; margin-bottom: 4px; } .myth { font-weight: bold; color: #dc3545; font-size: 13px; margin-bottom: 5px; }
.reality { font-size: 10px; margin: 2px 0; padding-left: 15px; position: relative; } .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; } .reality:before { content: "✓"; position: absolute; left: 0; color: #27ae60; font-weight: bold; font-size: 14px; }
.threat-box { .threat-box {
background: #f8d7da; background: #f8d7da;
border: 2px solid #dc3545; border: 2px solid #dc3545;
border-radius: 6px; border-radius: 6px;
padding: 8px; padding: 10px;
margin: 8px 0; margin: 10px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.threat-header { .threat-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
margin-bottom: 6px; margin-bottom: 7px;
} }
.threat-icon { .threat-icon {
width: 24px; width: 28px;
height: 24px; height: 28px;
background: #dc3545; background: #dc3545;
color: white; color: white;
border-radius: 50%; border-radius: 50%;
@@ -95,35 +95,36 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; }
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 16px;
} }
.threat-title { .threat-title {
font-size: 13px; font-size: 14px;
font-weight: bold; font-weight: bold;
color: #dc3545; color: #dc3545;
} }
.threat-content { font-size: 10px; margin: 4px 0; } .threat-content { font-size: 12px; margin: 5px 0; line-height: 1.5; }
.threat-example { .threat-example {
background: rgba(220, 53, 69, 0.1); background: rgba(220, 53, 69, 0.1);
padding: 6px; padding: 8px;
margin: 6px 0; margin: 7px 0;
border-radius: 3px; border-radius: 3px;
font-size: 10px; font-size: 11px;
font-style: italic; font-style: italic;
line-height: 1.5;
} }
.threat-stats { .threat-stats {
font-size: 10px; font-size: 11px;
font-weight: bold; font-weight: bold;
color: #dc3545; color: #dc3545;
margin-top: 4px; margin-top: 5px;
} }
.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: 10px; padding: 12px;
border-radius: 6px; border-radius: 6px;
margin: 8px 0; margin: 10px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.cost-box h2 { .cost-box h2 {
@@ -133,46 +134,48 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; }
} }
.cost-table { .cost-table {
width: 100%; width: 100%;
margin: 8px 0; margin: 10px 0;
border-collapse: collapse; border-collapse: collapse;
font-size: 10px; font-size: 12px;
} }
.cost-table td { .cost-table td {
padding: 4px; padding: 5px;
border-bottom: 1px solid rgba(255,255,255,0.3); 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: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: 13px; font-size: 14px;
font-weight: bold; font-weight: bold;
margin-top: 6px; margin-top: 8px;
padding-top: 6px; padding-top: 8px;
border-top: 2px solid white; border-top: 2px solid white;
text-align: center; text-align: center;
} }
.checklist { .checklist {
columns: 2; columns: 2;
column-gap: 15px; column-gap: 20px;
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 8px 0; margin: 10px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.checklist li { .checklist li {
padding: 3px 0; padding: 4px 0;
padding-left: 18px; padding-left: 20px;
position: relative; position: relative;
font-size: 10px; font-size: 12px;
break-inside: avoid; break-inside: avoid;
line-height: 1.5;
} }
.checklist li:before { .checklist li:before {
content: "☐"; content: "☐";
position: absolute; position: absolute;
left: 0; left: 0;
color: #dc3545; color: #dc3545;
font-size: 12px; font-size: 14px;
} }
.risk-score-box { .risk-score-box {
@@ -190,48 +193,49 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; }
.protection-layer { .protection-layer {
background: #d4edda; background: #d4edda;
border-left: 4px solid #27ae60; border-left: 4px solid #27ae60;
padding: 8px; padding: 10px;
margin: 8px 0; margin: 10px 0;
border-radius: 4px; border-radius: 4px;
page-break-inside: avoid; page-break-inside: avoid;
} }
.layer-header { .layer-header {
font-size: 12px; font-size: 14px;
font-weight: bold; font-weight: bold;
color: #27ae60; color: #27ae60;
margin-bottom: 4px; margin-bottom: 6px;
} }
.feature-item { .feature-item {
margin: 4px 0; margin: 6px 0;
} }
.feature-name { .feature-name {
font-weight: bold; font-weight: bold;
color: #1e3c72; color: #1e3c72;
font-size: 10px; font-size: 12px;
} }
.feature-desc { .feature-desc {
font-size: 9px; font-size: 11px;
margin-left: 12px; margin-left: 14px;
color: #666; color: #666;
line-height: 1.5;
} }
.comparison-table { .comparison-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin: 8px 0; margin: 10px 0;
font-size: 8px; font-size: 10px;
page-break-inside: avoid; page-break-inside: avoid;
} }
.comparison-table th { .comparison-table th {
background: #1e3c72; background: #1e3c72;
color: white; color: white;
padding: 5px 3px; padding: 6px 4px;
text-align: center; text-align: center;
font-size: 9px; font-size: 10px;
border: 1px solid white; border: 1px solid white;
} }
.comparison-table td { .comparison-table td {
padding: 4px 3px; padding: 5px 4px;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
text-align: center; text-align: center;
} }
@@ -246,44 +250,47 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; }
text-align: left; text-align: left;
color: #1e3c72; color: #1e3c72;
} }
.checkmark { color: #27ae60; font-weight: bold; font-size: 14px; } .checkmark { color: #27ae60; font-weight: bold; font-size: 16px; }
.dash { color: #999; } .dash { color: #999; }
.case-study-box { .case-study-box {
background: white; background: white;
border: 3px solid #27ae60; border: 3px solid #27ae60;
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 12px;
margin: 8px 0; margin: 10px 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: 6px; padding: 8px;
margin: -10px -10px 8px -10px; margin: -12px -12px 10px -12px;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
font-size: 11px; font-size: 13px;
font-weight: bold; font-weight: bold;
} }
.case-outcome { .case-outcome {
background: #d4edda; background: #d4edda;
padding: 6px; padding: 8px;
border-radius: 4px; border-radius: 4px;
margin: 6px 0; margin: 8px 0;
} }
.case-outcome h4 { .case-outcome h4 {
color: #27ae60; color: #27ae60;
margin: 0 0 4px 0; margin: 0 0 5px 0;
}
.case-outcome p {
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: 10px; padding: 12px;
border-radius: 8px; border-radius: 8px;
margin: 8px 0; margin: 10px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.roi-calculator h2 { .roi-calculator h2 {
@@ -293,31 +300,32 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; }
.roi-grid { .roi-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 8px; gap: 10px;
margin: 8px 0; margin: 10px 0;
} }
.roi-card { .roi-card {
background: rgba(255,255,255,0.15); background: rgba(255,255,255,0.15);
padding: 8px; padding: 10px;
border-radius: 6px; border-radius: 6px;
} }
.roi-card h4 { .roi-card h4 {
color: white; color: white;
margin: 0 0 6px 0; margin: 0 0 7px 0;
font-size: 11px; font-size: 12px;
} }
.roi-breakdown { .roi-breakdown {
font-size: 10px; font-size: 11px;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
line-height: 1.5;
} }
.roi-breakdown div { .roi-breakdown div {
margin: 2px 0; margin: 3px 0;
} }
.roi-total { .roi-total {
font-size: 14px; font-size: 15px;
font-weight: bold; font-weight: bold;
margin-top: 8px; margin-top: 10px;
padding-top: 8px; padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.3); border-top: 1px solid rgba(255,255,255,0.3);
text-align: center; text-align: center;
} }
@@ -326,8 +334,8 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; }
background: #d1ecf1; background: #d1ecf1;
border: 2px solid #17a2b8; border: 2px solid #17a2b8;
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 12px;
margin: 8px 0; margin: 10px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.assessment-box h3 { .assessment-box h3 {
@@ -337,13 +345,14 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; }
.assessment-list { .assessment-list {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 8px 0; margin: 10px 0;
} }
.assessment-list li { .assessment-list li {
padding: 4px 0; padding: 4px 0;
padding-left: 20px; padding-left: 22px;
position: relative; position: relative;
font-size: 10px; font-size: 12px;
line-height: 1.5;
} }
.assessment-list li:before { .assessment-list li:before {
content: "✓"; content: "✓";
@@ -351,32 +360,32 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; }
left: 0; left: 0;
color: #17a2b8; color: #17a2b8;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 14px;
} }
.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: 12px; padding: 12px;
border-radius: 8px; border-radius: 6px;
text-align: center; text-align: center;
margin: 8px 0; margin: 10px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.cta-box h2 { .cta-box h2 {
color: white; color: white;
border: none; border: none;
margin: 0 0 8px 0; margin: 0 0 5px 0;
font-size: 16px; font-size: 16px;
} }
.phone-large { .phone-large {
font-size: 20px; font-size: 18px;
font-weight: bold; font-weight: bold;
margin: 6px 0; margin: 5px 0;
} }
.cta-box p { .cta-box p {
font-size: 12px; font-size: 11px;
margin: 5px 0; margin: 3px 0;
} }
.guarantee-box { .guarantee-box {
@@ -395,8 +404,8 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; }
background: #fff3cd; background: #fff3cd;
border: 2px solid #f39c12; border: 2px solid #f39c12;
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 12px;
margin: 8px 0; margin: 10px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.offer-box h3 { .offer-box h3 {
@@ -406,13 +415,14 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; }
.offer-list { .offer-list {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 8px 0; margin: 10px 0;
} }
.offer-list li { .offer-list li {
padding: 3px 0; padding: 4px 0;
padding-left: 20px; padding-left: 22px;
position: relative; position: relative;
font-size: 11px; font-size: 12px;
line-height: 1.5;
} }
.offer-list li:before { .offer-list li:before {
content: "[OK]"; content: "[OK]";
@@ -420,14 +430,14 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; }
left: 0; left: 0;
color: #27ae60; color: #27ae60;
font-weight: bold; font-weight: bold;
font-size: 9px; font-size: 10px;
} }
.footer { .footer {
position: absolute; position: absolute;
bottom: 0.3in; bottom: 0.3in;
left: 0.4in; left: 0.6in;
right: 0.4in; right: 0.6in;
text-align: center; text-align: center;
padding-top: 6px; padding-top: 6px;
border-top: 2px solid #1e3c72; border-top: 2px solid #1e3c72;
@@ -439,16 +449,17 @@ p { font-size: 10px; margin-bottom: 6px; line-height: 1.4; }
.two-column { .two-column {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 12px; gap: 15px;
} }
ul.bullet-list { ul.bullet-list {
margin: 5px 0; margin: 8px 0;
padding-left: 15px; padding-left: 18px;
font-size: 10px; font-size: 12px;
} }
ul.bullet-list li { ul.bullet-list li {
margin: 2px 0; margin: 3px 0;
line-height: 1.5;
} }
</style> </style>
</head> </head>

122
projects/msp-pricing/marketing/MSP-Buyers-Guide.html
View File

@@ -11,8 +11,8 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.6; color: #33
.page { .page {
width: 8.5in; width: 8.5in;
height: 11in; height: 11in;
padding: 0.5in; padding: 0.6in;
padding-bottom: 0.75in; padding-bottom: 0.8in;
background: white; background: white;
position: relative; position: relative;
margin: 20px auto; 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; } 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.6in;
padding-bottom: 0.75in; padding-bottom: 0.8in;
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,46 +40,47 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.6; 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: 12px;
border-bottom: 3px solid #1e3c72; border-bottom: 3px solid #1e3c72;
margin-bottom: 15px; margin-bottom: 16px;
} }
.logo { font-size: 20px; font-weight: bold; color: #1e3c72; } .logo { font-size: 22px; font-weight: bold; color: #1e3c72; }
.contact { text-align: right; font-size: 10px; color: #666; } .contact { text-align: right; font-size: 11px; color: #666; }
.contact .phone { font-size: 14px; font-weight: bold; color: #f39c12; } .contact .phone { font-size: 16px; font-weight: bold; color: #f39c12; }
h1 { color: #1e3c72; font-size: 28px; margin-bottom: 8px; line-height: 1.2; } h1 { color: #1e3c72; font-size: 26px; margin-bottom: 6px; 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; } 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: 13px; margin: 10px 0 5px 0; font-weight: bold; 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; } 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 { 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; } .checklist li:before { content: "☐"; position: absolute; left: 0; color: #1e3c72; font-size: 14px; }
.red-flag-box { .red-flag-box {
background: #fff3cd; background: #fff3cd;
border-left: 4px solid #f39c12; border-left: 4px solid #f39c12;
padding: 8px; padding: 10px;
margin: 8px 0; margin: 10px 0;
border-radius: 3px; border-radius: 3px;
page-break-inside: avoid; page-break-inside: avoid;
} }
.red-flag-box h3 { margin-top: 0; color: #f39c12; font-size: 13px; } .red-flag-box h3 { margin-top: 0; color: #f39c12; font-size: 14px; }
.red-flag-box .section { margin: 6px 0; font-size: 10px; } .red-flag-box .section { margin: 7px 0; font-size: 11px; line-height: 1.5; }
.red-flag-box .section strong { display: block; margin-bottom: 2px; color: #333; } .red-flag-box .section strong { display: block; margin-bottom: 3px; color: #333; }
.key-question-box { .key-question-box {
background: #d1ecf1; background: #d1ecf1;
border-left: 4px solid #17a2b8; border-left: 4px solid #17a2b8;
padding: 6px 8px; padding: 8px 10px;
margin: 6px 0; margin: 8px 0;
border-radius: 3px; border-radius: 3px;
font-size: 10px; font-size: 11px;
line-height: 1.5;
page-break-inside: avoid; page-break-inside: avoid;
} }
.key-question-box strong { color: #17a2b8; } .key-question-box strong { color: #17a2b8; }
@@ -86,10 +88,11 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
.good-answer-box { .good-answer-box {
background: #d4edda; background: #d4edda;
border-left: 4px solid #27ae60; border-left: 4px solid #27ae60;
padding: 6px 8px; padding: 8px 10px;
margin: 6px 0; margin: 8px 0;
border-radius: 3px; border-radius: 3px;
font-size: 10px; font-size: 11px;
line-height: 1.5;
page-break-inside: avoid; page-break-inside: avoid;
} }
.good-answer-box strong { color: #27ae60; } .good-answer-box strong { color: #27ae60; }
@@ -98,18 +101,18 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin: 10px 0; margin: 10px 0;
font-size: 11px; font-size: 12px;
page-break-inside: avoid; page-break-inside: avoid;
} }
.pricing-table th { .pricing-table th {
background: #1e3c72; background: #1e3c72;
color: white; color: white;
padding: 6px; padding: 7px;
text-align: left; text-align: left;
font-weight: 600; font-weight: 600;
} }
.pricing-table td { .pricing-table td {
padding: 5px 6px; padding: 6px 7px;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
} }
@@ -117,27 +120,27 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
background: #f8f9fa; background: #f8f9fa;
border: 2px solid #1e3c72; border: 2px solid #1e3c72;
border-radius: 6px; border-radius: 6px;
padding: 10px; padding: 12px;
margin: 10px 0; margin: 12px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.example-header { .example-header {
font-size: 13px; font-size: 14px;
font-weight: bold; font-weight: bold;
color: #1e3c72; color: #1e3c72;
margin-bottom: 5px; margin-bottom: 6px;
} }
.cost-line { .cost-line {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 11px; font-size: 12px;
padding: 2px 0; padding: 3px 0;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
} }
.cost-line.total { .cost-line.total {
border-top: 2px solid #1e3c72; border-top: 2px solid #1e3c72;
margin-top: 5px; margin-top: 6px;
padding-top: 5px; padding-top: 6px;
font-weight: bold; font-weight: bold;
color: #1e3c72; color: #1e3c72;
} }
@@ -145,19 +148,20 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
.testimonial-box { .testimonial-box {
background: white; background: white;
border-left: 4px solid #27ae60; border-left: 4px solid #27ae60;
padding: 10px; padding: 12px;
margin: 10px 0; margin: 12px 0;
font-style: italic; font-style: italic;
font-size: 11px; font-size: 12px;
line-height: 1.5;
box-shadow: 0 2px 5px rgba(0,0,0,0.05); box-shadow: 0 2px 5px rgba(0,0,0,0.05);
page-break-inside: avoid; page-break-inside: avoid;
} }
.testimonial-box .author { .testimonial-box .author {
margin-top: 5px; margin-top: 6px;
font-style: normal; font-style: normal;
font-weight: bold; font-weight: bold;
color: #666; color: #666;
font-size: 10px; font-size: 11px;
} }
.cover-page { .cover-page {
@@ -207,11 +211,11 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
.footer { .footer {
position: absolute; position: absolute;
bottom: 0.4in; bottom: 0.3in;
left: 0.5in; left: 0.6in;
right: 0.5in; right: 0.6in;
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;
@@ -224,10 +228,11 @@ ul.feature-list {
margin: 8px 0; margin: 8px 0;
} }
ul.feature-list li { ul.feature-list li {
padding: 2px 0; padding: 3px 0;
padding-left: 18px; padding-left: 20px;
position: relative; position: relative;
font-size: 11px; font-size: 12px;
line-height: 1.5;
} }
ul.feature-list li:before { ul.feature-list li:before {
content: "✓"; content: "✓";
@@ -235,31 +240,32 @@ ul.feature-list li:before {
left: 0; left: 0;
color: #27ae60; color: #27ae60;
font-weight: bold; font-weight: bold;
font-size: 14px;
} }
.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: 6px;
text-align: center; text-align: center;
margin: 15px 0; margin: 10px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.cta-box h2 { .cta-box h2 {
color: white; color: white;
border: none; border: none;
margin: 0 0 8px 0; margin: 0 0 5px 0;
font-size: 16px; font-size: 16px;
} }
.cta-box .phone-large { .cta-box .phone-large {
font-size: 24px; font-size: 18px;
font-weight: bold; font-weight: bold;
margin: 8px 0; margin: 5px 0;
} }
.cta-box p { .cta-box p {
font-size: 12px; font-size: 11px;
margin: 5px 0; margin: 3px 0;
} }
</style> </style>
</head> </head>