CSS19 · מרקי אנכי (עדויות)

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}

/* CSS19 · מרקי אנכי (עדויות) */
.vmq{height:380px;overflow:hidden;max-width:420px;margin-inline:auto;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.vmq-track{display:flex;flex-direction:column;gap:14px;animation:vup 18s linear infinite}
.vmq:hover .vmq-track{animation-play-state:paused}
.vq{background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);border-radius:12px;padding:16px 20px;font-size:14.5px}
.vq b{display:block;font-size:13px;color:var(--muted, #6a6d85);margin-top:6px;font-weight:500}
@keyframes vup{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){.vmq-track{animation:none}}

HTML

<div class="stage tight"><div class="vmq"><div class="vmq-track">
<div class="vq">"שירות מדהים, תוצאה מעל המצופה"<b>דנה, תל אביב</b></div>
<div class="vq">"האתר החדש הכפיל לנו את הפניות"<b>יוסי, חיפה</b></div>
<div class="vq">"מקצוען אמיתי, מומלץ בחום"<b>מיכל, ירושלים</b></div>
<div class="vq">"תהליך מהיר ומדויק"<b>אבי, באר שבע</b></div>
<div class="vq">"שירות מדהים, תוצאה מעל המצופה"<b>דנה, תל אביב</b></div>
<div class="vq">"האתר החדש הכפיל לנו את הפניות"<b>יוסי, חיפה</b></div>
<div class="vq">"מקצוען אמיתי, מומלץ בחום"<b>מיכל, ירושלים</b></div>
<div class="vq">"תהליך מהיר ומדויק"<b>אבי, באר שבע</b></div>
</div></div></div>