Landing/About/guide polish + Proxify-style category filter bar

About Us:
- Replace the appreciation photo with an Apple-style scrolling marquee that
  focal-zooms the centred photo (main.js + _about.css); heading now sits above
  the carousel; remove the "Have any questions?" FAQ CTA (EN/MK/SI).

Landing hero:
- Turn the flat blue overlay into a Proxify-style radial vignette (light centre
  over the CTA, dark edges) and raise the "Become a member" button.

Filter bar (Events & Projects / Blog / News, EN/MK/SI):
- Add a shared Proxify-style rounded pill bar with a trailing search icon that
  swaps to a search field and opens a results dropdown (thumbnail + category +
  title). New css/pages/_filterbar.css + filter-search.js, layered on top of the
  existing filter/pagination JS. Blog category icons preserved.
- Balance the News filter bar spacing between the header and the cards.

Student Welcome Guide:
- Widen the intro paragraphs, constrain the full-bleed disclaimer to a normal
  centred width, and add space before the route configurator.

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

css/main.css

@@ -42,4 +42,7 @@
 @import 'pages/_support.css';
 @import 'pages/_hub.css';
 @import 'pages/_legal.css';
-@import 'pages/_gallery.css';
+@import 'pages/_gallery.css';
+
+/* Loaded last so the shared filter bar wins over per-page chip styles. */
+@import 'pages/_filterbar.css';

css/pages/_about.css

@@ -509,20 +509,51 @@
 /* ==========================================================================
    Appreciation to members & friends (photo carousel + names)
    ========================================================================== */
