From 7180fd190ddd817d3a3023aad8523b41e7d01aa5 Mon Sep 17 00:00:00 2001 From: Reef Date: Wed, 24 Jun 2026 18:55:49 +0000 Subject: [PATCH] Enhance: 50% bigger partner icons, text next to icon, smooth logo carousel animation --- index.html | 212 +++++++++++++++++++++++++++++++++++------------------ style.css | 47 +++++++++--- 2 files changed, 177 insertions(+), 82 deletions(-) diff --git a/index.html b/index.html index cf85499..c4f3db7 100644 --- a/index.html +++ b/index.html @@ -693,76 +693,148 @@
diff --git a/style.css b/style.css index 714bc21..a9e600d 100644 --- a/style.css +++ b/style.css @@ -682,6 +682,7 @@ img { padding: 2rem 0; background: #f6f5f4; text-align: center; + overflow: hidden; } .partner-banner h3 { font-family: "Inter Tight", sans-serif; @@ -692,39 +693,61 @@ img { letter-spacing: 0.08em; margin-bottom: 1.5rem; } +.partner-carousel-wrap { + overflow: hidden; + width: 100%; +} .partner-grid { display: flex; - flex-wrap: wrap; align-items: center; - justify-content: center; - gap: 2rem; + gap: 3rem; + width: max-content; + animation: partnerScroll 40s linear infinite; +} +.partner-carousel-wrap:hover .partner-grid { + animation-play-state: paused; +} +@keyframes partnerScroll { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } } .partner-item { display: flex; - flex-direction: column; + flex-direction: row; align-items: center; - gap: 0.4rem; + gap: 0.6rem; text-decoration: none; color: rgba(33, 37, 41, 0.55); - font-size: 0.75rem; + font-size: 0.85rem; + font-weight: 500; + white-space: nowrap; transition: opacity 0.2s; + flex-shrink: 0; } .partner-item:hover { opacity: 0.7; } .partner-item img { - width: 32px; - height: 32px; - border-radius: 6px; + width: 48px; + height: 48px; + border-radius: 8px; object-fit: contain; } @media (max-width: 768px) { .partner-grid { - gap: 1.25rem; + gap: 2rem; } .partner-item img { - width: 28px; - height: 28px; + width: 42px; + height: 42px; + } + .partner-item { + font-size: 0.75rem; + gap: 0.4rem; } } /* ---- Blog Section ---- */