Minimal Style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* Import Fonts - Using system fonts for ultimate neutrality */
@import url('<https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap>');
/* CSS Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Page Setup with proper margins */
@page {
size: A4;
margin: 30mm 25mm 30mm 25mm;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 11pt;
line-height: 1.5;
color: #000000;
background: white;
letter-spacing: -0.01em;
font-weight: 400;
}
/* Container - adjusted for new page margins */
.page-container {
max-width: 100%;
margin: 0;
padding: 0;
}
/* Header - will repeat on each page if needed */
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 60px;
page-break-inside: avoid;
page-break-after: avoid;
}
.logo-section {
display: flex;
align-items: center;
gap: 20px;
}
/* Empty logo placeholder */
.logo-placeholder {
width: 40px;
height: 40px;
border: 1px solid #000000;
border-radius: 4px;
background: transparent;
}
.company-name {
font-size: 16px;
font-weight: 500;
color: #000000;
letter-spacing: -0.02em;
}
.header-meta {
text-align: right;
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
color: #000000;
line-height: 1.8;
letter-spacing: 0.05em;
font-weight: 400;
}
/* Title Section */
.title-section {
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #000000;
page-break-inside: avoid;
page-break-after: avoid;
}
.report-title {
font-size: 32px;
font-weight: 400;
color: #000000;
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 24px;
}
.report-meta {
display: flex;
gap: 40px;
font-size: 13px;
color: #000000;
}
.meta-item {
display: flex;
align-items: baseline;
gap: 12px;
}
.meta-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
text-transform: uppercase;
color: #000000;
letter-spacing: 0.1em;
font-weight: 400;
}
/* Content Styles */
.content {
margin-bottom: 60px;
}
/* CRITICAL FIX: Keep-together wrapper for heading + content */
.keep-together {
page-break-inside: avoid !important;
break-inside: avoid !important;
display: block;
position: relative;
}
/* Body Content Styles */
.content h1 {
font-size: 24px;
font-weight: 500;
color: #000000;
margin: 48px 0 20px 0;
letter-spacing: -0.02em;
line-height: 1.2;
page-break-after: avoid !important;
break-after: avoid !important;
}
/* Remove top margin when h1 is inside keep-together */
.keep-together h1:first-child {
margin-top: 0;
}
.content h1:first-child {
margin-top: 0;
}
.content h2 {
font-size: 20px;
font-weight: 500;
color: #000000;
margin: 40px 0 16px 0;
letter-spacing: -0.01em;
line-height: 1.3;
page-break-after: avoid !important;
break-after: avoid !important;
}
/* Remove top margin when h2 is inside keep-together */
.keep-together h2:first-child {
margin-top: 0;
}
.content h3 {
font-size: 16px;
font-weight: 500;
color: #000000;
margin: 32px 0 12px 0;
letter-spacing: -0.01em;
line-height: 1.4;
page-break-after: avoid !important;
break-after: avoid !important;
}
/* Remove top margin when h3 is inside keep-together */
.keep-together h3:first-child {
margin-top: 0;
}
.content p {
margin: 0 0 16px 0;
line-height: 1.7;
orphans: 3;
widows: 3;
font-weight: 400;
}
.content p:last-child {
margin-bottom: 0;
}
.content strong {
font-weight: 600;
color: #000000;
}
.content em {
font-style: italic;
}
.content code {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.9em;
background: #F8F8F8;
padding: 2px 6px;
border-radius: 2px;
color: #000000;
font-weight: 400;
}
/* Lists */
.content ul, .content ol {
margin: 0 0 16px 0;
padding-left: 24px;
page-break-inside: avoid;
break-inside: avoid;
}
.content li {
margin-bottom: 8px;
line-height: 1.7;
page-break-inside: avoid;
break-inside: avoid;
orphans: 2;
widows: 2;
position: relative;
padding-bottom: 4px;
}
.content li:last-child {
margin-bottom: 0;
}
/* Custom bullet style - minimal */
.content ul {
list-style: none;
}
.content ul li::before {
content: '—';
position: absolute;
left: -20px;
top: 0;
color: #000000;
font-weight: 400;
}
/* Blockquotes */
.content blockquote {
margin: 24px 0;
padding: 20px 24px;
background: transparent;
border-left: 1px solid #000000;
page-break-inside: avoid;
break-inside: avoid;
}
.content blockquote p {
margin-bottom: 0;
font-style: italic;
font-weight: 400;
}
/* Code Blocks */
.content pre {
margin: 24px 0;
padding: 20px;
background: #F8F8F8;
color: #000000;
border: 1px solid #E0E0E0;
border-radius: 0;
overflow-x: auto;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
line-height: 1.6;
page-break-inside: avoid;
break-inside: avoid;
}
.content pre code {
background: none;
padding: 0;
color: #000000;
}
/* Tables */
.content table {
width: 100%;
margin: 24px 0;
border-collapse: collapse;
page-break-inside: avoid;
break-inside: avoid;
}
.content th {
text-align: left;
padding: 12px 16px;
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
font-weight: 500;
color: #000000;
text-transform: uppercase;
letter-spacing: 0.1em;
border-bottom: 1px solid #000000;
}
.content td {
padding: 12px 16px;
border-bottom: 1px solid #E0E0E0;
font-weight: 400;
}
/* Highlight Box - Minimalist with stroke */
.highlight {
margin: 32px 0;
padding: 24px;
background: transparent;
border: 1px solid #000000;
border-radius: 0;
color: #000000;
page-break-inside: avoid !important;
break-inside: avoid !important;
display: block;
position: relative;
}
.highlight h3 {
color: #000000;
margin-top: 0;
margin-bottom: 12px;
font-weight: 500;
}
.highlight p {
margin-bottom: 0;
color: #000000;
font-weight: 400;
}
/* Info Box */
.info-box {
margin: 24px 0;
padding: 20px 24px;
background: transparent;
border: 1px solid #E0E0E0;
border-radius: 0;
page-break-inside: avoid !important;
break-inside: avoid !important;
}
.info-box p {
margin: 0;
line-height: 1.8;
font-weight: 400;
}
.info-box-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
font-weight: 500;
color: #000000;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 12px;
}
/* Footer */
.footer {
margin-top: 80px;
padding-top: 40px;
border-top: 1px solid #000000;
display: flex;
justify-content: space-between;
align-items: center;
page-break-inside: avoid;
break-inside: avoid;
}
.footer-left {
font-size: 11px;
color: #000000;
line-height: 1.6;
font-weight: 400;
}
.footer-right {
display: flex;
align-items: center;
gap: 8px;
}
.footer-company {
font-size: 11px;
font-weight: 500;
color: #000000;
}
/* Print Optimization */
@media print {
/* Force keep-together to work */
.keep-together {
page-break-inside: avoid !important;
break-inside: avoid !important;
display: block !important;
}
/* Ensure highlight boxes stay together */
.highlight {
page-break-inside: avoid !important;
break-inside: avoid !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Keep headings with content */
.content h1,
.content h2,
.content h3 {
page-break-after: avoid !important;
break-after: avoid !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
}
/* Keep lists completely together */
.content ul,
.content ol {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
/* Ensure first element on new page has proper spacing */
@page {
margin-top: 30mm;
}
}
</style>
</head>
<body>
<div class="page-container">
<!-- Header -->
<header class="header">
<div class="logo-section">
<!-- PASTE YOUR BASE64 LOGO HERE -->
<img src="" alt="ABC Company Logo" style="height: 40px; width: auto;">
<div class="company-name">ABC Company</div>
</div>
<div class="header-meta">
REPORT
</div>
</header>
<!-- Title Section -->
<section class="title-section">
<h1 class="report-title">{{ title }}</h1>
<div class="report-meta">
<div class="meta-item">
<span class="meta-label">DATE</span>
<span>{{ date }}</span>
</div>
</div>
</section>
<!-- Main Content -->
<main class="content">
{{ body | safe }}
</main>
<!-- Footer -->
<footer class="footer">
<div class="footer-left">
© 2025 ABC Company. All rights reserved.<br>
<span style="font-family: 'IBM Plex Mono', monospace; font-size: 9px;">Tagline Here</span>
</div>
</footer>
</div>
</body>
</html>
Prompt for editing style
Keep the exact same structure of this HTML, but change the styling elements.
I want the colors to be [Insert Desired Palette Here]
The company name is [Insert Company Name or Your Name]
Make the fonts [Describe font style you want]
Change the current styling of the elements of this HTML template to match my desired style.
Remember to change nothing about the HTML other than styling. Keep the structure and spacing and everything else the same.
Here's the current HTML template that needs adjusting:
[Paste minimal style template on the left]
CSS for PDF Template
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
-webkit-font-smoothing: antialiased;
background: white;
}
.text-label {
font-family: "Bungee", sans-serif;
}
.text-label2 {
font-family: "Lusitana", sans-serif;
}
.table {
border: 1px solid black;
margin: 10px;
}
.table th,
.table td {
border: 1px solid black;
padding: 10px 20px 10px 20px;
}
.table.center {
margin-left: auto;
margin-right: auto;
}
.section {
padding: 10px 20px 10px 20px;
}
/* Page break control for better PDF rendering */
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
page-break-inside: avoid;
}
p {
page-break-inside: avoid;
orphans: 3;
widows: 3;
}
ul, ol {
page-break-inside: avoid;
margin-bottom: 0;
}
li {
page-break-inside: avoid;
page-break-after: auto;
margin-bottom: 0.5em;
}
/* Keep the last item in a list from having extra space */
li:last-child {
margin-bottom: 0;
}
/* Keep info boxes, highlights, and sections together */
.info-box, .highlight, .section {
page-break-inside: avoid;
page-break-after: auto;
}
/* Tables should not break */
.table {
page-break-inside: avoid;
}
/* Code blocks and quotes */
pre, blockquote {
page-break-inside: avoid;
}
/* Ensure proper spacing before new sections */
h1 {
margin-top: 2em;
page-break-before: auto;
}
/* First h1 doesn't need top margin */
h1:first-child {
margin-top: 0;
}
/* Global orphan/widow control */
* {
orphans: 3;
widows: 3;
}
/* Optional: Force major sections to start on new page */
/* Uncomment if you want each h1 to start fresh */
/* h1 {
page-break-before: always;
} */
</style>
<link rel="stylesheet" href="<https://fonts.googleapis.com/css?family=Bungee>">
<link rel="stylesheet" href="<https://fonts.googleapis.com/css?family=Lusitana>">
<link href="<https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css>" rel="stylesheet">
<script src="<https://cdn.jsdelivr.net/npm/apexcharts>"></script>
Custom Page Footer
<style>#header, #footer { padding: 0 !important; }</style>
<table style="width: 100%; padding-left: 5px; padding-right: 5px; padding-top:0px;margin: 0px!important;font-size: 10px">
<tr>
<td style="text-align:left; width:50%!important;">YOUR-TEXT-HERE</td>
<td style="text-align:right; width:50%!important;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></td>
</tr>
</table>