refactor(marketing): Apply comfortable spacing to MSP Buyers Guide and Cybersecurity OnePager
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:
@@ -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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
Reference in New Issue
Block a user