From e2c7cc582be8f543c9e6d4820e139949c8e15e92 Mon Sep 17 00:00:00 2001
From: justin <justin@liquidator.optimal-reality.com>
Date: Sat, 30 May 2026 18:15:22 -0500
Subject: [PATCH] increase font sizes in photo ID section for readability (min
 14px)

---
 .../intake/steps/DOTIntakeStep.astro          | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/site/src/components/intake/steps/DOTIntakeStep.astro b/site/src/components/intake/steps/DOTIntakeStep.astro
index b9d054e..d8cbe92 100644
--- a/site/src/components/intake/steps/DOTIntakeStep.astro
+++ b/site/src/components/intake/steps/DOTIntakeStep.astro
@@ -208,7 +208,7 @@
     <div id="dot-sec-photo-id" hidden>
       <h3>Government-Issued Photo ID</h3>
       <p class="pw-field-help">FMCSA requires a copy of your government-issued photo ID (driver's license, passport, or state ID) to verify the signer's identity.</p>
-      <div style="background:#fefce8;border:1px solid #fbbf24;border-radius:8px;padding:12px 14px;margin-bottom:12px;font-size:13px;color:#854d0e;line-height:1.6">
+      <div style="background:#fefce8;border:1px solid #fbbf24;border-radius:8px;padding:14px 16px;margin-bottom:14px;font-size:15px;color:#854d0e;line-height:1.7">
         <strong>How to add your ID:</strong><br>
         &#8226; <strong>On your phone?</strong> Tap the button below and take a picture of the front of your ID<br>
         &#8226; <strong>On a computer?</strong> Take a photo of your ID with your phone, email or text it to yourself, save it, then click the button below to upload it<br>
@@ -220,40 +220,40 @@
         <div id="dot-id-preview" hidden>
           <div style="text-align:center;margin-bottom:12px">
             <img id="dot-id-img" style="max-width:320px;max-height:240px;border-radius:8px;border:2px solid #d1d5db;display:block;margin:0 auto" />
-            <p id="dot-id-resolution" style="font-size:11px;color:#94a3b8;margin:6px 0 0"></p>
+            <p id="dot-id-resolution" style="font-size:14px;color:#94a3b8;margin:6px 0 0"></p>
           </div>
           <div id="dot-id-quality-check" style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:14px;margin-bottom:12px">
-            <p style="font-size:13px;font-weight:600;color:#1a2744;margin:0 0 10px">Photo ID Quality Check</p>
-            <div id="dot-id-checks" style="font-size:12px;color:#374151;line-height:2"></div>
+            <p style="font-size:16px;font-weight:600;color:#1a2744;margin:0 0 10px">Photo ID Quality Check</p>
+            <div id="dot-id-checks" style="font-size:14px;color:#374151;line-height:2"></div>
             <div id="dot-id-quality-warn" hidden style="background:#fef3c7;border:1px solid #fbbf24;border-radius:6px;padding:10px;margin-top:10px">
-              <p style="font-size:12px;color:#92400e;margin:0;font-weight:600">&#9888; Image quality issue detected</p>
-              <p id="dot-id-quality-msg" style="font-size:11px;color:#92400e;margin:4px 0 0"></p>
+              <p style="font-size:15px;color:#92400e;margin:0;font-weight:600">&#9888; Image quality issue detected</p>
+              <p id="dot-id-quality-msg" style="font-size:14px;color:#92400e;margin:4px 0 0"></p>
             </div>
             <div id="dot-id-quality-ok" hidden style="background:#f0fdf4;border:1px solid #86efac;border-radius:6px;padding:10px;margin-top:10px">
-              <p style="font-size:12px;color:#166534;margin:0">&#10004; Image looks good — clear and properly sized for submission.</p>
+              <p style="font-size:15px;color:#166534;margin:0">&#10004; Image looks good — clear and properly sized for submission.</p>
             </div>
           </div>
           <div style="display:flex;gap:8px;justify-content:center">
-            <button type="button" id="dot-id-accept" style="padding:8px 24px;background:#059669;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer">Accept &amp; Continue</button>
-            <button type="button" id="dot-id-retake" style="padding:8px 24px;background:#fff;color:#374151;border:1px solid #d1d5db;border-radius:6px;font-size:13px;cursor:pointer">Retake / Re-upload</button>
+            <button type="button" id="dot-id-accept" style="padding:10px 28px;background:#059669;color:#fff;border:none;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer">Accept &amp; Continue</button>
+            <button type="button" id="dot-id-retake" style="padding:10px 28px;background:#fff;color:#374151;border:1px solid #d1d5db;border-radius:6px;font-size:15px;cursor:pointer">Retake / Re-upload</button>
           </div>
         </div>
         <div id="dot-id-upload-options">
-          <button type="button" id="dot-id-btn" style="display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 24px;background:#f97316;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:15px;font-weight:600;box-shadow:0 2px 8px rgba(249,115,22,0.3)">
+          <button type="button" id="dot-id-btn" style="display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:18px 24px;background:#f97316;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:17px;font-weight:600;box-shadow:0 2px 8px rgba(249,115,22,0.3)">
             <svg style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z"/></svg>
             Add Photo of Your ID
           </button>
-          <p style="font-size:11px;color:#94a3b8;text-align:center;margin:8px 0 0">Accepted formats: JPEG, PNG, PDF, TIFF &middot; Max 15MB</p>
+          <p style="font-size:14px;color:#64748b;text-align:center;margin:10px 0 0">Accepted formats: JPEG, PNG, PDF, TIFF &middot; Max 15MB</p>
           <!-- QR code for phone upload — hidden on mobile phones -->
           <div id="dot-id-qr-section" style="margin-top:16px;padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;text-align:center">
             <div style="display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:8px">
               <div style="flex:1;height:1px;background:#d1d5db"></div>
-              <span style="font-size:12px;color:#64748b;font-weight:500">or use your phone</span>
+              <span style="font-size:15px;color:#64748b;font-weight:500">or use your phone</span>
               <div style="flex:1;height:1px;background:#d1d5db"></div>
             </div>
             <img id="dot-id-qr-img" style="width:160px;height:160px;margin:0 auto;display:block;border-radius:4px" alt="Loading QR code..." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Crect fill='%23f1f5f9' width='160' height='160'/%3E%3Ctext x='80' y='85' text-anchor='middle' fill='%2394a3b8' font-size='12'%3ELoading...%3C/text%3E%3C/svg%3E" />
-            <p style="font-size:12px;color:#475569;margin:8px 0 0;font-weight:500">Scan with your phone camera to take a photo of your ID</p>
-            <p style="font-size:11px;color:#94a3b8;margin:4px 0 0">The form will stay open on your computer while you snap the picture on your phone</p>
+            <p style="font-size:15px;color:#475569;margin:8px 0 0;font-weight:500">Scan with your phone camera to take a photo of your ID</p>
+            <p style="font-size:14px;color:#64748b;margin:6px 0 0">The form will stay open on your computer while you snap the picture on your phone</p>
           </div>
           <script is:inline>
           // Immediate QR code generation — runs right where the element is
@@ -290,7 +290,7 @@
       </div>
       <div class="pw-security-notice" style="margin-top:8px">
         <svg style="width:14px;height:14px;flex-shrink:0;margin-top:2px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
-        <span style="font-size:11px">Your ID is encrypted in transit and at rest. Used only for FMCSA identity verification and automatically deleted after filing.</span>
+        <span style="font-size:14px">Your ID is encrypted in transit and at rest. Used only for FMCSA identity verification and automatically deleted after filing.</span>
       </div>
     </div>
   </div>
@@ -311,10 +311,10 @@
   .pw-field em { color: #dc2626; font-style: normal; }
   .pw-field input, .pw-field select { padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; }
   .pw-field input:focus, .pw-field select:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 2px rgba(249,115,22,0.2); }
-  .pw-field-help { font-size: 0.8rem; color: #64748b; margin: 0 0 0.5rem; }
+  .pw-field-help { font-size: 0.9rem; color: #64748b; margin: 0 0 0.5rem; }
   .pw-cargo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.3rem 1rem; font-size: 0.85rem; color: #374151; }
   .pw-cargo-grid label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
-  .pw-security-notice { display: flex; gap: 8px; align-items: flex-start; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 14px; margin-bottom: 1rem; font-size: 12px; color: #1e40af; line-height: 1.5; }
+  .pw-security-notice { display: flex; gap: 8px; align-items: flex-start; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 12px 14px; margin-bottom: 1rem; font-size: 14px; color: #1e40af; line-height: 1.5; }
   .pw-upload-area { border: 2px dashed #d1d5db; border-radius: 8px; padding: 1rem; text-align: center; }
   .pw-err { color: #b91c1c; margin-top: 0.75rem; font-size: 0.9rem; background: #fee2e2; padding: 0.5rem 0.75rem; border-radius: 6px; }
   @media (max-width: 640px) { .pw-row-2, .pw-row-3 { grid-template-columns: 1fr; } .pw-cargo-grid { grid-template-columns: 1fr 1fr; } #dot-id-qr-section { display: none !important; } }