Interior — Testimonials

:root {
  --bg: #f6f2ec;
  --paper: #fbf9f5;
  --ink: #2c2620;
  --ink-2: #5a5147;
  --muted: #8a8175;
  --clay: #b08968;
  --clay-d: #8c6a4f;
  --walnut: #5c4433;
  --sage: #9caf88;
  --line: rgba(44, 38, 32, 0.12);
  --white: #fff;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --shadow: 0 18px 44px -24px rgba(44, 38, 32, 0.5);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(176, 137, 104, 0.1), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}

.wrap {
  width: 100%;
  max-width: 780px;
}

/* Intro */
.intro { text-align: center; margin-bottom: 34px; }

.eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay-d);
}

.headline {
  margin: 0 auto 12px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.lede {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 15px;
}

/* Carousel shell */
.carousel {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stage {
  position: relative;
  flex: 1;
  min-height: 340px;
}

.slide {
  position: absolute;
  inset: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 40px 44px 34px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
  visibility: hidden;
}

.slide::before {
  content: "\201C";
  position: absolute;
  top: 2px;
  left: 26px;
  font-family: "Cormorant Garamond", serif;
  font-size: 120px;
  line-height: 1;
  color: rgba(176, 137, 104, 0.22);
  pointer-events: none;
}

.slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.slide__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--white);
}

.badge--room {
  color: var(--walnut);
  border-color: rgba(92, 68, 51, 0.28);
  background: rgba(156, 175, 136, 0.14);
}

.quote {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.32;
  color: var(--ink);
  flex: 1;
}

.rating {
  display: flex;
  gap: 4px;
  margin: 22px 0 18px;
}

.rating span {
  width: 15px;
  height: 15px;
  color: var(--clay);
  display: inline-flex;
}

.rating span.is-off { color: rgba(176, 137, 104, 0.28); }

.rating svg { width: 100%; height: 100%; }

