CSS28 · אדוות רקע מאחורי אלמנט

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.gbtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding-inline:28px;border-radius:999px;background:var(--accent, #4a3aff);color:var(--accent-ink, #fff);font-weight:500;font-size:16px;border:0;cursor:pointer;font-family:inherit}

/* CSS28 · אדוות רקע מאחורי אלמנט */
.rip{position:relative;height:clamp(320px,50vh,480px);display:grid;place-items:center;overflow:hidden;border-radius:var(--r, 14px);background:var(--card, #fff);border:1px solid var(--line, #e4e4ee)}
.rip-ring{position:absolute;top:50%;left:50%;width:calc(180px + var(--i) * 70px);aspect-ratio:1;border-radius:50%;border:1px solid var(--accent, #4a3aff);
  background:color-mix(in srgb,var(--accent, #4a3aff) 6%,transparent);opacity:calc(.55 - var(--i) * .06);transform:translate(-50%,-50%) scale(1);
  animation:rip-pulse 3.2s cubic-bezier(.2,.6,.2,1) infinite;animation-delay:calc(var(--i) * .22s)}
@keyframes rip-pulse{50%{transform:translate(-50%,-50%) scale(.94)}}
.rip-core{position:relative;z-index:1;text-align:center}
.rip-core h3{margin:0 0 14px;font-size:clamp(22px,2.6vw,36px)}
@media (prefers-reduced-motion: reduce){.rip-ring{animation:none}}

HTML

<div class="stage tight"><div class="rip">
  <span class="rip-ring" style="--i:0"></span><span class="rip-ring" style="--i:1"></span><span class="rip-ring" style="--i:2"></span><span class="rip-ring" style="--i:3"></span>
  <span class="rip-ring" style="--i:4"></span><span class="rip-ring" style="--i:5"></span><span class="rip-ring" style="--i:6"></span><span class="rip-ring" style="--i:7"></span>
  <div class="rip-core"><h3>מוכנים להתחיל?</h3><button class="gbtn">קבעו שיחת היכרות</button></div>
</div></div>