Obsidian Editorial — Live CSS Playground

{CF} CodeFronts Back to CSS Testimonials & Reviews Obsidian Editorial Pure CSS

HTML

<section class="tm-obs" aria-label="Client testimonials">
  <header class="tm-obs-head">Client Testimonials &middot; 2024</header>
  <div class="tm-obs-grid">

    <article class="tm-obs-card tm-obs-featured">
      <span class="tm-obs-accent" aria-hidden="true"></span>
      <span class="tm-obs-glyph" aria-hidden="true">&ldquo;</span>
      <div class="tm-obs-verified"><span class="tm-obs-vdot" aria-hidden="true"></span> Verified Purchase</div>
      <div class="tm-obs-stars" aria-label="5 out of 5 stars">
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
      </div>
      <blockquote class="tm-obs-quote">
        Working with them was unlike anything I'd experienced before. There's a rare quality in partners who can translate abstract vision into something that <em class="tm-obs-em">genuinely moves people</em>. Every deliverable exceeded what I thought was possible — not incrementally, but by an entirely different order of magnitude.
      </blockquote>
      <span class="tm-obs-rule" aria-hidden="true"></span>
      <figcaption class="tm-obs-author">
        <span class="tm-obs-avatar" aria-hidden="true">MV</span>
        <span class="tm-obs-meta">
          <cite class="tm-obs-name">Margaux Vellancourt</cite>
          <span class="tm-obs-role">Creative Director, Maison Cèdre</span>
        </span>
      </figcaption>
      <span class="tm-obs-source">G2 &middot; Verified</span>
    </article>

    <article class="tm-obs-card">
      <span class="tm-obs-accent" aria-hidden="true"></span>
      <span class="tm-obs-glyph" aria-hidden="true">&ldquo;</span>
      <div class="tm-obs-stars" aria-label="5 out of 5 stars">
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
      </div>
      <blockquote class="tm-obs-quote">
        The ROI was <em class="tm-obs-em">immediate and measurable</em>. Within three months our conversion rate doubled. I've never seen a team move that fast without sacrificing depth.
      </blockquote>
      <figcaption class="tm-obs-author">
        <span class="tm-obs-avatar" aria-hidden="true">JR</span>
        <span class="tm-obs-meta">
          <cite class="tm-obs-name">James Rothenberg</cite>
          <span class="tm-obs-role">VP Growth, Apex Capital</span>
        </span>
      </figcaption>
      <span class="tm-obs-source">Trustpilot</span>
    </article>

    <article class="tm-obs-card">
      <span class="tm-obs-accent" aria-hidden="true"></span>
      <span class="tm-obs-glyph" aria-hidden="true">&ldquo;</span>
      <div class="tm-obs-stars" aria-label="4.5 out of 5 stars">
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star tm-obs-star-half" aria-hidden="true"></span>
      </div>
      <blockquote class="tm-obs-quote">
        Elegance is hard to teach and <em class="tm-obs-em">even harder to find</em>. They brought both craft and instinct. Our brand finally feels like it belongs in the rooms we're trying to enter.
      </blockquote>
      <figcaption class="tm-obs-author">
        <span class="tm-obs-avatar" aria-hidden="true">SL</span>
        <span class="tm-obs-meta">
          <cite class="tm-obs-name">Simone Laurent</cite>
          <span class="tm-obs-role">Founder, Studio Onyx</span>
        </span>
      </figcaption>
      <span class="tm-obs-source">LinkedIn</span>
    </article>

    <article class="tm-obs-card">
      <span class="tm-obs-accent" aria-hidden="true"></span>
      <span class="tm-obs-glyph" aria-hidden="true">&ldquo;</span>
      <div class="tm-obs-stars" aria-label="5 out of 5 stars">
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
      </div>
      <blockquote class="tm-obs-quote">
        I handed them a problem without a brief and they returned a <em class="tm-obs-em">solution with a point of view</em>. That intellectual generosity is rare and worth every penny.
      </blockquote>
      <figcaption class="tm-obs-author">
        <span class="tm-obs-avatar" aria-hidden="true">AT</span>
        <span class="tm-obs-meta">
          <cite class="tm-obs-name">Alistair Thornwood</cite>
          <span class="tm-obs-role">Partner, Thornwood &amp; Co.</span>
        </span>
      </figcaption>
      <span class="tm-obs-source">Clutch</span>
    </article>

    <article class="tm-obs-card">
      <span class="tm-obs-accent" aria-hidden="true"></span>
      <span class="tm-obs-glyph" aria-hidden="true">&ldquo;</span>
      <div class="tm-obs-stars" aria-label="5 out of 5 stars">
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
        <span class="tm-obs-star" aria-hidden="true"></span>
      </div>
      <blockquote class="tm-obs-quote">
        Six-figure decision, zero regret. The project paid for itself in <em class="tm-obs-em">sixty-four days</em>. I'm not sure what else there is to say.
      </blockquote>
      <figcaption class="tm-obs-author">
        <span class="tm-obs-avatar" aria-hidden="true">NB</span>
        <span class="tm-obs-meta">
          <cite class="tm-obs-name">Nadia Blumenfeld</cite>
          <span class="tm-obs-role">CEO, Helix Ventures</span>
        </span>
      </figcaption>
      <span class="tm-obs-source">G2 &middot; Verified</span>
    </article>
  </div>
