From 7a76d61bd37a46e6b18454c1dbe0f94ea0c91827 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Thu, 12 Feb 2026 09:21:46 -0500
Subject: [PATCH] feat(typography): upgrade site typography for premium feel

- Implement 'Playfair Display' serif font for headings
- Refine heading weights, letter-spacing, and line-height
- Add coffee bean SVG list markers
- Style testimonials with serif italics
- Add editorial drop-cap to About section
- Ensure accessible contrast in dark mode
---
 index.html |  4 ++--
 styles.css | 66 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 62 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index ea752d5..da980a0 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,7 @@
     </script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;800&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet" href="styles.css">
     <style>
@@ -115,7 +115,7 @@
                 <h2>About Us</h2>
                 <div class="row">
                     <div class="col-lg-8">
-                        <p class="lead mb-4">Welcome to d@n tech! We specialize in creating stunning and efficient websites for businesses of all sizes.</p>
+                        <p class="lead mb-4 drop-cap">Welcome to d@n tech! We specialize in creating stunning and efficient websites for businesses of all sizes.</p>
                         <p>Our team of experienced developers is dedicated to delivering high-quality web solutions that meet your unique needs. We believe in code that is as clean as a fresh pour-over and designs that are as rich as a dark roast.</p>
                     </div>
                 </div>
diff --git a/styles.css b/styles.css
index 0e5c1d1..c29d115 100644
--- a/styles.css
+++ b/styles.css
@@ -29,7 +29,7 @@
     
     /* Typography */
     --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
-    --font-display: 'Inter', system-ui, sans-serif; /* Could swap for a Serif if linked */
+    --font-display: 'Playfair Display', Georgia, serif; 
     
     /* BS Overrides */
     --bs-body-bg: var(--bg-body);
@@ -289,21 +289,22 @@ a {
 
 /* Typography Enhancements */
 h1, h2, h3, h4, h5, h6 {
-    font-weight: 800;
-    letter-spacing: -0.04em; /* Tighter */
+    font-weight: 700;
+    letter-spacing: -0.02em; 
     color: currentColor;
     margin-bottom: 1rem;
     font-family: var(--font-display);
 }
 
 h1 {
-    font-size: clamp(3rem, 6vw, 5rem);
+    font-size: clamp(3.5rem, 8vw, 5.5rem);
     line-height: 1.05;
     text-shadow: 2px 2px 0 rgba(0,0,0,0.05);
+    font-weight: 900;
 }
 
 h2 {
-    font-size: clamp(2.5rem, 5vw, 3.5rem);
+    font-size: clamp(2.5rem, 5vw, 4rem);
     margin-bottom: 4rem;
     padding-bottom: 1.5rem;
     position: relative;
@@ -313,6 +314,8 @@ h2 {
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
+    font-weight: 700;
+    font-style: italic;
 }
 
 h2::after {
@@ -495,7 +498,58 @@ section {
     }
 }
 
-/* List Group (Services) */
+/* Drop Cap */
+.drop-cap::first-letter {
+    font-family: var(--font-display);
+    font-size: 4rem;
+    line-height: 0.8;
+    float: left;
+    margin-right: 0.15em;
+    margin-top: 0.05em;
+    color: var(--color-coffee-medium);
+    font-weight: 900;
+}
+
+@media (prefers-color-scheme: dark) {
+    .drop-cap::first-letter {
+        color: var(--color-gold);
+    }
+}
+
+/* Custom List Markers (Coffee Beans) */
+.list-group-item {
+    padding-left: 2rem;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D4A574'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: 0.5rem center;
+    background-size: 1rem;
+}
+
+.list-group-item:hover {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231D7874'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z'/%3E%3C/svg%3E");
+}
+
+/* Testimonial Typography */
+.testimonial-quote-icon {
+    font-family: var(--font-display);
+    font-style: italic;
+}
+
+.testimonial-full, .testimonial-excerpt {
+    font-family: var(--font-display);
+    font-style: italic;
+    font-size: 1.15rem;
+    line-height: 1.8;
+}
+
+.testimonial-author {
+    font-family: var(--font-sans);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-size: 0.8rem;
+    color: var(--color-coffee-dark);
+}
 .list-group {
     --bs-list-group-bg: transparent;
     --bs-list-group-border-color: var(--border-subtle);