/* ============================================================
Logo Wall — off-white auto-scrolling brand marquee
Pairs with _snippets/logo-wall.html. Uses Scale-Proof tokens
(--text, --muted, --mono, --ease, --pill, --border).
REQUIRED GOOGLE FONT (add once to , the serif for Saatchi):
(currentColor). The other
seven marks are styled text. Converse is WORDMARK ONLY —
no star-chevron symbol is drawn anywhere.
============================================================ */
.logowall {
--logo-color: var(--text, #e6edf3);
--logo-h: 24px; /* optical cap-height for SVG marks */
--logo-fs: 22px; /* wordmark size (~22-24px cap-height) */
--logo-gap: 56px; /* even spacing between marks */
--logo-speed: 36s; /* marquee loop duration */
width: 100%;
}
/* eyebrow / label line */
.logowall__eyebrow {
margin: 0 0 22px;
text-align: center;
font-family: var(--mono, "IBM Plex Mono", monospace);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted, #8b949e);
}
/* ---- marquee viewport + edge fade masks ------------------- */
.logowall__marquee {
position: relative;
overflow: hidden;
-webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* ---- scrolling track (two identical sets) ----------------- */
.logowall__track {
display: flex;
width: max-content;
will-change: transform;
animation: logowall-scroll var(--logo-speed) linear infinite;
}
/* pause on hover */
.logowall__marquee:hover .logowall__track { animation-play-state: paused; }
/* each set includes a trailing gap so the seam spacing matches
the internal spacing; translateX(-50%) == exactly one set width */
.logowall__set {
display: flex;
align-items: center;
gap: var(--logo-gap);
padding-inline-end: var(--logo-gap);
flex: 0 0 auto;
}
@keyframes logowall-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* ---- individual marks ------------------------------------- */
.logowall__item {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
color: var(--logo-color);
opacity: 0.72;
transition: opacity 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
line-height: 1;
white-space: nowrap;
-webkit-font-smoothing: antialiased;
}
.logowall__item:hover { opacity: 1; }
/* SVG symbol marks (Apple, CBS) */
.logowall__item--svg svg {
display: block;
height: var(--logo-h);
width: auto;
fill: currentColor;
}
/* small per-symbol optical balancing */
.logowall__item[data-brand="Apple"] svg { height: calc(var(--logo-h) + 2px); }
.logowall__item[data-brand="CBS"] svg { height: var(--logo-h); }
/* ---- wordmarks -------------------------------------------- */
.logowall__word {
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: var(--logo-fs);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--logo-color);
}
/* Rackspace — lowercase neo-grotesque logotype */
.logowall__word--rackspace {
text-transform: lowercase;
font-weight: 700;
letter-spacing: -0.02em;
}
/* BCGDV — bold grotesque, uppercase, tight tracking */
.logowall__word--bcgdv {
text-transform: uppercase;
font-weight: 700;
letter-spacing: -0.02em;
}
/* Converse — lowercase geometric, WORDMARK ONLY (no chevron) */
.logowall__word--converse {
text-transform: lowercase;
font-weight: 600;
letter-spacing: 0;
}
/* Uproxx — heavy all-caps grotesque, tight */
.logowall__word--uproxx {
text-transform: uppercase;
font-weight: 800;
letter-spacing: -0.015em;
}
/* Cutwater — clean neo-grotesque */
.logowall__word--cutwater {
font-weight: 500;
letter-spacing: -0.005em;
}
/* Geekdom — friendly rounded sans, lowercase */
.logowall__word--geekdom {
font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
"Quicksand", var(--sans, "Inter"), system-ui, sans-serif;
text-transform: lowercase;
font-weight: 600;
letter-spacing: 0.005em;
}
/* Saatchi & Saatchi — serif logotype with an open ampersand */
.logowall__word--saatchi {
font-family: "EB Garamond", "Goudy Old Style", Georgia, serif;
font-weight: 500;
font-size: calc(var(--logo-fs) + 3px); /* serif reads smaller, size up */
letter-spacing: 0.005em;
}
.logowall__word--saatchi .logowall__amp {
font-style: italic;
font-weight: 500;
padding-inline: 0.04em;
}
/* ---- screen-reader-only brand list ------------------------ */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---- responsive ------------------------------------------- */
@media (max-width: 640px) {
.logowall {
--logo-h: 21px;
--logo-fs: 19px;
--logo-gap: 40px;
--logo-speed: 28s;
}
}
/* ---- reduced motion: no scroll, centered wrapped row ------ */
@media (prefers-reduced-motion: reduce) {
.logowall__marquee {
-webkit-mask: none;
mask: none;
}
.logowall__track {
animation: none;
transform: none;
width: 100%;
flex-wrap: wrap;
justify-content: center;
}
.logowall__set {
flex-wrap: wrap;
justify-content: center;
row-gap: 24px;
padding-inline-end: 0;
}
/* drop the duplicate set — only one static row is shown */
.logowall__set + .logowall__set { display: none; }
}