</section>

CSS

/* Obsidian Editorial — dark editorial spread. Self-contained: no body
   styles, no fixed positioning, all decoration lives inside .tm-obs.
   Each card is a real <article>, quote is a real <blockquote>, author
   is a real <figcaption> with <cite>. Hover reveals the gold accent
   line at the top of each card; the glyph quote-mark behind the quote
   gets slightly brighter. */
.tm-obs {
  --tm-obs-ink:       #0a0a0a;
  --tm-obs-paper:     #f5f0e8;
  --tm-obs-gold:      #b8962e;
  --tm-obs-gold-l:    #d4b253;
  --tm-obs-cream:     #ede8d8;
  --tm-obs-muted:     #5a5040;
  position: relative;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 44px);
  background: var(--tm-obs-ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--tm-obs-cream);
  overflow: hidden;
  min-height: 520px;
}
/* Subtle film-grain overlay — pure SVG noise, no HTTP request. Adds
   tactile depth so the flat black surface reads as paper, not as a
   blank canvas. */
.tm-obs::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.tm-obs-head {
  position: relative;
  z-index: 1;
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tm-obs-gold);
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.tm-obs-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--tm-obs-gold), transparent);
  max-width: 200px;
}
.tm-obs-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1px;
  background: #1a1510;
}
.tm-obs-card {
  background: var(--tm-obs-ink);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: background 0.5s;
  display: flex;
  flex-direction: column;
}
.tm-obs-card:hover { background: #0f0d08; }
.tm-obs-featured {
  grid-row: 1 / 3;
  background: #0d0b06;
  border-right: 1px solid #1a1510;
}
.tm-obs-glyph {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 200px;
  line-height: 0.7;
  color: var(--tm-obs-gold);
  opacity: 0.08;
  position: absolute;
  top: 24px;
  left: 28px;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.5s;
}
.tm-obs-card:hover .tm-obs-glyph { opacity: 0.14; }
.tm-obs-featured .tm-obs-glyph {
  font-size: 280px;
  opacity: 0.06;
  top: 16px;
}
.tm-obs-featured:hover .tm-obs-glyph { opacity: 0.1; }
.tm-obs-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--tm-obs-gold), transparent);
  opacity: 0;
  transition: opacity 0.5s;
}
.tm-obs-card:hover .tm-obs-accent { opacity: 1; }
.tm-obs-featured .tm-obs-accent { opacity: 0.4; }
.tm-obs-featured:hover .tm-obs-accent { opacity: 1; }
.tm-obs-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tm-obs-gold);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.tm-obs-vdot {
  width: 5px;
  height: 5px;
  background: var(--tm-obs-gold);
  border-radius: 50%;
  animation: tm-obs-pulse 2s infinite;
}
@keyframes tm-obs-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}
.tm-obs-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.tm-obs-star {
  width: 10px;
  height: 10px;
  background: var(--tm-obs-gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.tm-obs-star-half {
  background: linear-gradient(to right, var(--tm-obs-gold) 50%, #2a2418 50%);
}
.tm-obs-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  color: var(--tm-obs-cream);
  line-height: 1.65;
  margin: 0 0 24px;
  font-size: 1.02rem;
  position: relative;
  z-index: 1;
  border: 0;
  padding: 0;
}
.tm-obs-featured .tm-obs-quote {
  font-size: 1.35rem;
  margin-bottom: 32px;
}
.tm-obs-em {
  color: var(--tm-obs-gold-l);
  font-style: normal;
  font-weight: 400;
}
.tm-obs-rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--tm-obs-gold);
  margin: 20px 0;
  opacity: 0.5;
  position: relative;
  z-index: 1;
}
.tm-obs-author {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  margin-top: auto;
}
.tm-obs-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--tm-obs-gold);
  background: #1a1510;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px;
  color: var(--tm-obs-gold);
  opacity: 0.85;
  flex-shrink: 0;
}
.tm-obs-featured .tm-obs-avatar {
  width: 52px;
  height: 52px;
}
.tm-obs-meta { display: flex; flex-direction: column; }
.tm-obs-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px;
  font-style: normal;
  color: var(--tm-obs-paper);
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.tm-obs-role {
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tm-obs-muted);
}
.tm-obs-source {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tm-obs-muted);
  border: 1px solid #2a2418;
  padding: 3px 7px;
}
/* Mobile fallback — collapse 3 cols to a single stack so cards stay
   readable. Featured stops spanning two rows. */
@media (max-width: 720px) {
  .tm-obs-grid { grid-template-columns: 1fr; }
  .tm-obs-featured { grid-row: auto; border-right: none; }
  .tm-obs-glyph,
  .tm-obs-featured .tm-obs-glyph { font-size: 120px; top: 12px; left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-obs-vdot { animation: none; }
  .tm-obs-card { transition: none; }
}