C10 · פס רץ (Band)

CSS

/* C10 · פס רץ (Band) */
.cwrap{container-type:inline-size}
.cstage{--pad:clamp(20px,4cqi,64px);padding:clamp(36px,5cqi,80px) var(--pad)}
.tx{height:11px;border-radius:6px;background:#dfe0ea;margin:9px 0}
.tx.s{width:38%}.tx.m{width:62%}.tx.l{width:86%}
.ttl{font-size:clamp(22px,2.6cqi,34px);font-weight:700;margin:0 0 10px;line-height:1.2}
.lead{color:var(--muted, #6a6d85);margin:0 0 14px;font-size:15px;line-height:1.6}
.btn{display:inline-block;background:var(--ink, #16182b);color:#fff;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;margin-top:12px}
.cwrap .ph{font-size:clamp(14px,1.6cqi,20px)}
.c10{margin-inline:calc(-1 * var(--pad));background:var(--ink, #16182b);color:#fff;padding:18px 0;overflow:hidden}
.c10 .track{display:flex;gap:56px;width:max-content;white-space:nowrap;animation:c10 24s linear infinite;padding-inline:28px}
.c10 .lg{font-weight:800;font-size:18px;letter-spacing:.06em;opacity:.85}
@keyframes c10{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.c10 .track{animation:none}}

HTML

<div class="cwrap cstage"><div class="tx m"></div><div class="tx l"></div>
<div class="c10"><div class="track">
  <span class="lg">LOGO</span><span class="lg">BRAND</span><span class="lg">STUDIO</span><span class="lg">HOUSE</span><span class="lg">LABS</span><span class="lg">GROUP</span>
  <span class="lg">LOGO</span><span class="lg">BRAND</span><span class="lg">STUDIO</span><span class="lg">HOUSE</span><span class="lg">LABS</span><span class="lg">GROUP</span>
</div></div>
<div class="tx l"></div><div class="tx m"></div></div>