Turn membership "ways to join" grid into Hub-style slider

Convert the fixed 6-card grid in the "There is more than one way to be
part of MSOS" section into the Hub's auto-scrolling marquee, reusing the
existing .hub-carousel mechanics with icon-based gradient cards. Applied
across EN/MK/SI.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

css/pages/_member.css

@@ -76,13 +76,30 @@
 .mm-num-label { display: block; margin-top: 8px; font-size: 15px; color: rgba(255,255,255,0.85); }
 .mm-numbers-section .mm-note { color: rgba(255,255,255,0.6); margin-top: 24px; }
 
-/* ---- ways ---- */
+/* ---- ways (hub-style auto-scrolling slider) ---- */
-.mm-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
+/* Mechanics (.hub-carousel/.hub-uses/.hub-track/.hub-group) and the marquee
-.mm-way { border: 1px solid #EAECF0; border-radius: 16px; padding: 24px; background: #FFFFFF; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
+   animation are reused from _hub.css; the JS clone step (setupHubCarousel) runs
-.mm-way:hover { border-color: #F6C9A8; box-shadow: 0 10px 22px rgba(242,118,46,0.10); }
+   on every page and picks up the .hub-track here. These rules only restyle the
-.mm-way-ico { font-size: 22px; color: var(--mm-teal); margin-bottom: 12px; }
+   card body for icon-based cards (no photo). */
-.mm-way h3 { font-size: 17px; margin: 0 0 6px; }
+.mm-ways-carousel { margin-top: 4px; }
-.mm-way p { font-size: 14px; line-height: 22px; color: #667085; margin: 0; }
+.mm-use {
+    display: flex; flex-direction: column; justify-content: space-between;
+    gap: 18px; padding: 24px 22px;
+    width: clamp(240px, 24vw, 300px);
+    aspect-ratio: 5 / 6;
+}
+/* No photo here, so drop the hub image-legibility overlay. */
+.mm-use::after { display: none; }
+.mm-use-ico {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 54px; height: 54px; border-radius: 14px;
+    background: rgba(255, 255, 255, 0.18);
+    color: #fff; font-size: 23px; flex: 0 0 auto;
+}
+/* Body is absolute-positioned for photo cards in _hub.css; here it flows normally. */
+.mm-use .hub-use-body { position: static; padding: 0; gap: 6px; }
+.mm-use .hub-use-body h3 { font-size: 19px; line-height: 1.25; }
+.mm-use .hub-use-body p { font-size: 14px; line-height: 21px; }
 
 /* ---- membership in real life ---- */
 .mm-reals { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }

en/become-a-member/index.html

@@ -261,31 +261,37 @@
         <section class="mm-section">
             <h2 class="mm-h2">There is more than one way to be part of MSOS</h2>
             <p class="mm-lead">You do not need to organise events or lead to belong. Join in the way that fits you.</p>
-            <div class="mm-ways">
+            <div class="hub-carousel mm-ways-carousel">
-                <article class="mm-way">
+              <div class="hub-uses">
-                    <div class="mm-way-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
+                <div class="hub-track">
-                    <h3>Stay connected</h3><p>Receive updates and know what is happening.</p>
+                  <div class="hub-group">
-                </article>
+                    <article class="hub-use mm-use">
-                <article class="mm-way">
+                        <div class="mm-use-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
-                    <div class="mm-way-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Stay connected</h3><p>Receive updates and know what is happening.</p></div>
-                    <h3>Join the community</h3><p>Come to events, meet people and take part when it suits you.</p>
+                    </article>
-                </article>
+                    <article class="hub-use mm-use">
-                <article class="mm-way">
+                        <div class="mm-use-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
-                    <div class="mm-way-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Join the community</h3><p>Come to events, meet people and take part when it suits you.</p></div>
-                    <h3>Volunteer sometimes</h3><p>Help with selected activities without a long-term commitment.</p>
+                    </article>
-                </article>
+                    <article class="hub-use mm-use">
-                <article class="mm-way">
+                        <div class="mm-use-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
-                    <div class="mm-way-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Volunteer sometimes</h3><p>Help with selected activities without a long-term commitment.</p></div>
-                    <h3>Join projects</h3><p>Contribute to specific initiatives, campaigns, guides or collaborations.</p>
+                    </article>
-                </article>
+                    <article class="hub-use mm-use">
-                <article class="mm-way">
+                        <div class="mm-use-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
-                    <div class="mm-way-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Join projects</h3><p>Contribute to specific initiatives, campaigns, guides or collaborations.</p></div>
-                    <h3>Organise events</h3><p>Help plan, coordinate, promote and deliver activities.</p>
+                    </article>
-                </article>
+                    <article class="hub-use mm-use">
-                <article class="mm-way">
+                        <div class="mm-use-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
-                    <div class="mm-way-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Organise events</h3><p>Help plan, coordinate, promote and deliver activities.</p></div>
-                    <h3>Take responsibility</h3><p>Explore leadership, governance, representation or local team roles.</p>
+                    </article>
-                </article>
+                    <article class="hub-use mm-use">
+                        <div class="mm-use-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Take responsibility</h3><p>Explore leadership, governance, representation or local team roles.</p></div>
+                    </article>
+                  </div>
+                </div>
+              </div>
             </div>
         </section>
 

mk/become-a-member/index.html

@@ -260,31 +260,37 @@
         <section class="mm-section">
             <h2 class="mm-h2">Има повеќе начини да бидеш дел од МСОС</h2>
             <p class="mm-lead">Не мора да организираш настани или да водиш за да припаѓаш. Приклучи се на начин што ти одговара.</p>
-            <div class="mm-ways">
+            <div class="hub-carousel mm-ways-carousel">
-                <article class="mm-way">
+              <div class="hub-uses">
-                    <div class="mm-way-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
+                <div class="hub-track">
-                    <h3>Остани поврзан</h3><p>Примај новости и знај што се случува.</p>
+                  <div class="hub-group">
-                </article>
+                    <article class="hub-use mm-use">
-                <article class="mm-way">
+                        <div class="mm-use-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
-                    <div class="mm-way-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Остани поврзан</h3><p>Примај новости и знај што се случува.</p></div>
-                    <h3>Приклучи се на заедницата</h3><p>Доаѓај на настани, запознавај луѓе и учествувај кога ти одговара.</p>
+                    </article>
-                </article>
+                    <article class="hub-use mm-use">
-                <article class="mm-way">
+                        <div class="mm-use-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
-                    <div class="mm-way-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Приклучи се на заедницата</h3><p>Доаѓај на настани, запознавај луѓе и учествувај кога ти одговара.</p></div>
-                    <h3>Волонтирај повремено</h3><p>Помагај на избрани активности без долгорочна обврска.</p>
+                    </article>
-                </article>
+                    <article class="hub-use mm-use">
-                <article class="mm-way">
+                        <div class="mm-use-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
-                    <div class="mm-way-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Волонтирај повремено</h3><p>Помагај на избрани активности без долгорочна обврска.</p></div>
-                    <h3>Приклучи се на проекти</h3><p>Придонеси на конкретни иницијативи, кампањи, водичи или соработки.</p>
+                    </article>
-                </article>
+                    <article class="hub-use mm-use">
-                <article class="mm-way">
+                        <div class="mm-use-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
-                    <div class="mm-way-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Приклучи се на проекти</h3><p>Придонеси на конкретни иницијативи, кампањи, водичи или соработки.</p></div>
-                    <h3>Организирај настани</h3><p>Помагај да се планираат, координираат, промовираат и реализираат активности.</p>
+                    </article>
-                </article>
+                    <article class="hub-use mm-use">
-                <article class="mm-way">
+                        <div class="mm-use-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
-                    <div class="mm-way-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Организирај настани</h3><p>Помагај да се планираат, координираат, промовираат и реализираат активности.</p></div>
-                    <h3>Преземи одговорност</h3><p>Истражи лидерство, управување, застапување или улоги во локален тим.</p>
+                    </article>
-                </article>
+                    <article class="hub-use mm-use">
+                        <div class="mm-use-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Преземи одговорност</h3><p>Истражи лидерство, управување, застапување или улоги во локален тим.</p></div>
+                    </article>
+                  </div>
+                </div>
+              </div>
             </div>
         </section>
 

si/become-a-member/index.html

@@ -261,31 +261,37 @@
         <section class="mm-section">
             <h2 class="mm-h2">Obstaja več načinov, da si del MSOS</h2>
             <p class="mm-lead">Ni ti treba organizirati dogodkov ali voditi, da pripadaš. Pridruži se na način, ki ti ustreza.</p>
-            <div class="mm-ways">
+            <div class="hub-carousel mm-ways-carousel">
-                <article class="mm-way">
+              <div class="hub-uses">
-                    <div class="mm-way-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
+                <div class="hub-track">
-                    <h3>Ostani povezan</h3><p>Prejemaj novice in vedi, kaj se dogaja.</p>
+                  <div class="hub-group">
-                </article>
+                    <article class="hub-use mm-use">
-                <article class="mm-way">
+                        <div class="mm-use-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
-                    <div class="mm-way-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Ostani povezan</h3><p>Prejemaj novice in vedi, kaj se dogaja.</p></div>
-                    <h3>Pridruži se skupnosti</h3><p>Obišči dogodke, spoznaj ljudi in sodeluj, ko ti ustreza.</p>
+                    </article>
-                </article>
+                    <article class="hub-use mm-use">
-                <article class="mm-way">
+                        <div class="mm-use-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
-                    <div class="mm-way-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Pridruži se skupnosti</h3><p>Obišči dogodke, spoznaj ljudi in sodeluj, ko ti ustreza.</p></div>
-                    <h3>Občasno prostovoljči</h3><p>Pomagaj pri izbranih dejavnostih brez dolgoročne zaveze.</p>
+                    </article>
-                </article>
+                    <article class="hub-use mm-use">
-                <article class="mm-way">
+                        <div class="mm-use-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
-                    <div class="mm-way-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Občasno prostovoljči</h3><p>Pomagaj pri izbranih dejavnostih brez dolgoročne zaveze.</p></div>
-                    <h3>Pridruži se projektom</h3><p>Prispevaj k pobudam, kampanjam, vodnikom ali sodelovanjem.</p>
+                    </article>
-                </article>
+                    <article class="hub-use mm-use">
-                <article class="mm-way">
+                        <div class="mm-use-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
-                    <div class="mm-way-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Pridruži se projektom</h3><p>Prispevaj k pobudam, kampanjam, vodnikom ali sodelovanjem.</p></div>
-                    <h3>Organiziraj dogodke</h3><p>Pomagaj načrtovati, usklajevati, promovirati in izvesti dejavnosti.</p>
+                    </article>
-                </article>
+                    <article class="hub-use mm-use">
-                <article class="mm-way">
+                        <div class="mm-use-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
-                    <div class="mm-way-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Organiziraj dogodke</h3><p>Pomagaj načrtovati, usklajevati, promovirati in izvesti dejavnosti.</p></div>
-                    <h3>Prevzemi odgovornost</h3><p>Razišči vodenje, upravljanje, zastopanje ali vloge v lokalni ekipi.</p>
+                    </article>
-                </article>
+                    <article class="hub-use mm-use">
+                        <div class="mm-use-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
+                        <div class="hub-use-body"><h3>Prevzemi odgovornost</h3><p>Razišči vodenje, upravljanje, zastopanje ali vloge v lokalni ekipi.</p></div>
+                    </article>
+                  </div>
+                </div>
+              </div>
             </div>
         </section>