Vendor language flags locally and add scrolling partners marquee
Flags: replace flag-icons CDN with local SVGs (images/flags/{gb,si,mk}.svg) referenced as CSS backgrounds, so no external dependency and no per-page path issues. Partners: replace the static home-page logo row with a seamless auto-scrolling, hover-pausing marquee (CSS-only, reduced-motion aware, edge fade).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
95b2484117
commit
cc849fa6dd
185 files changed
+1205
-1288
No files matched your search
+53
-18
@@ -95,22 +95,52 @@
|
||||
/* 2. Partners Section */
|
||||
.partners-section {
|
||||
background: #FFFFFF;
|
||||
padding: 64px 0;
|
||||
padding: 56px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.partners-container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
.partners-title {
|
||||
text-align: center;
|
||||
color: #667085;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
/* Auto-scrolling marquee: two identical groups, translateX(-50%) loops seamlessly */
|
||||
.marquee {
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
|
||||
mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
|
||||
}
|
||||
.marquee-track {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 64px;
|
||||
flex-wrap: wrap;
|
||||
width: max-content;
|
||||
animation: partners-marquee 45s linear infinite;
|
||||
}
|
||||
.partners-container img {
|
||||
max-height: 56px;
|
||||
.marquee:hover .marquee-track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.marquee-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 72px;
|
||||
padding-right: 72px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.marquee-group img {
|
||||
height: 52px;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
-webkit-user-drag: none;
|
||||
user-select: none;
|
||||
}
|
||||
@keyframes partners-marquee {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(-50%); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.marquee-track { animation: none; }
|
||||
}
|
||||
|
||||
/* 3. Meet the Team Section */
|
||||
@@ -630,15 +660,20 @@
|
||||
|
||||
/* Mobile Partners Section */
|
||||
.partners-section {
|
||||
padding: 40px 24px;
|
||||
padding: 40px 0;
|
||||
}
|
||||
.partners-container {
|
||||
gap: 32px;
|
||||
justify-content: center;
|
||||
.partners-title {
|
||||
padding: 0 24px;
|
||||
}
|
||||
.partners-container img {
|
||||
max-height: 40px;
|
||||
flex-basis: 40%;
|
||||
.marquee-group {
|
||||
gap: 48px;
|
||||
padding-right: 48px;
|
||||
}
|
||||
.marquee-group img {
|
||||
height: 40px;
|
||||
}
|
||||
.marquee-track {
|
||||
animation-duration: 30s;
|
||||
}
|
||||
|
||||
/* Mobile Meet the Team Section */
|
||||
|
||||
Reference in new issue
Block a user