/* ============================================================ Hermes Labs — "Built on Solana" partners / ecosystem strip ------------------------------------------------------------ An in-flow band at the very bottom of the homepage (mirrors the Initia investor strip layout, but shows the REAL Solana stack the project runs on — Solana, Helius, Phantom, Reown, pump.fun, Anchor). Grayscale wordmark + glyph logos, muted → brighten on hover. Injected by home-partners.js, attached to (hydration-safe). ============================================================ */ .hl-partners { width: 100%; box-sizing: border-box; /* big bottom padding: the fixed INTERFACES strip floats at viewport bottom:64px (≈110px tall zone); this keeps the logos above it at scroll-end */ padding: 56px 24px 170px; background: #0a0a0b; border-top: 1px solid #1c1f22; } .hl-partners__inner { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; } .hl-partners__eyebrow { font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: #6b7177; user-select: none; } .hl-partners__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px 46px; } .hl-partner { display: inline-flex; align-items: center; gap: 9px; color: rgba(229, 231, 233, 0.4); text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; filter: grayscale(1); } .hl-partner:hover, .hl-partner:focus-visible { color: rgba(232, 234, 236, 0.92); outline: none; transform: translateY(-1px); } .hl-partner__ico { width: 19px; height: 19px; flex: 0 0 auto; display: block; } .hl-partner__name { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0.015em; white-space: nowrap; } /* staggered fade-in */ .hl-partners .hl-partner { opacity: 0; transform: translateY(6px); } .hl-partners.is-in .hl-partner { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, color 0.2s ease, transform 0.5s ease; transition-delay: calc(var(--i, 0) * 70ms); } .hl-partners.is-in .hl-partner:hover { transform: translateY(-1px); } @media (max-width: 560px) { .hl-partners { padding: 40px 16px 140px; } .hl-partners__row { gap: 20px 28px; } .hl-partner__name { font-size: 14px; } .hl-partner__ico { width: 16px; height: 16px; } } @media (prefers-reduced-motion: reduce) { .hl-partners .hl-partner { opacity: 1; transform: none; transition: color 0.2s ease; } }