dark-service-grid

Summary

Six-up grid of dark service cards on a black section background. Each card carries a numbered counter circle that flood-fills with the brand gradient on hover via a scaling pseudo-element, plus a bottom-right arrow link that switches its background to the gradient.

HTML structure (minimal)

<section class="service-section bg-color-1">
  <div class="auto-container">
    <div class="sec-title centred light">
      <span class="sub-title gradient-color">our Services</span>
      <h2>Check out our standout digital<br>agency services</h2>
    </div>
    <div class="row">
      <div class="col-lg-4 col-md-6 service-block">
        <div class="service-block-one">
          <div class="inner-box">
            <div class="count-text"><span class="gradient-color">1</span></div>
            <h3><a href="service-details.html">Branding & Art</a></h3>
            <p>Lorem ipsum dolor sit amet…</p>
            <div class="link-box"><a href="service-details.html" class="gradient-color"><i class="icon-3"></i></a></div>
          </div>
        </div>
      </div>
      <!-- 5 more service-block columns -->
    </div>
  </div>
</section>

Key SCSS tokens

.service-section { background: #1A1A1A; } /* via .bg-color-1 */

.service-block-one .inner-box {
  background: #1A1A1A;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 30px;
  padding: 40px 40px 34px 40px;
}

.service-block-one .inner-box .count-text {
  position: relative; width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.service-block-one .inner-box .count-text::before {
  content: ''; position: absolute; inset: -1px;
  background: var(--theme-color); /* gradient */
  border-radius: 50%;
  transform: scale(0);
  transition: all 500ms ease;
  z-index: -1;
}
.service-block-one .inner-box:hover .count-text::before { transform: scale(1); }

.service-block-one .inner-box .count-text span {
  background: var(--theme-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 500ms ease;
}
.service-block-one .inner-box:hover .count-text span { background: var(--title-color); }

Notable details

• The number's gradient text trick is reversed on hover: when the gradient circle appears, the number's gradient is replaced by a flat dark color so it stays readable against the new bright background.
• inset: -1px on the pseudo-element overflows the 1px border, hiding any seam between border and fill during the scale-in.
• The card is dark by default — placing it on a dark section background gives full-bleed feel; on a light section it would still read as a dark contrast card.

Use when

• Service or capability grids that need to feel premium and high-contrast.
• Numbered lists where you want the number to be a real visual element, not just a label.
• Dark-themed brand systems with one strong accent.

Caveats

• Dark cards on a dark page require careful image and icon contrast.
• The fixed 60px counter circle and 26px number make this hard to use with double-digit numbers without tweaking.