/* ===================================================================== sbr/logo-bar — 2 variants: static row / infinite marquee. Uniformity model: every logo lives in a fixed-height "slot" with object-fit:contain. mix-blend-mode neutralizes white logo backgrounds. Hover tooltip overlays the slot (no clipping inside marquee viewport). Mobile-first, RTL, Ink&Amber. ===================================================================== */ .sbr-lb{--ease:cubic-bezier(.2,.7,.2,1); --slot:88px; --gap:64px; padding:60px 22px; position:relative;width:100vw;margin-inline:calc(50% - 50vw)} .sbr-lb__in{max-width:1240px;margin:0 auto} /* bg modes — --lb-bg is read by .sbr-lb__item background so the mix-blend-mode multiply has a reliable surface to multiply against even when an ancestor (mask, will-change, filter) creates a stacking context that would otherwise isolate the blend from the page bg. */ .sbr-lb--bg-paper {background:var(--paper); --lb-bg:var(--paper)} .sbr-lb--bg-surface{background:var(--surface);--lb-bg:var(--surface)} .sbr-lb--bg-ink {background:var(--ink); --lb-bg:var(--ink);color:var(--paper)} .sbr-lb--bg-ink .sbr-lb__title{color:var(--paper)} .sbr-lb--bg-ink .sbr-lb__kicker{color:var(--accent)} /* slot heights */ .sbr-lb--slot-sm{--slot:56px} .sbr-lb--slot-md{--slot:72px} .sbr-lb--slot-lg{--slot:88px} .sbr-lb--slot-xl{--slot:108px} /* ---- header ---- */ .sbr-lb__head{text-align:center;margin-bottom:36px} .sbr-lb__kicker{justify-content:center;color:var(--accent-strong);margin-bottom:12px} .sbr-lb__title{font-size:clamp(22px,4.2vw,32px);line-height:1.15;font-weight:700;letter-spacing:-.012em; margin:0;color:var(--ink)} /* ---- shared item: the slot ---- background:var(--lb-bg) is what makes mix-blend-mode actually work regardless of ancestor stacking contexts. The bg matches the section so visually nothing changes, but the blend now has a backdrop. */ .sbr-lb__item{flex:0 0 auto;height:var(--slot);display:flex;align-items:center;justify-content:center; padding-inline:14px;list-style:none;position:relative; background:var(--lb-bg)} .sbr-lb__link{display:flex;align-items:center;justify-content:center;height:100%; text-decoration:none;outline:0} .sbr-lb__img{display:block;max-height:100%;width:auto;max-width:220px; object-fit:contain; transition:filter .35s var(--ease),opacity .35s var(--ease),transform .35s var(--ease)} /* MIX-BLEND-MODE strategies — by background mode: - LIGHT bg (paper/surface): multiply makes white logo bg become bg color (invisible), dark logo content stays dark and visible. - DARK bg (ink): can't use multiply (would hide dark content too). Instead, invert the logo first (white→black, dark→light), then screen mode makes black pixels blend to bg color (invisible) while light pixels stay light (visible). Net result: white logo backgrounds disappear AND dark logo content becomes light. */ .sbr-lb--bg-paper .sbr-lb__img, .sbr-lb--bg-surface .sbr-lb__img{mix-blend-mode:multiply} .sbr-lb--bg-ink .sbr-lb__img{filter:invert(1) brightness(1.05);mix-blend-mode:screen} /* per-logo visual weight balance */ .sbr-lb__item--w-sm .sbr-lb__img{transform:scale(.75)} .sbr-lb__item--w-std .sbr-lb__img{transform:scale(1)} .sbr-lb__item--w-lg .sbr-lb__img{transform:scale(1.15)} /* per-logo is-invert — skip auto-invert on dark bg (for logos that are ALREADY light, e.g. white logo on transparent bg). Without this, the section-level invert would flip them to dark and they'd disappear. */ .sbr-lb--bg-ink .sbr-lb__item.is-invert .sbr-lb__img{filter:none;mix-blend-mode:normal} /* GRAYSCALE — composes with the blend strategy above. Filters are chained so order matters: invert FIRST (must happen before grayscale to operate on the original colors), then grayscale on the inverted output. */ .sbr-lb.is-grayscale .sbr-lb__img{filter:grayscale(1);opacity:.7} .sbr-lb--bg-ink.is-grayscale .sbr-lb__img{filter:invert(1) brightness(1.05) grayscale(1);opacity:.75} .sbr-lb--bg-ink.is-grayscale .sbr-lb__item.is-invert .sbr-lb__img{filter:grayscale(1);opacity:.75;mix-blend-mode:normal} /* HOVER restores each logo's natural color (grayscale → off) + full opacity. Higher specificity than the rest-state rules above, so it wins. */ .sbr-lb.is-grayscale .sbr-lb__item:hover .sbr-lb__img{filter:none;opacity:1} .sbr-lb--bg-ink.is-grayscale .sbr-lb__item:hover .sbr-lb__img{filter:invert(1) brightness(1.05);opacity:1} .sbr-lb--bg-ink.is-grayscale .sbr-lb__item.is-invert:hover .sbr-lb__img{filter:none;opacity:1} /* generic hover lift (subtle, since the tooltip will overlay anyway) */ .sbr-lb__item:hover .sbr-lb__img{transform:scale(1.02)} .sbr-lb__item--w-sm:hover .sbr-lb__img{transform:scale(.77)} .sbr-lb__item--w-lg:hover .sbr-lb__img{transform:scale(1.17)} /* HOVER TOOLTIP — overlays the entire slot with section bg + company name. Stays within slot bounds so it's never clipped by marquee overflow:hidden. Works identically in both variants. */ .sbr-lb__item[data-name]::after{ content:attr(data-name); position:absolute;inset:0; display:flex;align-items:center;justify-content:center; background:var(--lb-bg); color:var(--ink); font-size:clamp(13px,1.7vw,15.5px);font-weight:700;letter-spacing:-.005em;line-height:1.2; text-align:center;padding:8px 12px; opacity:0;pointer-events:none; transition:opacity .22s var(--ease); direction:rtl; box-sizing:border-box} .sbr-lb--bg-ink .sbr-lb__item[data-name]::after{color:var(--paper)} /* Tooltip DISABLED — on hover we reveal the logo's natural COLOR (grayscale hover rules above), NOT a name overlay covering the logo. Keep ::after hidden. */ .sbr-lb__item[data-name]:hover::after, .sbr-lb__item[data-name]:focus-within::after{opacity:0} /* keyboard focus ring */ .sbr-lb__link:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px} /* ---- variant: STATIC ROW ---- */ .sbr-lb__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center; margin:0;padding:0;list-style:none} .sbr-lb__row .sbr-lb__item{margin:8px 14px} /* ---- variant: MARQUEE — proven seamless 2-list pattern ---- Two identical