.attrib {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.attrib__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.attrib__meta {
  font-size: 13px;
  color: var(--muted);
}

.attrib__meta em {
  font-style: normal;
  color: var(--clay-d);
}

/* Nav buttons */
.nav {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.nav:hover {
  background: var(--clay);
  color: var(--white);
  border-color: var(--clay);
  box-shadow: var(--shadow);
}

.nav:active { transform: scale(0.92); }

.nav:focus-visible {
  outline: 2px solid var(--clay-d);
  outline-offset: 2px;
}

/* Dots */
.dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 26px 0 30px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(44, 38, 32, 0.2);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}

.dot:hover { background: var(--clay); }

.dot.is-active {
  width: 26px;
  border-radius: 999px;
  background: var(--clay-d);
}

.dot:focus-visible {
  outline: 2px solid var(--clay-d);
  outline-offset: 3px;
}

/* Thumbnail rail */
.rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.rail__btn {
  width: 100%;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 12px 13px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.rail__btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(176, 137, 104, 0.5);
}

.rail__btn:focus-visible {
  outline: 2px solid var(--clay-d);
  outline-offset: 2px;
}

.rail__btn.is-active {
  border-color: var(--clay);
  background: var(--white);
  box-shadow: inset 0 -2px 0 var(--clay);
}

.rail__name {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}

.rail__proj {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  background: var(--walnut);
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 20;
}

.toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 520px) {
  body { padding: 30px 14px; }

  .carousel { gap: 8px; }

  .nav { width: 38px; height: 38px; }

  .stage { min-height: 380px; }

  .slide { padding: 30px 22px 26px; }

  .slide::before { font-size: 90px; left: 14px; }

  .quote { font-size: 21px; }

  .rail { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .slide, .nav, .dot, .rail__btn, .toast { transition: opacity 0.2s ease; }
}

(function () {
  "use strict";

  var DATA = [
    {
      name: "Elena Marchetti",
      project: "Cirrus Loft",
      room: "Living Room",
      rating: 5,
      color: "#b08968",
      quote:
        "They read the light in our loft before they read the brief. Every material feels chosen, not sourced. Six months in, guests still stop at the doorway before they say a word.",
    },
    {
      name: "Theo Brandt",
      project: "Fen Cottage Kitchen",
      room: "Kitchen",
      rating: 5,
      color: "#5c4433",
      quote:
        "We wanted warmth without clutter, and they gave us a room that cooks as well as it looks. The oak island has become the place everyone drifts back to.",
    },
    {
      name: "Priya Raman",
      project: "Slate & Linen Suite",
      room: "Bedroom",
      rating: 4,
      color: "#9caf88",
      quote:
        "Calm was the whole assignment, and they delivered it in texture. Waking up here feels like the softest possible start to the day, every single morning.",
    },
    {
      name: "Marcus Adeyemi",
      project: "Harbour View Study",
      room: "Home Office",
      rating: 5,
      color: "#8c6a4f",
      quote:
        "My study used to be an afterthought at the end of the hall. Now it is the reason I look forward to focused work. Nothing shouts, yet everything has intent.",
    },
    {
      name: "Sofia Lindqvist",
      project: "Terracotta Terrace",
      room: "Outdoor",
      rating: 5,
      color: "#b08968",
      quote:
        "They turned a bare balcony into the room we use most. The palette pulls the outside in, and the evenings out here have quietly rearranged our whole summer.",
    },
  ];

  var stage = document.querySelector("[data-stage]");
  var dotsWrap = document.querySelector("[data-dots]");
  var rail = document.querySelector("[data-rail]");
  var toastEl = document.querySelector("[data-toast]");
  var prevBtn = document.querySelector("[data-prev]");
  var nextBtn = document.querySelector("[data-next]");

  var current = 0;
  var timer = null;
  var DELAY = 6000;
  var toastTimer = null;

  function initials(name) {
    return name
      .split(" ")
      .map(function (w) { return w.charAt(0); })
      .slice(0, 2)
      .join("");
  }

  function starSvg(on) {
    return (
      '<span class="' + (on ? "" : "is-off") + '">' +
      '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 2.5l2.9 5.9 6.6 1-4.8 4.6 1.1 6.5L12 17.9 6.2 20.5l1.1-6.5L2.5 9.4l6.6-1z"/></svg>' +
      "</span>"
    );
  }

  function buildSlides() {
    DATA.forEach(function (t, i) {
      var slide = document.createElement("article");
      slide.className = "slide";
      slide.setAttribute("role", "group");
      slide.setAttribute("aria-roledescription", "slide");
      slide.setAttribute("aria-label", i + 1 + " of " + DATA.length);
      if (i === 0) slide.classList.add("is-active");

      var stars = "";
      for (var s = 0; s < 5; s++) stars += starSvg(s < t.rating);

      slide.innerHTML =
        '<div class="slide__badges">' +
          '<span class="badge">' + t.project + "</span>" +
          '<span class="badge badge--room">' + t.room + "</span>" +
        "</div>" +
        '<blockquote class="quote">' + t.quote + "</blockquote>" +
        '<div class="rating" aria-label="Rated ' + t.rating + ' out of 5">' + stars + "</div>" +
        '<div class="attrib">' +
          '<span class="avatar" style="background:' + t.color + '">' + initials(t.name) + "</span>" +
          "<span>" +
            '<span class="attrib__name">' + t.name + "</span>" +
            '<span class="attrib__meta"><em>' + t.room + "</em> · " + t.project + "</span>" +
          "</span>" +
        "</div>";

      stage.appendChild(slide);
    });
  }

  function buildDots() {
    DATA.forEach(function (t, i) {
      var d = document.createElement("button");
      d.className = "dot" + (i === 0 ? " is-active" : "");
      d.type = "button";
      d.setAttribute("role", "tab");
      d.setAttribute("aria-label", "Testimonial from " + t.name);
      d.setAttribute("aria-selected", i === 0 ? "true" : "false");
      d.addEventListener("click", function () { go(i, true); });
      dotsWrap.appendChild(d);
    });
  }

  function buildRail() {
    DATA.forEach(function (t, i) {
      var li = document.createElement("li");
      var b = document.createElement("button");
      b.className = "rail__btn" + (i === 0 ? " is-active" : "");
      b.type = "button";
      b.innerHTML =
        '<span class="rail__name">' + t.name + "</span>" +
        '<span class="rail__proj">' + t.project + "</span>";
      b.addEventListener("click", function () {
        go(i, true);
        toast("Reading " + t.name.split(" ")[0] + "’s review");
      });
      li.appendChild(b);
      rail.appendChild(li);
    });
  }

  function go(index, userAction) {
    var len = DATA.length;
    current = (index + len) % len;

    var slides = stage.querySelectorAll(".slide");
    slides.forEach(function (s, i) { s.classList.toggle("is-active", i === current); });

    dotsWrap.querySelectorAll(".dot").forEach(function (d, i) {
      var on = i === current;
      d.classList.toggle("is-active", on);
      d.setAttribute("aria-selected", on ? "true" : "false");
    });

    rail.querySelectorAll(".rail__btn").forEach(function (b, i) {
      b.classList.toggle("is-active", i === current);
    });

    if (userAction) restart();
  }

  function next(user) { go(current + 1, user); }
  function prev(user) { go(current - 1, user); }

  function start() {
    stop();
    timer = setInterval(function () { next(false); }, DELAY);
  }
  function stop() {
    if (timer) { clearInterval(timer); timer = null; }
  }
  function restart() { start(); }

  function toast(msg) {
    toastEl.textContent = msg;
    toastEl.classList.add("is-show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      toastEl.classList.remove("is-show");
    }, 2200);
  }

  /* wiring */
  buildSlides();
  buildDots();
  buildRail();

  prevBtn.addEventListener("click", function () { prev(true); });
  nextBtn.addEventListener("click", function () { next(true); });

  // pause on hover / focus
  var carousel = document.querySelector(".carousel");
  ["mouseenter", "focusin"].forEach(function (ev) {
    carousel.addEventListener(ev, stop);
  });
  ["mouseleave", "focusout"].forEach(function (ev) {
    carousel.addEventListener(ev, start);
  });

  // keyboard arrows
  document.addEventListener("keydown", function (e) {
    if (e.key === "ArrowLeft") { prev(true); }
    else if (e.key === "ArrowRight") { next(true); }
  });

  // swipe
  var startX = 0, tracking = false;
  stage.addEventListener("touchstart", function (e) {
    startX = e.touches[0].clientX; tracking = true;
  }, { passive: true });
  stage.addEventListener("touchend", function (e) {
    if (!tracking) return;
    tracking = false;
    var dx = e.changedTouches[0].clientX - startX;
    if (Math.abs(dx) > 45) { dx < 0 ? next(true) : prev(true); }
  });

  start();
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Interior — Testimonials</title>
  <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@400;500;600;700;800&family=Cormorant+Garamond:wght@400;500;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="wrap">
    <header class="intro">
      <p class="eyebrow">In their words</p>
      <h1 class="headline">What our clients say</h1>
      <p class="lede">A decade of rooms shaped around the people who live in them. Here is what a few of them wrote back to Marlowe &amp; Fen after moving in.</p>
    </header>

    <section class="carousel" aria-roledescription="carousel" aria-label="Client testimonials">
      <button class="nav nav--prev" type="button" aria-label="Previous testimonial" data-prev>
        <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>

      <div class="stage" data-stage aria-live="polite">
        <!-- slides injected by script.js -->
      </div>

      <button class="nav nav--next" type="button" aria-label="Next testimonial" data-next>
        <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M9 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
    </section>

    <div class="dots" role="tablist" aria-label="Choose a testimonial" data-dots></div>

    <ul class="rail" data-rail aria-label="Testimonial thumbnails"></ul>
  </main>

  <div class="toast" data-toast role="status" aria-live="polite"></div>
  <script src="script.js"></script>
</body>
</html>