mark
/
msos
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes.txt #9.2 & #9.4: team hero + members/friends appreciation 

#9.2 Full-width auto-rotating team hero (crossfade every 4.5s, transparent blue
overlay) directly under the About Us title — 11 landscape photos supplied by MSOS.

#9.4 "Our members & friends" appreciation section after Mission & Vision: a
contained photo carousel + name chips. Photos and names are PLACEHOLDERS
(names in "First L." format) pending the full members list.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskik 2026-08-05 16:41:28 +02:00
parent 195a48205c
commit 0bbc06c6bc
16 changed files with 186 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
css/pages/_about.css
View File

@ -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; }
}
}
/* ==========================================================================
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; }

40
en/about-us/index.html
View File

@ -200,6 +200,22 @@
</div>
</section>
<!-- Auto-rotating team hero -->
<section class="about-hero" aria-label="MSOS team moments">
<div class="about-hero-slide is-active" style="background-image:url('../../images/about-hero-01.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-02.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-03.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-04.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-05.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-06.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-07.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-08.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-09.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-10.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-11.webp')"></div>
<div class="about-hero-overlay"></div>
</section>
<!-- Leadership Team Section -->
<section class="team-section">
<div class="page-header-section">
@ -344,6 +360,30 @@
</section>
<!-- FAQ Call to Action Section -->
<!-- Appreciation to members & friends (photos are placeholders; names pending full list) -->
<section class="appreciation-section">
<div class="page-header-section">
<h2>Our members & friends</h2>
<p class="appr-lead">MSOS is its people. With gratitude to everyone who has been part of our story — and everyone still writing it with us.</p>
</div>
<div class="about-hero appreciation-hero" aria-label="MSOS members and friends">
<div class="about-hero-slide is-active" style="background-image:url('../../images/event4-img-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event3-photo-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/msnl-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event4-image2.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event3-photo-5.webp')"></div>
<div class="about-hero-overlay"></div>
</div>
<div class="appreciation-names">
<span class="appr-name">Kristijan P.</span>
<span class="appr-name">Lea J.</span>
<span class="appr-name">Marko A.</span>
<span class="appr-name">Marija K.</span>
<span class="appr-name">Monika V.</span>
</div>
<p class="appreciation-note">Placeholder — the full list of members and friends is being compiled.</p>
</section>
<section class="faq-cta-section">
<div class="faq-cta-container">
<div class="avatar-group">

BIN
images/about-hero-01.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 240 KiB

BIN
images/about-hero-02.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 289 KiB

BIN
images/about-hero-03.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 441 KiB

BIN
images/about-hero-04.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 KiB

BIN
images/about-hero-05.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 KiB

BIN
images/about-hero-06.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 184 KiB

BIN
images/about-hero-07.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
images/about-hero-08.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 184 KiB

BIN
images/about-hero-09.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
images/about-hero-10.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 380 KiB

BIN
images/about-hero-11.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 312 KiB

20
main.js
View File

@ -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();
});

40
mk/about-us/index.html
View File

@ -200,6 +200,22 @@
</div>
</section>
<!-- Auto-rotating team hero -->
<section class="about-hero" aria-label="Моменти од тимот на МСОС">
<div class="about-hero-slide is-active" style="background-image:url('../../images/about-hero-01.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-02.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-03.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-04.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-05.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-06.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-07.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-08.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-09.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-10.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-11.webp')"></div>
<div class="about-hero-overlay"></div>
</section>
<!-- Leadership Team Section -->
<section class="team-section">
<div class="page-header-section">
@ -344,6 +360,30 @@
</section>
<!-- FAQ Call to Action Section -->
<!-- Appreciation to members & friends (photos are placeholders; names pending full list) -->
<section class="appreciation-section">
<div class="page-header-section">
<h2>Нашите членови и пријатели</h2>
<p class="appr-lead">МСОС се неговите луѓе. Со благодарност до сите што биле дел од нашата приказна — и до сите што сè уште ја пишуваат со нас.</p>
</div>
<div class="about-hero appreciation-hero" aria-label="Членови и пријатели на МСОС">
<div class="about-hero-slide is-active" style="background-image:url('../../images/event4-img-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event3-photo-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/msnl-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event4-image2.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event3-photo-5.webp')"></div>
<div class="about-hero-overlay"></div>
</div>
<div class="appreciation-names">
<span class="appr-name">Kristijan P.</span>
<span class="appr-name">Lea J.</span>
<span class="appr-name">Marko A.</span>
<span class="appr-name">Marija K.</span>
<span class="appr-name">Monika V.</span>
</div>
<p class="appreciation-note">Привремено — целосниот список на членови и пријатели е во подготовка.</p>
</section>
<section class="faq-section">
<div class="faq-footer">
<div class="avatar-group">

40
si/about-us/index.html
View File

@ -200,6 +200,22 @@
</div>
</section>
<!-- Auto-rotating team hero -->
<section class="about-hero" aria-label="Trenutki ekipe MSOS">
<div class="about-hero-slide is-active" style="background-image:url('../../images/about-hero-01.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-02.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-03.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-04.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-05.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-06.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-07.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-08.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-09.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-10.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/about-hero-11.webp')"></div>
<div class="about-hero-overlay"></div>
</section>
<!-- Leadership Team Section -->
<section class="team-section">
<div class="page-header-section">
@ -344,6 +360,30 @@
</section>
<!-- FAQ Call to Action Section -->
<!-- Appreciation to members & friends (photos are placeholders; names pending full list) -->
<section class="appreciation-section">
<div class="page-header-section">
<h2>Naši člani in prijatelji</h2>
<p class="appr-lead">MSOS so njegovi ljudje. S hvaležnostjo vsem, ki so bili del naše zgodbe — in vsem, ki jo še pišejo z nami.</p>
</div>
<div class="about-hero appreciation-hero" aria-label="Člani in prijatelji MSOS">
<div class="about-hero-slide is-active" style="background-image:url('../../images/event4-img-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event3-photo-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/msnl-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event4-image2.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event3-photo-5.webp')"></div>
<div class="about-hero-overlay"></div>
</div>
<div class="appreciation-names">
<span class="appr-name">Kristijan P.</span>
<span class="appr-name">Lea J.</span>
<span class="appr-name">Marko A.</span>
<span class="appr-name">Marija K.</span>
<span class="appr-name">Monika V.</span>
</div>
<p class="appreciation-note">Začasno — celoten seznam članov in prijateljev je v pripravi.</p>
</section>
<section class="faq-cta-section">
<div class="faq-cta-container">
<div class="avatar-group">