-.appreciation-section { padding: 84px 24px 96px; background: #FFFFFF; text-align: center; }
+.appreciation-section { padding: 84px 24px 96px; background: #FFFFFF; text-align: center; overflow: hidden; }
-.appreciation-section > .page-header-section { margin-bottom: 36px; padding: 0; background: transparent; }
+.appreciation-section h2 { font-size: clamp(34px, 5vw, 54px); font-weight: 700; letter-spacing: -0.02em; color: #101828; margin: 0 0 16px; }
-.appreciation-section h2 { font-size: 36px; font-weight: 600; color: #101828; margin: 0 0 12px; }
+.appr-lead { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: #667085; max-width: 760px; margin: 0 auto; }
-.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) */
+/* Apple-style scrolling photo marquee */
-.appreciation-hero {
+.appr-marquee {
-    position: relative; left: auto; transform: none;
+    position: relative; left: 50%; transform: translateX(-50%);
-    width: 100%; max-width: 1000px; margin: 0 auto 34px;
+    width: 100vw; overflow: hidden;
-    height: clamp(220px, 32vw, 380px); border-radius: 18px; overflow: hidden;
+    /* extra vertical room so the enlarged focal card is not clipped */
+    margin-bottom: 48px; padding: 40px 0;
+    -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%);
 }
+.appr-track {
+    display: flex; align-items: center; width: max-content;
+    animation: appr-scroll 70s linear infinite;
+}
+.appr-marquee:hover .appr-track { animation-play-state: paused; }
+.appr-card {
+    flex: 0 0 auto; margin-right: 24px;
+    width: clamp(240px, 27vw, 380px);
+    height: clamp(170px, 19vw, 270px);
+    border-radius: 20px; overflow: hidden; background: #EAF1F4;
+    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.14);
+    /* base state before JS focal-scaling kicks in */
+    transform: scale(0.82); transform-origin: center center;
+    will-change: transform, filter;
+    filter: brightness(0.62);
+}
+.appr-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
+@keyframes appr-scroll {
+    from { transform: translateX(0); }
+    to   { transform: translateX(-50%); }
+}
+.appr-intro { margin-bottom: 40px; }
+
 .appreciation-names {
     display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
     max-width: 900px; margin: 0 auto;
 }
+@media (prefers-reduced-motion: reduce) {
+    .appr-track { animation: none; }
+    /* no movement => show all cards evenly, no focal zoom/dim */
+    .appr-card { transform: scale(0.92); filter: none; }
+}
 .appr-name {
     display: inline-block; padding: 8px 16px; border-radius: 999px;
     background: #F2F7F9; border: 1px solid #E1ECF0; color: #2D5F72;

css/pages/_filterbar.css

@@ -0,0 +1,247 @@
+/* ==========================================================================
+   Category filter bar (Proxify-style) + search dropdown
+   Shared by the Events & Projects, Blog and News pages. The existing chip
+   elements (.filter-pill / .blog-chip / .newshub-chip) are reused as tabs and
+   progressively enhanced into this bar by filter-search.js — so the existing
+   filtering + pagination keeps working untouched.
+   This file is imported LAST in main.css so its rules win over the per-page
+   chip styles regardless of specificity.
+   ========================================================================== */
+
+.filterbar {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: fit-content;
+    max-width: 100%;
+    margin: 0 auto 40px;
+    padding: 9px 12px;
+    background: #F9FAFB;
+    border-radius: 999px;
+    box-shadow: 0 8px 30px rgba(16, 24, 40, 0.10);
+}
+/* Search mode: bar turns solid white and stretches wide */
+.filterbar.is-searching {
+    width: 100%;
+    max-width: 880px;
+    background: #FFFFFF;
+}
+
+/* ---- Tabs (reuse the existing chip row) ---- */
+.filterbar-tabs {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    flex: 1 1 auto;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+.filterbar-tabs::-webkit-scrollbar { display: none; }
+.filterbar-tabs[hidden] { display: none; }
+
+.filterbar .filter-pill,
+.filterbar .blog-chip,
+.filterbar .newshub-chip {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    height: 42px;
+    padding: 0 18px;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.3;
+    white-space: nowrap;
+    color: #344054;
+    background: transparent;
+    border: 0;
+    border-radius: 999px;
+    cursor: pointer;
+    transition: color .15s ease, background .15s ease, box-shadow .15s ease;
+}
+.filterbar .filter-pill i,
+.filterbar .blog-chip i,
+.filterbar .newshub-chip i { font-size: 12px; }
+
+.filterbar .filter-pill:hover,
+.filterbar .blog-chip:hover,
+.filterbar .newshub-chip:hover { color: #2D5F72; background: transparent; }
+
+.filterbar .filter-pill.active,
+.filterbar .blog-chip.is-active,
+.filterbar .newshub-chip.is-active {
+    color: #2D5F72;
+    background: #FFFFFF;
+    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
+}
+
+/* ---- Search icon button ---- */
+.filterbar-search-btn {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 42px; height: 42px;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: #344054;
+    font-size: 18px;
+    cursor: pointer;
+    transition: color .15s ease;
+}
+.filterbar-search-btn:hover { color: #2D5F72; }
+.filterbar-search-btn[hidden] { display: none; }
+
+/* ---- Search mode row ---- */
+.filterbar-search {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1 1 auto;
+    width: 100%;
+}
+.filterbar-search[hidden] { display: none; }
+.filterbar-search-label {
+    display: none;
+    padding: 0 6px 0 12px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #101828;
+    white-space: nowrap;
+}
+@media (min-width: 640px) { .filterbar-search-label { display: block; } }
+
+.filterbar-search-field {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1 1 auto;
+    height: 42px;
+    padding: 0 14px;
+    background: #FFFFFF;
+    border: 1.5px solid #2D5F72;
+    border-radius: 999px;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 0 0 4px #E1ECF0;
+}
+.filterbar-search-field i { color: #101828; font-size: 15px; }
+.filterbar-search-field input {
+    flex: 1 1 auto;
+    height: 100%;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    font-family: inherit;
+    font-size: 15px;
+    color: #101828;
+}
+.filterbar-search-field input::placeholder { color: #98A2B3; }
+
+.filterbar-search-close {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 42px; height: 42px;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: #667085;
+    font-size: 18px;
+    cursor: pointer;
+    transition: color .15s ease;
+}
+.filterbar-search-close:hover { color: #101828; }
+
+/* ---- Results dropdown ---- */
+.filterbar-results {
+    position: absolute;
+    left: 0; right: 0;
+    top: calc(100% + 8px);
+    z-index: 20;
+    padding: 20px 8px 12px;
+    background: #F9FAFB;
+    border-radius: 24px;
+    box-shadow: 0 8px 30px rgba(16, 24, 40, 0.16);
+}
+.filterbar-results[hidden] { display: none; }
+.filterbar-results-count {
+    margin: 0 0 8px;
+    padding: 0 18px;
+    font-size: 13px;
+    color: #667085;
+}
+.filterbar-results-list {
+    list-style: none;
+    margin: 0;
+    padding: 0 8px;
+    max-height: 400px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+.filterbar-result { border-radius: 14px; transition: background .15s ease; }
+.filterbar-result:hover { background: #FFFFFF; }
+.filterbar-result-link {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 12px;
+    text-decoration: none;
+}
+.filterbar-result-thumb {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 112px; height: 72px;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #EAF1F4;
+    color: #2D5F72;
+    font-size: 24px;
+}
+.filterbar-result-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.filterbar-result-body {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+}
+.filterbar-result-cat {
+    align-self: flex-start;
+    padding: 3px 10px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #475467;
+    background: #FFFFFF;
+    border: 1px solid #D0D5DD;
+    border-radius: 999px;
+}
+.filterbar-result-title {
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.35;
+    color: #101828;
+}
+
+/* ==========================================================================
+   Projects sub-filter row (event types) — centred pill row under the bar,
+   styled like the Proxify secondary chips.
+   ========================================================================== */
+.filter-subnav {
+    justify-content: center;
+    gap: 10px;
+    margin-top: 4px;
+}
+
+@media (max-width: 640px) {
+    .filterbar { width: 100%; border-radius: 20px; }
+    .filterbar.is-searching { width: 100%; }
+}

css/pages/_guide.css

@@ -227,7 +227,7 @@
     color: #101828;
 }
 .guide-landing-hero p {
-    max-width: 720px;
+    max-width: 880px;
     margin: 0 auto 12px;
     font-size: 17px;
     line-height: 28px;
@@ -613,7 +613,7 @@
 /* ---------- Route builder ---------- */
 .guide-route {
     max-width: 920px;
-    margin: -36px auto 0;
+    margin: 0 auto;
     position: relative;
     background: #FFFFFF;
     border: 1px solid #EAECF0;
@@ -1029,8 +1029,9 @@
 /* Informative disclaimer callout shown across the Student Welcome Guide */
 .guide-disclaimer {
     display: flex; gap: 12px; align-items: flex-start;
+    max-width: 880px; /* keep it to the reading column, not full-bleed */
     background: #FFF7ED; border: 1px solid #FED7AA; border-left: 4px solid #FB923C;
-    border-radius: 12px; padding: 15px 18px; margin: 8px 0 30px;
+    border-radius: 12px; padding: 15px 18px; margin: 8px auto 48px;
 }
 .guide-disclaimer > i { color: #EA7317; font-size: 18px; margin-top: 2px; flex: 0 0 auto; }
 .guide-disclaimer .gd-body { font-size: 13.5px; line-height: 21px; color: #7C4A21; }

css/pages/_home.css

@@ -47,12 +47,15 @@
     left: 0;
     height: 100%;
     width: 100%;
-    /* Radial vignette: lighter blue in the centre (over the CTA) fading to a
+    /* Radial vignette (Proxify-style): a light, whitish-blue glow in the centre
-       deeper blue at the edges, so the eye is drawn to the middle. */
+       over the CTA that falls off to a deep, dark blue at the edges — pulling
-    background: radial-gradient(ellipse 90% 95% at 50% 50%,
+       the eye straight to the middle where the "Become a member" button sits.
-        rgba(60, 142, 170, 0.46) 0%,
+       Focal point biased slightly downward (58%) to sit on the button. */
-        rgba(45, 115, 140, 0.64) 44%,
+    background: radial-gradient(ellipse 70% 78% at 50% 58%,
-        rgba(16, 50, 70, 0.88) 100%);
+        rgba(178, 218, 238, 0.40) 0%,
+        rgba(96, 165, 190, 0.46) 28%,
+        rgba(34, 86, 114, 0.74) 58%,
+        rgba(9, 34, 52, 0.96) 100%);
     z-index: 2;
 }
 
@@ -93,7 +96,8 @@
 .hero-content p {
     font-size: 20px;
     line-height: 30px;
-    margin: 0 0 72px 0;
+    /* tighter gap so the CTA sits a bit higher, closer to the copy */
+    margin: 0 0 40px 0;
 }
 
 /* 2. Partners Section */

css/pages/_news.css

@@ -20,7 +20,7 @@
 .newshub-hero h1 { max-width: 760px; margin: 0 auto 16px; font-size: 42px; line-height: 1.12; color: #101828; }
 .newshub-lead { max-width: 640px; margin: 0 auto; font-size: 18px; line-height: 28px; color: #475467; }
 
-.newshub-list { max-width: 1120px; margin: 40px auto 72px; padding: 0 24px; }
+.newshub-list { max-width: 1120px; margin: 0 auto 72px; padding: 0 24px; }
 .newshub-filters {
     display: flex;
     flex-wrap: wrap;

en/about-us/index.html

@@ -358,17 +358,31 @@
         <!-- 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">
+            <div class="appr-intro">
                 <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">
+            <!-- Scrolling photo carousel (Apple-style focal zoom) -->
-                <div class="about-hero-slide is-active" style="background-image:url('../../images/event4-img-1.webp')"></div>
+            <div class="appr-marquee" aria-label="MSOS members and friends">
-                <div class="about-hero-slide" style="background-image:url('../../images/event3-photo-1.webp')"></div>
+                <div class="appr-track">
-                <div class="about-hero-slide" style="background-image:url('../../images/msnl-1.webp')"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt="MSOS members at an event"></div>
-                <div class="about-hero-slide" style="background-image:url('../../images/event4-image2.webp')"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt="MSOS members at an event"></div>
-                <div class="about-hero-slide" style="background-image:url('../../images/event3-photo-5.webp')"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt="Macedonian Student Night in Ljubljana"></div>
-                <div class="about-hero-overlay"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt="MSOS members at an event"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt="MSOS members at an event"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt="Macedonian Student Night in Ljubljana"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt="MSOS members at an event"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt="MSOS members at an event"></div>
+                    <!-- duplicate set for a seamless infinite loop (aria-hidden) -->
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt=""></div>
+                </div>
             </div>
             <div class="appreciation-names">
                 <span class="appr-name">Kristijan P.</span>
@@ -379,19 +393,6 @@
             </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">
-                     <img width="1197" height="1197" loading="lazy" decoding="async" src="../../images/about_marija_min.webp" alt="Avatar of Marija" class="avatar">
-                     <img width="1083" height="1083" loading="lazy" decoding="async" src="../../images/about_kristijan_min.webp" alt="Avatar of Kristijan" class="avatar large">
-                     <img width="1099" height="1099" loading="lazy" decoding="async" src="../../images/about_lea_min.webp" alt="Avatar of Lea" class="avatar">
-                </div>
-                <h3>Have any questions?</h3>
-                <p class="page-description" style="margin: 0;">Can't find the answer you're looking for? Please chat to our friendly team.</p>
-                <a href="#" class="btn btn-primary-orange">See all FAQs</a>
-             </div>
-        </section>
     </main>
 
     <!-- START_FOOTER -->

en/blog/index.html

@@ -436,6 +436,7 @@
     <script src="../../blog-filter.js"></script>
 
     <script src="../../main.js"></script>
+    <script src="../../filter-search.js"></script>
 <link rel="stylesheet" href="/assistant.css">
 <script src="/assistant.js" defer></script>
 </body>

en/news/index.html

@@ -489,6 +489,7 @@
 <!-- END_FOOTER -->
     <script src="../../main.js"></script>
     <script src="../../news-filter.js"></script>
+    <script src="../../filter-search.js"></script>
 
 <link rel="stylesheet" href="/assistant.css">
 <script src="/assistant.js" defer></script>

en/projects/index.html

@@ -433,6 +433,7 @@
 <!-- END_FOOTER -->
 
     <script src="../../main.js"></script>
+    <script src="../../filter-search.js"></script>
 <link rel="stylesheet" href="/assistant.css">
 <script src="/assistant.js" defer></script>
 </body>

filter-search.js

@@ -0,0 +1,180 @@
+/* Category filter bar enhancement (Proxify-style).
+ *
+ * Progressively enhances the existing category chip rows on the Events &
+ * Projects, Blog and News pages into a single rounded pill bar with a trailing
+ * search button. Clicking search swaps the tabs for a search input; typing
+ * opens a results dropdown listing matching cards (thumbnail + category +
+ * title). The existing chip elements keep their classes and data-attributes,
+ * so the current filtering + pagination logic (main.js / blog-filter.js /
+ * news-filter.js) keeps working unchanged. Filtering happens against the cards
+ * already rendered on the page — no network calls.
+ */
+(function () {
+    'use strict';
+
+    function qsa(sel, root) { return [].slice.call((root || document).querySelectorAll(sel)); }
+    function el(tag, cls) { var e = document.createElement(tag); if (cls) e.className = cls; return e; }
+    function escapeHtml(s) {
+        return String(s).replace(/[&<>"]/g, function (c) {
+            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
+        });
+    }
+
+    // --- Localised strings -------------------------------------------------
+    var lang = (document.documentElement.getAttribute('lang') || 'en').toLowerCase();
+    if (lang === 'sl') lang = 'si';
+    if (['en', 'si', 'mk'].indexOf(lang) === -1) lang = 'en';
+    var I18N = {
+        en: { ph: 'Search', none: 'No results found', count: function (n) { return n + ' result' + (n === 1 ? '' : 's') + ' found'; } },
+        si: { ph: 'Iskanje', none: 'Ni zadetkov', count: function (n) { return n + ' ' + (n === 1 ? 'zadetek' : 'zadetkov'); } },
+        mk: { ph: 'Пребарување', none: 'Нема резултати', count: function (n) { return n + ' ' + (n === 1 ? 'резултат' : 'резултати'); } }
+    };
+    var t = I18N[lang];
+
+    // --- Per-page adapters -------------------------------------------------
+    // Each returns, for a card element, { href, title, img, icon, cat }.
+    function projectItem(card, labelMap) {
+        var link = card.querySelector('.post-link');
+        var titleEl = card.querySelector('.post-title');
+        var img = card.querySelector('.post-image');
+        if (!link || !titleEl) return null;
+        return {
+            href: link.getAttribute('href'),
+            title: titleEl.textContent.trim(),
+            img: img ? img.getAttribute('src') : '',
+            cat: labelMap ? (labelMap[card.getAttribute('data-category')] || '') : ''
+        };
+    }
+    function blogItem(card) {
+        var titleEl = card.querySelector('h3');
+        var tag = card.querySelector('.blog-tag');
+        var thumb = card.querySelector('.blog-thumb');
+        if (!titleEl) return null;
+        return {
+            href: card.getAttribute('href'),
+            title: titleEl.textContent.trim(),
+            icon: thumb ? thumb.innerHTML : '',
+            cat: tag ? tag.textContent.trim() : ''
+        };
+    }
+    function newsItem(card) {
+        var titleLink = card.querySelector('.newshub-body h3 a') || card.querySelector('h3 a');
+        var media = card.querySelector('.newshub-media');
+        var img = card.querySelector('.newshub-media img');
+        var badge = card.querySelector('.news-badge');
+        if (!titleLink) return null;
+        return {
+            href: media ? media.getAttribute('href') : titleLink.getAttribute('href'),
+            title: titleLink.textContent.trim(),
+            img: img ? img.getAttribute('src') : '',
+            cat: badge ? badge.textContent.trim() : ''
+        };
+    }
+
+    var CONFIGS = [
+        { tabs: '.filter-nav', cards: '.posts-grid .post-card', item: projectItem, labels: true },
+        { tabs: '.blog-filters', cards: '.blog-grid .blog-card', item: blogItem },
+        { tabs: '.newshub-filters', cards: '.newshub-grid .newshub-card', item: newsItem }
+    ];
+
+    CONFIGS.forEach(function (cfg) {
+        var tabsEl = document.querySelector(cfg.tabs);
+        if (tabsEl) upgrade(tabsEl, cfg);
+    });
+
+    function upgrade(tabsEl, cfg) {
+        // Map of data-filter -> visible label (projects only; used for result category chips).
+        var labelMap = null;
+        if (cfg.labels) {
+            labelMap = {};
+            qsa('button', tabsEl).forEach(function (b) { labelMap[b.getAttribute('data-filter')] = b.textContent.trim(); });
+        }
+
+        // Wrap the tabs row inside the new bar.
+        var bar = el('div', 'filterbar');
+        tabsEl.parentNode.insertBefore(bar, tabsEl);
+        tabsEl.classList.add('filterbar-tabs');
+        bar.appendChild(tabsEl);
+
+        // Search icon button.
+        var searchBtn = el('button', 'filterbar-search-btn');
+        searchBtn.type = 'button';
+        searchBtn.setAttribute('aria-label', t.ph);
+        searchBtn.innerHTML = '<i class="fas fa-search" aria-hidden="true"></i>';
+        bar.appendChild(searchBtn);
+
+        // Search row (hidden until activated).
+        var firstTab = tabsEl.querySelector('button, a');
+        var searchRow = el('div', 'filterbar-search');
+        searchRow.hidden = true;
+        searchRow.innerHTML =
+            '<span class="filterbar-search-label"></span>' +
+            '<div class="filterbar-search-field"><i class="fas fa-search" aria-hidden="true"></i>' +
+            '<input type="text" aria-label="' + escapeHtml(t.ph) + '"></div>' +
+            '<button type="button" class="filterbar-search-close" aria-label="Close"><i class="fas fa-times" aria-hidden="true"></i></button>';
+        searchRow.querySelector('.filterbar-search-label').textContent = firstTab ? firstTab.textContent.trim() : '';
+        var input = searchRow.querySelector('input');
+        input.placeholder = t.ph;
+        bar.appendChild(searchRow);
+
+        // Results dropdown.
+        var results = el('div', 'filterbar-results');
+        results.hidden = true;
+        results.innerHTML = '<p class="filterbar-results-count"></p><ul class="filterbar-results-list"></ul>';
+        bar.appendChild(results);
+        var countEl = results.querySelector('.filterbar-results-count');
+        var listEl = results.querySelector('.filterbar-results-list');
+
+        function openSearch() {
+            bar.classList.add('is-searching');
+            tabsEl.hidden = true;
+            searchBtn.hidden = true;
+            searchRow.hidden = false;
+            input.value = '';
+            render('');
+            input.focus();
+        }
+        function closeSearch() {
+            bar.classList.remove('is-searching');
+            searchRow.hidden = true;
+            results.hidden = true;
+            tabsEl.hidden = false;
+            searchBtn.hidden = false;
+        }
+
+        function render(q) {
+            q = (q || '').trim().toLowerCase();
+            if (!q) { results.hidden = true; listEl.innerHTML = ''; countEl.textContent = ''; return; }
+            var found = qsa(cfg.cards)
+                .map(function (c) { return cfg.item(c, labelMap); })
+                .filter(function (it) { return it && it.title.toLowerCase().indexOf(q) !== -1; });
+            listEl.innerHTML = '';
+            countEl.textContent = found.length ? t.count(found.length) : t.none;
+            found.forEach(function (it) { listEl.appendChild(resultRow(it)); });
+            results.hidden = false;
+        }
+
+        searchBtn.addEventListener('click', openSearch);
+        searchRow.querySelector('.filterbar-search-close').addEventListener('click', closeSearch);
+        input.addEventListener('input', function () { render(input.value); });
+        document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !searchRow.hidden) closeSearch(); });
+        document.addEventListener('click', function (e) { if (!bar.contains(e.target) && !searchRow.hidden) closeSearch(); });
+    }
+
+    function resultRow(it) {
+        var li = el('li', 'filterbar-result');
+        var a = el('a', 'filterbar-result-link');
+        a.href = it.href;
+        var thumb = it.img
+            ? '<img src="' + escapeHtml(it.img) + '" alt="" loading="lazy">'
+            : (it.icon || '');
+        a.innerHTML =
+            '<span class="filterbar-result-thumb">' + thumb + '</span>' +
+            '<span class="filterbar-result-body">' +
+            (it.cat ? '<span class="filterbar-result-cat">' + escapeHtml(it.cat) + '</span>' : '') +
+            '<span class="filterbar-result-title">' + escapeHtml(it.title) + '</span>' +
+            '</span>';
+        li.appendChild(a);
+        return li;
+    }
+})();

main.js

@@ -1120,6 +1120,44 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
+    /**
+     * ===================================================================
+     * APPRECIATION MARQUEE (Apple-style focal zoom)
+     * The strip auto-scrolls via CSS; here we scale + brighten each card
+     * by its distance from the horizontal centre, so whichever photo is
+     * in the middle grows and lightens, then shrinks as it moves on.
+     * ===================================================================
+     */
+    function setupApprMarquee() {
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+        const marquee = document.querySelector('.appr-marquee');
+        if (!marquee) return;
+        const cards = marquee.querySelectorAll('.appr-card');
+        if (!cards.length) return;
+
+        // scale: 1.0 at centre -> MIN_SCALE at the edges; brightness likewise
+        const MIN_SCALE = 0.72;
+        const MIN_BRIGHT = 0.5;
+
+        function frame() {
+            const vpCenter = window.innerWidth / 2;
+            for (let n = 0; n < cards.length; n++) {
+                const r = cards[n].getBoundingClientRect();
+                const cardCenter = r.left + r.width / 2;
+                // 0 at centre, ~1 near the edges of the viewport
+                let d = Math.abs(cardCenter - vpCenter) / vpCenter;
+                if (d > 1) d = 1;
+                const e = d * d; // ease so only the very centre is full size
+                const scale = 1 - (1 - MIN_SCALE) * e;
+                const bright = 1 - (1 - MIN_BRIGHT) * e;
+                cards[n].style.transform = 'scale(' + scale.toFixed(3) + ')';
+                cards[n].style.filter = 'brightness(' + bright.toFixed(3) + ')';
+            }
+            rafId = requestAnimationFrame(frame);
+        }
+        let rafId = requestAnimationFrame(frame);
+    }
+
     /**
      * ===================================================================
      * 8. ZAGON FUNKCIJ PO NALOŽITVI STRANI
@@ -1131,6 +1169,7 @@ document.addEventListener('DOMContentLoaded', function() {
     setupNewsletter();
     setupHubCarousel();
     setupAboutHero();
+    setupApprMarquee();
     setupLightbox();
 
 });

mk/about-us/index.html

@@ -358,17 +358,31 @@
         <!-- 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">
+            <div class="appr-intro">
                 <h2>Нашите членови и пријатели</h2>
                 <p class="appr-lead">МСОС се неговите луѓе. Со благодарност до сите што биле дел од нашата приказна — и до сите што сè уште ја пишуваат со нас.</p>
             </div>
-            <div class="about-hero appreciation-hero" aria-label="Членови и пријатели на МСОС">
+            <!-- Scrolling photo carousel (Apple-style focal zoom) -->
-                <div class="about-hero-slide is-active" style="background-image:url('../../images/event4-img-1.webp')"></div>
+            <div class="appr-marquee" aria-label="Членови и пријатели на МСОС">
-                <div class="about-hero-slide" style="background-image:url('../../images/event3-photo-1.webp')"></div>
+                <div class="appr-track">
-                <div class="about-hero-slide" style="background-image:url('../../images/msnl-1.webp')"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt="Членови на МСОС на настан"></div>
-                <div class="about-hero-slide" style="background-image:url('../../images/event4-image2.webp')"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt="Членови на МСОС на настан"></div>
-                <div class="about-hero-slide" style="background-image:url('../../images/event3-photo-5.webp')"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt="Македонска студентска вечер во Љубљана"></div>
-                <div class="about-hero-overlay"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt="Членови на МСОС на настан"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt="Членови на МСОС на настан"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt="Македонска студентска вечер во Љубљана"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt="Членови на МСОС на настан"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt="Членови на МСОС на настан"></div>
+                    <!-- duplicate set for a seamless infinite loop (aria-hidden) -->
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt=""></div>
+                </div>
             </div>
             <div class="appreciation-names">
                 <span class="appr-name">Kristijan P.</span>
@@ -379,19 +393,6 @@
             </div>
             <p class="appreciation-note">Привремено — целосниот список на членови и пријатели е во подготовка.</p>
         </section>
-
-        <section class="faq-section">
-            <div class="faq-footer">
-                <div class="avatar-group">
-                     <img width="1197" height="1197" loading="lazy" decoding="async" src="../../images/about_marija_min.webp" alt="Аватар на Марија" class="avatar">
-                     <img width="1083" height="1083" loading="lazy" decoding="async" src="../../images/about_kristijan_min.webp" alt="Аватар на Кристијан" class="avatar large">
-                     <img width="1099" height="1099" loading="lazy" decoding="async" src="../../images/about_lea_min.webp" alt="Аватар на Леа" class="avatar">
-                </div>
-                <h3>Имате какви било прашања?</h3>
-                <p>Не можете да го најдете одговорот што го барате? Разговарајте со нашиот пријателски тим.</p>
-                <a href="#" class="btn btn-primary-orange">Види ги сите ЧПП</a>
-            </div>
-        </section>
     </main>
 
     <!-- START_FOOTER -->

mk/blog/index.html

@@ -436,6 +436,7 @@
     <script src="../../blog-filter.js"></script>
 
     <script src="../../main.js"></script>
+    <script src="../../filter-search.js"></script>
 <link rel="stylesheet" href="/assistant.css">
 <script src="/assistant.js" defer></script>
 </body>

mk/news/index.html

@@ -489,6 +489,7 @@
 <!-- END_FOOTER -->
     <script src="../../main.js"></script>
     <script src="../../news-filter.js"></script>
+    <script src="../../filter-search.js"></script>
 
 <link rel="stylesheet" href="/assistant.css">
 <script src="/assistant.js" defer></script>

mk/projects/index.html

@@ -435,6 +435,7 @@
     <!-- Поврзување до главната JS-датотека -->
     
     <script src="../../main.js"></script>
+    <script src="../../filter-search.js"></script>
 <link rel="stylesheet" href="/assistant.css">
 <script src="/assistant.js" defer></script>
 </body>

si/about-us/index.html

@@ -358,17 +358,31 @@
         <!-- 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">
+            <div class="appr-intro">
                 <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">
+            <!-- Scrolling photo carousel (Apple-style focal zoom) -->
-                <div class="about-hero-slide is-active" style="background-image:url('../../images/event4-img-1.webp')"></div>
+            <div class="appr-marquee" aria-label="Člani in prijatelji MSOS">
-                <div class="about-hero-slide" style="background-image:url('../../images/event3-photo-1.webp')"></div>
+                <div class="appr-track">
-                <div class="about-hero-slide" style="background-image:url('../../images/msnl-1.webp')"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt="Člani MSOS na dogodku"></div>
-                <div class="about-hero-slide" style="background-image:url('../../images/event4-image2.webp')"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt="Člani MSOS na dogodku"></div>
-                <div class="about-hero-slide" style="background-image:url('../../images/event3-photo-5.webp')"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt="Makedonski študentski večer v Ljubljani"></div>
-                <div class="about-hero-overlay"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt="Člani MSOS na dogodku"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt="Člani MSOS na dogodku"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt="Makedonski študentski večer v Ljubljani"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt="Člani MSOS na dogodku"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt="Člani MSOS na dogodku"></div>
+                    <!-- duplicate set for a seamless infinite loop (aria-hidden) -->
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt=""></div>
+                </div>
             </div>
             <div class="appreciation-names">
                 <span class="appr-name">Kristijan P.</span>
@@ -379,19 +393,6 @@
             </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">
-                     <img width="1197" height="1197" loading="lazy" decoding="async" src="../../images/about_marija_min.webp" alt="Avatar Marije" class="avatar">
-                     <img width="1083" height="1083" loading="lazy" decoding="async" src="../../images/about_kristijan_min.webp" alt="Avatar Kristijana" class="avatar large">
-                     <img width="1099" height="1099" loading="lazy" decoding="async" src="../../images/about_lea_min.webp" alt="Avatar Lee" class="avatar">
-                </div>
-                <h3>Imate kakšno vprašanje?</h3>
-                <p class="page-description" style="margin: 0;">Ne najdete odgovora, ki ga iščete? Poklepetajte z našo prijazno ekipo.</p>
-                <a href="#" class="btn btn-primary-orange">Ogled vseh pogostih vprašanj</a>
-             </div>
-        </section>
     </main>
 
     <!-- START_FOOTER -->

si/blog/index.html

@@ -436,6 +436,7 @@
     <script src="../../blog-filter.js"></script>
 
     <script src="../../main.js"></script>
+    <script src="../../filter-search.js"></script>
 <link rel="stylesheet" href="/assistant.css">
 <script src="/assistant.js" defer></script>
 </body>

si/news/index.html

@@ -489,6 +489,7 @@
 <!-- END_FOOTER -->
     <script src="../../main.js"></script>
     <script src="../../news-filter.js"></script>
+    <script src="../../filter-search.js"></script>
 
 <link rel="stylesheet" href="/assistant.css">
 <script src="/assistant.js" defer></script>

si/projects/index.html

@@ -435,6 +435,7 @@
     <!-- Povezava do glavne JS datoteke -->
     
     <script src="../../main.js"></script>
+    <script src="../../filter-search.js"></script>
 <link rel="stylesheet" href="/assistant.css">
 <script src="/assistant.js" defer></script>
 </body>