From 4868111a14f24fbb9894d4a8e8cc2ecffc1d8913 Mon Sep 17 00:00:00 2001 From: Joel Brock Date: Sat, 16 May 2026 09:18:41 -0700 Subject: [PATCH] Testimonials: blend into page, inline nav arrows, drop dots User wanted the testimonial section to feel "of the page" rather than a card sitting on top of it, and to occupy less vertical space. - Strip all chrome from .card--testimonial: transparent background, no border, no shadow, no hover lift. Same treatment applied in the swiss + cosmos overrides so per-theme backgrounds don't sneak back. - Restructure the carousel markup to put the prev/next buttons directly beside the viewport (carousel--inline = flex row), no separate controls block, no dot indicators. - Shrink the curly quote mark and the avatar (44 -> 32px); tighten internal gaps. Removed the rule above the attribution row. - Keep healthy horizontal padding via clamp() so the arrows don't crowd the surrounding sections. - Update aria-label on the carousel itself instead of the dots so screen readers still get position context. --- assets/css/cosmos.css | 4 +++- assets/css/styles.css | 46 ++++++++++++++++++++++++++++++------------- assets/css/swiss.css | 4 ++-- assets/js/app.js | 13 ++++-------- 4 files changed, 41 insertions(+), 26 deletions(-) diff --git a/assets/css/cosmos.css b/assets/css/cosmos.css index 4871098..bbd2f9d 100644 --- a/assets/css/cosmos.css +++ b/assets/css/cosmos.css @@ -572,7 +572,9 @@ /* ───── testimonial / carousel ───── */ :root[data-template="cosmos"] .card--testimonial { - background: linear-gradient(135deg, rgba(30, 22, 64, 0.55), rgba(14, 8, 38, 0.55)); + background: transparent; + backdrop-filter: none; + -webkit-backdrop-filter: none; } :root[data-template="cosmos"] .testimonial__mark { color: var(--accent); diff --git a/assets/css/styles.css b/assets/css/styles.css index c5cb84e..363556a 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -479,6 +479,12 @@ body::before { /* ───── carousel (testimonials) ───── */ .carousel { position: relative; } +.carousel--inline { + display: flex; align-items: center; + gap: clamp(0.5rem, 2vw, 1.5rem); + padding: 0 clamp(0.5rem, 3vw, 2rem); +} +.carousel--inline .carousel__viewport { flex: 1 1 0; min-width: 0; } .carousel__viewport { position: relative; overflow: hidden; @@ -542,25 +548,38 @@ body::before { .carousel__dot:hover { background: var(--ink-2); } .carousel__dot.is-active { background: var(--accent); transform: scale(1.35); } -/* ───── testimonial card ───── */ +/* ───── testimonial — "of the page", no chrome ───── */ .card--testimonial { - padding: clamp(1.75rem, 3vw, 3rem) clamp(1.5rem, 4vw, 3.5rem); + padding: 0.5rem 0; + background: transparent; + border: 0; + border-radius: 0; + box-shadow: none; display: flex; flex-direction: column; align-items: center; text-align: center; - gap: 1.25rem; - min-height: clamp(220px, 24vw, 300px); + gap: 0.85rem; + min-height: 0; + isolation: auto; } -.card--testimonial::after { display: none; } +.card--testimonial:hover { + transform: none; + background: transparent; + border-color: transparent; + box-shadow: none; +} +.card--testimonial::after, +.card--testimonial::before { display: none; } .testimonial__mark { font-family: var(--display); - font-size: clamp(4rem, 6vw, 6rem); - line-height: 0.6; + font-size: clamp(2.5rem, 3.5vw, 3.5rem); + line-height: 0.55; color: var(--accent); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; font-weight: 400; user-select: none; + opacity: 0.85; } .testimonial__quote { font-family: var(--display); @@ -598,16 +617,15 @@ body::before { } .testimonial__by { - display: flex; align-items: center; justify-content: center; gap: 0.85rem; - margin-top: auto; - padding-top: 0.85rem; - border-top: 1px solid var(--rule); - width: 100%; - max-width: 32rem; + display: flex; align-items: center; justify-content: center; gap: 0.7rem; + margin: 0; + padding: 0; + border: 0; + width: auto; } .testimonial__avatar { flex: 0 0 auto; - width: 44px; height: 44px; + width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--paper-2); diff --git a/assets/css/swiss.css b/assets/css/swiss.css index 125ba30..195a402 100644 --- a/assets/css/swiss.css +++ b/assets/css/swiss.css @@ -419,8 +419,8 @@ } /* ───── testimonial / carousel ───── */ -:root[data-template="swiss"] .card--testimonial { background: var(--paper-2); } -:root[data-template="swiss"] .card--testimonial:hover { background: var(--paper-2); color: var(--ink); } +:root[data-template="swiss"] .card--testimonial { background: transparent; } +:root[data-template="swiss"] .card--testimonial:hover { background: transparent; color: var(--ink); } :root[data-template="swiss"] .card--testimonial:hover .testimonial__quote, :root[data-template="swiss"] .card--testimonial:hover .testimonial__name { color: var(--ink); } :root[data-template="swiss"] .testimonial__mark { diff --git a/assets/js/app.js b/assets/js/app.js index 5d0bca0..beb9bb6 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -155,19 +155,13 @@ let body; if (isTestimonials) { const count = (sec.items || []).length; - const dots = Array.from({ length: count }, (_, i) => - ``).join(""); body = ` -
+
+ ${count > 1 ? `` : ""}
${items}
- ${count > 1 ? ` -
- -
${dots}
- -
` : ""} + ${count > 1 ? `` : ""}
`; } else { const gridClass = isClients ? "grid--clients" : "grid"; @@ -475,6 +469,7 @@ i = (n + slides.length) % slides.length; slides.forEach((s, k) => s.classList.toggle("is-active", k === i)); dots.forEach((d, k) => d.classList.toggle("is-active", k === i)); + car.setAttribute("aria-label", `Testimonial ${i + 1} of ${slides.length}`); }; show(0);