From 60a4437bc4acd63650bfe3fee914777eb9d55568 Mon Sep 17 00:00:00 2001 From: hobokenchicken Date: Wed, 11 Feb 2026 23:08:10 -0500 Subject: [PATCH] feat(ui): redesign testimonials with avatars, stars, and improved typography --- index.html | 62 +++++++++++++++++++++++++--- styles.css | 119 +++++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 158 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index 053a303..86ebd26 100644 --- a/index.html +++ b/index.html @@ -458,14 +458,66 @@
-
-

"It was a pleasure working with Dustin on my counseling practice website. Throughout the process, he was thoughtful, responsive, and truly understood my vision..."

-

"It was a pleasure working with Dustin on my counseling practice website. Throughout the process, he was thoughtful, responsive, and truly understood my vision. In addition to bringing my ideas to life with a clean, professional design, he made the entire process enjoyable and easy. His attention to detail, creativity, and technical skills are excellent. As a result of Dustin's work, I now have a website that truly represents my practice. There is no better person to recommend than him!"

-

- Margaret Pemu, Pemu Counseling and Wellness

- +
+
“
+ +
+
MP
+
+
Margaret Pemu
+ Pemu Counseling and Wellness +
+
+ +
+ + + + + +
+ +
+

"It was a pleasure working with Dustin on my counseling practice website. Throughout the process, he was thoughtful, responsive, and truly understood my vision..."

+

"It was a pleasure working with Dustin on my counseling practice website. Throughout the process, he was thoughtful, responsive, and truly understood my vision. In addition to bringing my ideas to life with a clean, professional design, he made the entire process enjoyable and easy. His attention to detail, creativity, and technical skills are excellent. As a result of Dustin's work, I now have a website that truly represents my practice. There is no better person to recommend than him!"

+
+
+
+
+
+
“
+ +
+
L
+
+
Laura
+ Woman-Owned Small Business +
+
+ +
+ + + + + +
+ +
+

"Working with Dustin at d@n tech was an absolute pleasure from start to finish. He is funny, engaging, and listens well. He offered grace for my lack of technical skill..."

+

"Working with Dustin at d@n tech was an absolute pleasure from start to finish. He is funny, engaging, and listens well. He offered grace for my lack of technical skill and worked from simple examples provided, which translated into a functional and funky-professional website that represents my brand. + His patience and technical skills are truly impressive. Furthermore, he was responsive throughout the entire process, always open to feedback, and quick to implement changes. What I appreciated most was how he spent time working toward what I wanted and was supportive in my goals."

+
+ +
+
+
+ +
+
diff --git a/styles.css b/styles.css index a17cca6..9513f9f 100644 --- a/styles.css +++ b/styles.css @@ -588,17 +588,97 @@ footer { /* ===== INTERACTIVE TESTIMONIALS ===== */ .testimonial-card { position: relative; - overflow: visible; + overflow: hidden; + background-color: var(--bg-body); + border: 1px solid var(--border-subtle); + border-radius: 12px; + padding: 2rem; + transition: transform 0.3s ease, box-shadow 0.3s ease; + height: 100%; +} + +.section-alt .testimonial-card { + background-color: var(--bg-surface); +} + +.testimonial-card:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-soft); + border-color: var(--color-secondary); +} + +.testimonial-header { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1.5rem; + position: relative; + z-index: 2; +} + +.testimonial-avatar { + width: 60px; + height: 60px; + background: linear-gradient(135deg, var(--color-coffee-medium), var(--color-coffee-dark)); + color: var(--color-cream); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 1.5rem; + flex-shrink: 0; + border: 2px solid var(--border-subtle); + box-shadow: 0 4px 10px rgba(0,0,0,0.1); +} + +.testimonial-meta h5 { + margin: 0; + font-size: 1.1rem; + color: var(--text-body); +} + +.testimonial-meta small { + display: block; + font-size: 0.85rem; + opacity: 0.8; + color: var(--color-coffee-medium); +} + +.testimonial-rating { + display: flex; + gap: 0.2rem; + margin-bottom: 1rem; + color: var(--color-gold); +} + +.testimonial-quote-icon { + position: absolute; + top: -10px; + right: 20px; + font-size: 8rem; + line-height: 1; + font-family: serif; + color: var(--color-secondary); + opacity: 0.1; + pointer-events: none; + z-index: 0; +} + +.testimonial-full, .testimonial-excerpt { + font-style: italic; + font-size: 1.05rem; + color: var(--text-body); + position: relative; + z-index: 1; + line-height: 1.7; + margin-bottom: 1.5rem; } .testimonial-full { display: none; } -.testimonial-excerpt { - display: block; -} - .testimonial-card.expanded .testimonial-excerpt { display: none; } @@ -607,19 +687,10 @@ footer { display: block; } -.testimonial-author { - font-weight: 600; - font-style: italic; - color: var(--color-coffee-medium); - margin-top: 1rem; - margin-bottom: 0; -} - .testimonial-toggle { - margin-top: 1rem; - background: var(--color-secondary); - color: var(--color-coffee-dark); - border: none; + background: transparent; + color: var(--color-primary); + border: 2px solid var(--color-primary); padding: 0.5rem 1.5rem; border-radius: 50px; font-weight: 700; @@ -627,19 +698,31 @@ footer { cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; - transition: transform 0.2s, background-color 0.2s; + transition: all 0.2s; + margin-top: auto; + display: inline-block; } .testimonial-toggle:hover { background: var(--color-primary); color: white; transform: translateY(-2px); + box-shadow: 0 4px 10px rgba(29, 120, 116, 0.2); } .testimonial-toggle:active { transform: translateY(0); } +@media (prefers-color-scheme: dark) { + .testimonial-meta h5 { + color: var(--color-cream); + } + .testimonial-meta small { + color: var(--color-secondary); + } +} + /* Custom Coffee Outline Button */ .btn-outline-coffee { color: var(--color-coffee-dark);