Update 1.html

1.html

@@ -4,6 +4,8 @@
   <meta charset="utf-8" />
   <title>Invoice {{invoiceNumber}}</title>
   <style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
+
     * {
       margin: 0;
       padding: 0;
@@ -11,12 +13,13 @@
     }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       padding: 40px;
       color: #1a1a1a;
       line-height: 1.6;
       max-width: 900px;
       margin: 0 auto;
+      background-color: #fff;
     }
 
     .header {
@@ -25,7 +28,7 @@
       align-items: flex-start;
       margin-bottom: 48px;
       padding-bottom: 24px;
-      border-bottom: 3px solid {{highlightColor}};
+      border-bottom: 3px solid #002366; /* navy blue */
     }
 
     .company-info {
@@ -35,7 +38,7 @@
     .company-name {
       font-size: 28px;
       font-weight: 700;
-      color: {{highlightColor}};
+      color: #002366;
       margin-bottom: 8px;
     }
 
@@ -48,12 +51,13 @@
     .invoice-title {
       text-align: right;
       flex: 1;
+      font-family: 'Poppins', sans-serif;
     }
 
     .invoice-title h1 {
-      font-size: 36px;
+      font-size: 32px; /* slightly smaller than before */
       font-weight: 700;
-      color: #1a1a1a;
+      color: #002366;
       margin-bottom: 8px;
     }
 
@@ -118,6 +122,7 @@
       font-size: 14px;
       color: #333;
       font-weight: 500;
+      text-transform: capitalize; /* titlecase for status */
     }
 
     .items-table {
@@ -127,7 +132,7 @@
     }
 
     .items-table thead {
-      background-color: {{highlightColorLight}};
+      background-color: #e6f0ff; /* lighter navy */
     }
 
     .items-table th {
@@ -138,7 +143,7 @@
       letter-spacing: 1px;
       color: #666;
       font-weight: 600;
-      border-bottom: 2px solid {{highlightColor}};
+      border-bottom: 2px solid #002366;
     }
 
     .items-table th:last-child,
@@ -188,8 +193,8 @@
     .total-row.grand-total {
       font-size: 20px;
       font-weight: 700;
-      color: {{highlightColor}};
-      border-top: 2px solid {{highlightColor}};
+      color: #002366;
+      border-top: 2px solid #002366;
       padding-top: 16px;
       margin-top: 8px;
     }
@@ -207,7 +212,7 @@
       margin-top: 32px;
       padding: 20px;
       background-color: #f9f9f9;
-      border-left: 4px solid {{highlightColor}};
+      border-left: 4px solid #002366;
       border-radius: 4px;
     }
 
@@ -254,7 +259,7 @@
       </div>
     </div>
     <div class="invoice-title">
-      <h1>INVOICE</h1>
+      <h1><strong>Invoice</strong></h1>
       <div class="invoice-number">#{{invoiceNumber}}</div>
     </div>
   </div>
@@ -342,7 +347,7 @@
 
   <div class="footer">
     <p>Thank you for your business!</p>
-    <p>{{companyName}} • Generated on {{issueDate}}</p>
+    <p>{{companyName}} Generated on {{issueDate}}</p>
   </div>
 </body>
-</html>
+</html>