LM10 · לוגואים שמקבלים את צבע הרקע

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}

/* LM10 · לוגואים שמקבלים את צבע הרקע */
.lgm{display:grid;gap:14px;max-width:min(1180px,94vw);margin-inline:auto}
.lgm-bar{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
.lgm-bar button{font:inherit;font-size:14px;padding:8px 16px;border-radius:999px;border:1px solid var(--line, #e4e4ee);background:var(--card, #fff);color:var(--ink, #16182b);cursor:pointer;transition:background-color .25s,color .25s}
.lgm-bar button.on{background:var(--ink, #16182b);color:var(--bg, #f7f7fa);border-color:var(--ink, #16182b)}
.lgm-strip{border-radius:var(--r, 14px);padding:clamp(26px,3.4vw,46px) clamp(18px,3vw,40px);background:var(--bg, #f7f7fa);color:var(--ink, #16182b);border:1px solid var(--line, #e4e4ee);
  transition:background-color .6s cubic-bezier(.2,.6,.2,1),color .6s cubic-bezier(.2,.6,.2,1)}
.lgm-strip[data-tone="ink"]{background:var(--ink, #16182b);color:var(--bg, #f7f7fa);border-color:var(--ink, #16182b)}
.lgm-strip[data-tone="accent"]{background:var(--accent, #4a3aff);color:var(--accent-ink, #fff);border-color:var(--accent, #4a3aff)}
.lgm-strip small{display:block;text-align:center;font-size:13px;letter-spacing:.14em;opacity:.7;margin-bottom:22px}
.lgm-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,3vw,48px);align-items:center}
/* הלב: הלוגו הוא מסכה, והצבע הוא currentColor. הקובץ המקורי יכול להיות בכל צבע, רק שקיפות קובעת */
.lgm-logo{display:block;height:clamp(26px,3vw,40px);background:currentColor;opacity:.72;
  -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;transition:opacity .3s}
.lgm-logo:hover{opacity:1}
.lgm-orig{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,3vw,48px);align-items:center;padding:0 clamp(18px,3vw,40px)}
.lgm-orig img{height:clamp(22px,2.6vw,34px);width:100%;object-fit:contain}
.lgm-cap{font-size:13px;color:var(--muted, #6a6d85);text-align:center;margin:4px 0 0}
@media (max-width:700px){.lgm-row,.lgm-orig{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:26px}}
@media (prefers-reduced-motion: reduce){.lgm-strip{transition-duration:.01ms}}

HTML

<div class="stage tight"><div class="lgm">
  <div class="lgm-bar" role="group" aria-label="רקע הרצועה">
    <button class="on" data-tone="bg">רקע בהיר</button><button data-tone="ink">רקע כהה</button><button data-tone="accent">צבע המותג</button>
  </div>
  <p class="lgm-cap">הקבצים המקוריים, כל אחד בצבע אחר:</p>
  <div class="lgm-orig" aria-hidden="true"></div>
  <section class="lgm-strip" data-tone="bg" aria-label="לקוחות">
    <small>עובדים איתנו</small>
    <ul class="lgm-row"></ul>
  </section>
</div></div>

JS

(function(){
  // שישה לוגואים בדויים כ-SVG, כל אחד בצבע משלו, כדי להוכיח שהצבע המקורי לא משנה. בפרויקט אמיתי: url("logos/x.svg")
  const L=[
    ["נורדה","#e0482f",'<circle cx="16" cy="20" r="12"/><rect x="36" y="14" width="84" height="12" rx="6"/>'],
    ["קלטו","#1f8a5b",'<path d="M4 34 20 6l16 28z"/><rect x="44" y="8" width="12" height="26"/><rect x="62" y="8" width="12" height="26"/><rect x="80" y="8" width="40" height="12"/>'],
    ["ארבו","#2d5bd7",'<rect x="4" y="6" width="28" height="28" rx="8"/><rect x="42" y="6" width="78" height="10" rx="5"/><rect x="42" y="22" width="52" height="10" rx="5"/>'],
    ["פלומה","#9b3fd1",'<path d="M4 20a16 16 0 1 1 32 0v14H20A16 16 0 0 1 4 20z"/><rect x="46" y="12" width="74" height="16" rx="3"/>'],
    ["זפיר","#d99a12",'<path d="M4 8h32L4 32h32" fill="none" stroke="#000" stroke-width="6"/><circle cx="60" cy="20" r="8"/><circle cx="84" cy="20" r="8"/><circle cx="108" cy="20" r="8"/>'],
    ["אולם","#111827",'<path d="M20 4 36 13v14L20 36 4 27V13z"/><rect x="46" y="15" width="74" height="10" rx="5"/>'],
  ];
  const uri=(fill,shapes)=>'url("data:image/svg+xml;utf8,'+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 40" fill="'+fill+'">'+shapes+'</svg>')+'")';
  const row=document.querySelector(".lgm-row"),orig=document.querySelector(".lgm-orig");
  L.forEach(([name,color,shapes])=>{
    const li=document.createElement("li");
    const s=document.createElement("span");s.className="lgm-logo";s.setAttribute("role","img");s.setAttribute("aria-label",name);
    s.style.setProperty("--logo",uri(color,shapes));li.appendChild(s);row.appendChild(li);
    const img=document.createElement("img");img.alt="";img.src=uri(color,shapes).slice(5,-2);orig.appendChild(img);
  });
  const strip=document.querySelector(".lgm-strip"),btns=[...document.querySelectorAll(".lgm-bar button")];
  btns.forEach(b=>b.addEventListener("click",()=>{
    strip.dataset.tone=b.dataset.tone;
    btns.forEach(x=>x.classList.toggle("on",x===b));
  }));
})();