Trusted by
-
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 ---- */