diff --git a/css/pages/_about.css b/css/pages/_about.css index 8650b7c4..2247e830 100644 --- a/css/pages/_about.css +++ b/css/pages/_about.css @@ -461,4 +461,49 @@ .faq-cta-container { padding: 32px; } .faq-cta-container h3 { font-size: 18px; } .faq-cta-container p { font-size: 16px; line-height: 24px; } -} \ No newline at end of file +} +/* ========================================================================== + Full-bleed auto-rotating team hero (under the About Us title) + ========================================================================== */ +.about-hero { + position: relative; left: 50%; transform: translateX(-50%); + width: 100vw; height: clamp(280px, 42vw, 520px); + overflow: hidden; margin: 4px 0 8px; +} +.about-hero-slide { + position: absolute; inset: 0; z-index: 1; + background-size: cover; background-position: center; + opacity: 0; transition: opacity 1.4s ease; +} +.about-hero-slide.is-active { opacity: 1; } +.about-hero-overlay { + position: absolute; inset: 0; z-index: 2; pointer-events: none; + background: linear-gradient(180deg, rgba(45, 115, 140, 0.52) 0%, rgba(28, 84, 105, 0.60) 100%); +} +@media (prefers-reduced-motion: reduce) { + .about-hero-slide { transition: none; } +} + +/* ========================================================================== + Appreciation to members & friends (photo carousel + names) + ========================================================================== */ +.appreciation-section { padding: 84px 24px 96px; background: #FFFFFF; text-align: center; } +.appreciation-section > .page-header-section { margin-bottom: 36px; padding: 0; background: transparent; } +.appreciation-section h2 { font-size: 36px; font-weight: 600; color: #101828; margin: 0 0 12px; } +.appr-lead { font-size: 18px; line-height: 28px; color: #667085; max-width: 720px; margin: 0 auto; } +/* Contained variant of the crossfade hero (overrides the full-bleed .about-hero) */ +.appreciation-hero { + position: relative; left: auto; transform: none; + width: 100%; max-width: 1000px; margin: 0 auto 34px; + height: clamp(220px, 32vw, 380px); border-radius: 18px; overflow: hidden; +} +.appreciation-names { + display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; + max-width: 900px; margin: 0 auto; +} +.appr-name { + display: inline-block; padding: 8px 16px; border-radius: 999px; + background: #F2F7F9; border: 1px solid #E1ECF0; color: #2D5F72; + font-size: 15px; font-weight: 600; +} +.appreciation-note { font-size: 13px; color: #98A2B3; margin: 26px auto 0; font-style: italic; } diff --git a/en/about-us/index.html b/en/about-us/index.html index 15d5d175..56a717d4 100644 --- a/en/about-us/index.html +++ b/en/about-us/index.html @@ -200,6 +200,22 @@ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -344,6 +360,30 @@
+ +
+
+

Our members & friends

+

MSOS is its people. With gratitude to everyone who has been part of our story — and everyone still writing it with us.

+
+
+
+
+
+
+
+
+
+
+ Kristijan P. + Lea J. + Marko A. + Marija K. + Monika V. +
+

Placeholder — the full list of members and friends is being compiled.

+
+
diff --git a/images/about-hero-01.webp b/images/about-hero-01.webp new file mode 100644 index 00000000..71f72390 Binary files /dev/null and b/images/about-hero-01.webp differ diff --git a/images/about-hero-02.webp b/images/about-hero-02.webp new file mode 100644 index 00000000..f6a11481 Binary files /dev/null and b/images/about-hero-02.webp differ diff --git a/images/about-hero-03.webp b/images/about-hero-03.webp new file mode 100644 index 00000000..4e51f60f Binary files /dev/null and b/images/about-hero-03.webp differ diff --git a/images/about-hero-04.webp b/images/about-hero-04.webp new file mode 100644 index 00000000..db42957b Binary files /dev/null and b/images/about-hero-04.webp differ diff --git a/images/about-hero-05.webp b/images/about-hero-05.webp new file mode 100644 index 00000000..1f68e29c Binary files /dev/null and b/images/about-hero-05.webp differ diff --git a/images/about-hero-06.webp b/images/about-hero-06.webp new file mode 100644 index 00000000..5e8e8671 Binary files /dev/null and b/images/about-hero-06.webp differ diff --git a/images/about-hero-07.webp b/images/about-hero-07.webp new file mode 100644 index 00000000..4b097027 Binary files /dev/null and b/images/about-hero-07.webp differ diff --git a/images/about-hero-08.webp b/images/about-hero-08.webp new file mode 100644 index 00000000..22e8938d Binary files /dev/null and b/images/about-hero-08.webp differ diff --git a/images/about-hero-09.webp b/images/about-hero-09.webp new file mode 100644 index 00000000..38047851 Binary files /dev/null and b/images/about-hero-09.webp differ diff --git a/images/about-hero-10.webp b/images/about-hero-10.webp new file mode 100644 index 00000000..393e5f6c Binary files /dev/null and b/images/about-hero-10.webp differ diff --git a/images/about-hero-11.webp b/images/about-hero-11.webp new file mode 100644 index 00000000..2dd5991e Binary files /dev/null and b/images/about-hero-11.webp differ diff --git a/main.js b/main.js index 2cc3fc98..bbe49b8d 100644 --- a/main.js +++ b/main.js @@ -1101,6 +1101,25 @@ document.addEventListener('DOMContentLoaded', function() { }); } + /** + * =================================================================== + * ABOUT US TEAM HERO (auto-rotating crossfade slideshow) + * =================================================================== + */ + function setupAboutHero() { + if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; + document.querySelectorAll('.about-hero').forEach(function (hero) { + const slides = hero.querySelectorAll('.about-hero-slide'); + if (slides.length < 2) return; + let i = 0; + setInterval(function () { + slides[i].classList.remove('is-active'); + i = (i + 1) % slides.length; + slides[i].classList.add('is-active'); + }, 4500); + }); + } + /** * =================================================================== * 8. ZAGON FUNKCIJ PO NALOŽITVI STRANI @@ -1111,6 +1130,7 @@ document.addEventListener('DOMContentLoaded', function() { setupLanguageSuggestion(); setupNewsletter(); setupHubCarousel(); + setupAboutHero(); setupLightbox(); }); \ No newline at end of file diff --git a/mk/about-us/index.html b/mk/about-us/index.html index a489dfd1..20b609c7 100644 --- a/mk/about-us/index.html +++ b/mk/about-us/index.html @@ -200,6 +200,22 @@
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -344,6 +360,30 @@
+ +
+
+

Нашите членови и пријатели

+

МСОС се неговите луѓе. Со благодарност до сите што биле дел од нашата приказна — и до сите што сè уште ја пишуваат со нас.

+
+
+
+
+
+
+
+
+
+
+ Kristijan P. + Lea J. + Marko A. + Marija K. + Monika V. +
+

Привремено — целосниот список на членови и пријатели е во подготовка.

+
+
diff --git a/si/about-us/index.html b/si/about-us/index.html index 00993611..36cd00b0 100644 --- a/si/about-us/index.html +++ b/si/about-us/index.html @@ -200,6 +200,22 @@
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -344,6 +360,30 @@
+ +
+
+

Naši člani in prijatelji

+

MSOS so njegovi ljudje. S hvaležnostjo vsem, ki so bili del naše zgodbe — in vsem, ki jo še pišejo z nami.

+
+
+
+
+
+
+
+
+
+
+ Kristijan P. + Lea J. + Marko A. + Marija K. + Monika V. +
+

Začasno — celoten seznam članov in prijateljev je v pripravi.

+
+