Update 1.html

1.html

@@ -14,10 +14,10 @@
 
     body {
       font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-      padding: 40px;
+      padding: 20px 30px; /* reduced padding for PDF */
       color: #1a1a1a;
-      line-height: 1.6;
-      max-width: 900px;
+      line-height: 1.5; /* slightly reduced line-height */
+      max-width: 800px; /* reduced width for PDF */
       margin: 0 auto;
       background-color: #fff;
     }
@@ -26,8 +26,8 @@
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
-      margin-bottom: 48px;
-      padding-bottom: 24px;
+      margin-bottom: 32px;
+      padding-bottom: 16px;
       border-bottom: 3px solid #002366; /* navy blue */
     }
 
@@ -36,16 +36,16 @@
     }
 
     .company-name {
-      font-size: 28px;
+      font-size: 26px;
       font-weight: 700;
       color: #002366;
-      margin-bottom: 8px;
+      margin-bottom: 6px;
     }
 
     .company-details {
-      font-size: 13px;
+      font-size: 12px;
       color: #666;
-      line-height: 1.8;
+      line-height: 1.6;
     }
 
     .invoice-title {
@@ -55,14 +55,14 @@
     }
 
     .invoice-title h1 {
-      font-size: 32px; /* slightly smaller than before */
+      font-size: 30px; /* smaller */
       font-weight: 700;
       color: #002366;
-      margin-bottom: 8px;
+      margin-bottom: 6px;
     }
 
     .invoice-number {
-      font-size: 16px;
+      font-size: 14px;
       color: #666;
       font-weight: 500;
     }
@@ -70,8 +70,8 @@
     .invoice-meta {
       display: flex;
       justify-content: space-between;
-      margin-bottom: 40px;
-      gap: 24px;
+      margin-bottom: 24px;
+      gap: 16px;
     }
 
     .meta-section {
@@ -79,28 +79,28 @@
     }
 
     .meta-section h3 {
-      font-size: 12px;
+      font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 1px;
       color: #999;
-      margin-bottom: 12px;
+      margin-bottom: 8px;
       font-weight: 600;
     }
 
     .meta-content {
-      font-size: 14px;
+      font-size: 13px;
       color: #333;
     }
 
     .meta-content div {
-      margin-bottom: 4px;
+      margin-bottom: 2px;
     }
 
     .customer-name {
       font-weight: 600;
-      font-size: 16px;
+      font-size: 15px;
       color: #1a1a1a;
-      margin-bottom: 6px;
+      margin-bottom: 4px;
     }
 
     .dates-section {
@@ -108,18 +108,18 @@
     }
 
     .date-item {
-      margin-bottom: 8px;
+      margin-bottom: 6px;
     }
 
     .date-label {
-      font-size: 12px;
+      font-size: 11px;
       color: #999;
       text-transform: uppercase;
       letter-spacing: 0.5px;
     }
 
     .date-value {
-      font-size: 14px;
+      font-size: 13px;
       color: #333;
       font-weight: 500;
       text-transform: capitalize; /* titlecase for status */
@@ -128,22 +128,22 @@
     .items-table {
       width: 100%;
       border-collapse: collapse;
-      margin-bottom: 32px;
+      margin-bottom: 24px; /* reduced margin */
     }
 
     .items-table thead {
-      background-color: #e6f0ff; /* lighter navy */
+      background-color: #e6f0ff;
     }
 
     .items-table th {
-      padding: 14px 12px;
+      padding: 10px 8px; /* smaller padding */
       text-align: left;
-      font-size: 12px;
+      font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 1px;
       color: #666;
       font-weight: 600;
-      border-bottom: 2px solid #002366;
+      border-bottom: 1px solid #002366;
     }
 
     .items-table th:last-child,
@@ -160,8 +160,8 @@
     }
 
     .items-table td {
-      padding: 16px 12px;
-      font-size: 14px;
+      padding: 12px 8px; /* smaller padding */
+      font-size: 13px;
       color: #333;
     }
 
@@ -172,17 +172,17 @@
 
     .totals-section {
       margin-left: auto;
-      width: 350px;
-      padding: 24px;
+      width: 300px; /* smaller width for PDF */
+      padding: 16px;
       background-color: #f9f9f9;
       border-radius: 8px;
+      font-size: 13px;
     }
 
     .total-row {
       display: flex;
       justify-content: space-between;
-      padding: 10px 0;
-      font-size: 14px;
+      padding: 6px 0;
     }
 
     .total-row.subtotal {
@@ -191,49 +191,52 @@
     }
 
     .total-row.grand-total {
-      font-size: 20px;
+      font-size: 18px;
       font-weight: 700;
       color: #002366;
       border-top: 2px solid #002366;
-      padding-top: 16px;
-      margin-top: 8px;
+      padding-top: 12px;
+      margin-top: 4px;
     }
 
     .footer {
-      margin-top: 48px;
-      padding-top: 24px;
+      margin-top: 32px;
+      padding-top: 16px;
       border-top: 1px solid #eee;
       font-size: 12px;
       color: #999;
       text-align: center;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
     }
 
     .notes-section {
-      margin-top: 32px;
-      padding: 20px;
+      margin-top: 24px;
+      padding: 16px;
       background-color: #f9f9f9;
       border-left: 4px solid #002366;
       border-radius: 4px;
     }
 
     .notes-section h3 {
-      font-size: 14px;
+      font-size: 13px;
       text-transform: uppercase;
       letter-spacing: 1px;
       color: #666;
-      margin-bottom: 8px;
+      margin-bottom: 6px;
       font-weight: 600;
     }
 
     .notes-section p {
-      font-size: 13px;
+      font-size: 12px;
       color: #555;
-      line-height: 1.7;
+      line-height: 1.5;
     }
 
     @media print {
       body {
-        padding: 20px;
+        padding: 10px;
       }
       
       .items-table tbody tr:hover {
@@ -346,8 +349,8 @@
   {{/notes}}
 
   <div class="footer">
-    <p>Thank you for your business!</p>
-    <p>{{companyName}} Generated on {{issueDate}}</p>
+    <div>Thank you for your business!</div>
+    <div>{{companyName}} Generated on {{issueDate}}</div>
   </div>
 </body>
 </html>