From 87505afd6832b48adda0cfff5b08c10a6cd3e730 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Thu, 12 Feb 2026 09:17:00 -0500
Subject: [PATCH] feat(ui): add rich coffee-themed decorative elements

- Add floating coffee cups and steam wisps
- Implement coffee drip separators between sections
- Add subtle coffee stain background accents
- Enhance buttons with icons and ripple effects
- Improve scroll progress bar visibility
- Add coffee grounds pattern to footer
---
 index.html |  29 +++++++++-
 styles.css | 159 +++++++++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 162 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index ade6e06..ea752d5 100644
--- a/index.html
+++ b/index.html
@@ -67,6 +67,12 @@
         <svg class="floating-bean bean-3" viewBox="0 0 24 24" fill="currentColor">
              <path 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"/>
         </svg>
+        
+        <!-- Floating Cup -->
+        <svg class="floating-cup cup-1" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M4 2h1v1h-1zM6 2h1v1h-1zM8 2h1v1h-1zM10 2h1v1h-1z" opacity=".5"/> <!-- Steam dots -->
+            <path d="M18.5 4h-13c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 4 18.5 4zM16 11V6h-3v5h3zm-5 0V6H8v5h3zm8-3.5h-1.5V6H19c.83 0 1.5.67 1.5 1.5S19.83 9 19 9z"/>
+        </svg>
     </div>
     
     <header class="hero-section">
@@ -79,7 +85,12 @@
             <h1 class="hero-title">Digital Experiences,<br>Perfectly Brewed.</h1>
             <p class="typewriter hero-subtitle" data-text="Crafting robust, responsive, and elegant web solutions" aria-label="Crafting robust, responsive, and elegant web solutions"></p>
             <div class="btn-group-custom">
-                <a href="mailto:info@dustin.coffee" class="btn btn-primary btn-lg">Start Your Project</a>
+                <a href="mailto:info@dustin.coffee" class="btn btn-primary btn-lg">
+                    <svg class="btn-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+                    </svg>
+                    Start Your Project
+                </a>
                 <a href="#portfolio" class="btn btn-outline-coffee btn-lg">View Portfolio</a>
             </div>
             <div class="mt-5 d-none d-md-block opacity-50 animate-bounce" aria-hidden="true">
@@ -88,6 +99,13 @@
                 </svg>
             </div>
         </div>
+        
+        <!-- Coffee Drip Separator -->
+        <div class="drip-separator bottom" aria-hidden="true">
+            <svg viewBox="0 0 1440 100" preserveAspectRatio="none">
+                <path fill="currentColor" d="M0,0 C240,90 480,90 720,50 C960,10 1200,10 1440,50 L1440,0 L0,0 Z"></path>
+            </svg>
+        </div>
     </header>
     <div class="d-flex flex-column min-vh-100" style="position: relative;">
         
@@ -589,6 +607,7 @@
 
         <!-- Contact Section -->
         <section id="contact" class="section-padding">
+            <div class="coffee-stain stain-2" aria-hidden="true"></div>
             <div class="container">
                 <h2>Contact Us</h2>
                 <div class="row justify-content-center">
@@ -596,7 +615,12 @@
                         <div class="card bg-transparent border-0 shadow-none">
                             <div class="card-body">
                                 <p class="lead mb-4">Ready to start your next project? Let's connect over coffee (or email).</p>
-                                <a href="mailto:info@dustin.coffee" class="btn btn-primary btn-lg mb-3">Send an Email</a>
+                                <a href="mailto:info@dustin.coffee" class="btn btn-primary btn-lg mb-3">
+                                    <svg class="btn-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+                                    </svg>
+                                    Send an Email
+                                </a>
                                 <p class="card-text text-muted mt-3">View your invoices at <a href="https://invoice.dustin.coffee/client" target="_blank" class="text-decoration-underline">invoice.dustin.coffee</a></p>
                             </div>
                         </div>
@@ -607,6 +631,7 @@
     
     </div>
     <footer class="bg-dark text-white text-center py-5" >
+        <div class="coffee-grounds-pattern" aria-hidden="true"></div>
 
         <p>&copy; <span id="currentYear"></span> d@n tech. All rights reserved.</p>
         <p><a href="tos.html" class="text-white">Terms of Service</a> | <a href="privacy.html" class="text-white">Privacy Policy</a></p>
diff --git a/styles.css b/styles.css
index f795aa5..0971608 100644
--- a/styles.css
+++ b/styles.css
@@ -107,38 +107,149 @@ body {
     100% { transform: translate(0, 0) rotate(360deg); }
 }
 
-/* Steam Animation */
-.steam-container {
+/* ===== DECORATIVE ELEMENTS ===== */
+.drip-separator {
     position: absolute;
-    top: 40%; /* Adjust based on Hero layout */
-    left: 50%;
-    transform: translateX(-50%);
-    width: 200px;
-    height: 200px;
-    z-index: 0;
+    width: 100%;
+    left: 0;
+    line-height: 0;
+    z-index: 2;
+    overflow: hidden;
     pointer-events: none;
-    opacity: 0.3;
 }
 
-.steam-particle {
+.drip-separator svg {
+    display: block;
+    width: calc(100% + 1.3px);
+    height: 60px;
+}
+
+.drip-separator.bottom {
+    bottom: -1px;
+    transform: rotate(180deg);
+    color: var(--bg-body); /* Match the section below it */
+}
+
+/* Specific background match for where the drip lands */
+/* If the next section is section-alt, we need to match that */
+/* BUT here hero is followed by white/cream section, so bg-body is correct */
+
+/* Floating Cup Animation */
+.floating-cup {
     position: absolute;
-    width: 40px;
-    height: 40px;
-    background: radial-gradient(circle, var(--color-coffee-medium) 0%, transparent 70%);
-    border-radius: 50%;
-    opacity: 0;
-    filter: blur(8px);
-    animation: rise 4s infinite ease-in;
+    opacity: 0.04;
+    color: var(--color-coffee-dark);
+    animation: float-cup 18s infinite ease-in-out;
 }
 
-.steam-particle:nth-child(1) { left: 40%; animation-delay: 0s; }
-.steam-particle:nth-child(2) { left: 60%; animation-delay: 1.5s; width: 30px; height: 30px; }
-.steam-particle:nth-child(3) { left: 50%; animation-delay: 3s; width: 50px; height: 50px; }
+@media (prefers-color-scheme: dark) {
+    .floating-cup {
+        color: var(--color-cream);
+        opacity: 0.06;
+    }
+}
 
-@keyframes rise {
-    0% { transform: translateY(0) scale(1); opacity: 0; }
-    50% { opacity: 0.4; }
-    100% { transform: translateY(-100px) scale(2); opacity: 0; }
+.cup-1 { width: 120px; top: 25%; right: 10%; animation-delay: -2s; }
+
+@keyframes float-cup {
+    0% { transform: translate(0, 0) rotate(-5deg); }
+    50% { transform: translate(-20px, 30px) rotate(5deg); }
+    100% { transform: translate(0, 0) rotate(-5deg); }
+}
+
+/* Coffee Stains */
+.coffee-stain {
+    position: absolute;
+    background-repeat: no-repeat;
+    background-size: contain;
+    opacity: 0.06;
+    pointer-events: none;
+    z-index: 0;
+    /* Inline SVG for stain - ring shape */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236F4E37' d='M100,20 C145,20 180,55 180,100 C180,145 145,180 100,180 C55,180 20,145 20,100 C20,55 55,20 100,20 Z M100,35 C65,35 35,65 35,100 C35,135 65,165 100,165 C135,165 165,135 165,100 C165,65 135,35 100,35 Z'/%3E%3C/svg%3E");
+}
+
+.stain-2 {
+    width: 300px;
+    height: 300px;
+    top: -50px;
+    right: -50px;
+    transform: rotate(45deg);
+}
+
+/* Coffee Grounds Pattern */
+.coffee-grounds-pattern {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.1;
+    pointer-events: none;
+    background-image: radial-gradient(var(--color-coffee-medium) 1px, transparent 1px);
+    background-size: 20px 20px;
+}
+
+/* Button Icon Styling */
+.btn-icon {
+    margin-right: 0.5rem;
+    vertical-align: text-bottom;
+    transition: transform 0.3s ease;
+}
+
+.btn-primary:hover .btn-icon {
+    transform: rotate(-10deg) scale(1.1);
+}
+
+/* Ripple/Steam Effect on Buttons (Pseudo-element) */
+.btn-primary::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
+    transform: scale(0);
+    transition: transform 0.6s ease-out;
+    opacity: 0;
+}
+
+/* Corner Accents */
+.card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 60px;
+    height: 60px;
+    background: radial-gradient(circle at top right, rgba(212, 165, 116, 0.2), transparent 70%);
+    border-radius: 0 16px 0 100%;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+}
+
+.card:hover::before {
+    opacity: 1;
+}
+
+/* Scroll Progress Enhancement */
+.scroll-progress {
+    height: 6px; /* Slightly thicker */
+    background: linear-gradient(
+        to right,
+        var(--color-coffee-dark) 0%,
+        var(--color-gold) var(--scroll-progress, 0%),
+        transparent var(--scroll-progress, 0%)
+    );
+    box-shadow: 0 2px 10px rgba(212, 165, 116, 0.3);
+}
+
+.btn-primary:active::after {
+    transform: scale(1);
+    opacity: 1;
+    transition: 0s;
 }