Convert the Hub / Become-a-member carousels from a pure-CSS marquee to a
JS-driven scroller with click-and-drag, touch swipe, and progress dots
(setupHubCarousel). Turn the "ways to be part of MSOS" cards into hub-style
photo cards and add the final Become-a-member photos (WebP).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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>
On mobile, body already has padding-top:60px to clear the fixed header, but
every page ALSO added its own clearance — doubling it and leaving a ~60px
white gap under the menu (content sat too low). Trimmed each page's mobile
top offset so it relies on the body padding (matching .article-page, which
was already correct): page-content, support/hub/legal pages, and the
news-hub / news-article / blog / member heroes. Content now sits ~32-42px
under the header.
Also add a 32px top gap to .newsletter-cta on mobile so it no longer
touches the CTA/content above it.
CSS only.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Why become a member
- Rebuild the benefits grid as a 3x3 bento: 7 icon cards + 2 real event photos
(with captions), fixes the orphan card, adds hover motion. Swap the blank
fa-house-heart (Pro) for fa-house-user (Free) on "Feel at home".
Join form
- Merge the duplicate "There is a place for you here" section into the form's
path step (student / supporter cards now carry the descriptions); drop the
separate section. New heading "There is a place for you here"; centred layout.
- Redesign the choice cards: colour-coded (student orange / supporter teal)
icon circles, descriptions, hover lift + "Choose this" reveal.
- Fix the stray "Support MSOS" submit button showing on the path step.
Conversion + polish
- Floating "Become a member" CTA that appears after the hero and hides near the
form/final CTA, so the ask stays reachable without scrolling to the bottom.
- More space between section titles and their cards (numbers, reals, tests,
showcase, benefits).
- Testimonials: Elena -> Katerina (Koper); un-swap Ana (Maribor) and Marko
(Ljubljana); remove the "sample quotes" placeholder note.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Hero gradient now spans edge to edge (full-viewport ::before band behind the
centred content) and is more colourful/on-brand (warm peach to soft teal).
- Both hero CTAs (Become a member / See what we do) share one size so they align.
- Add hover (lift + shadow + colour shift) and active (press) states to the
reusable .btn classes, so all buttons site-wide get consistent feedback; plus
a focus-visible outline for keyboard users.
- Remove the confusing Community/Events/Support/... tag pills (they duplicated
the hero lead sentence). member.js updated + now emits main.js on the member
pages so regeneration keeps the nav working.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Mobile fixes (article, guide, get-to-know, projects pages):
- Remove duplicate main.js include site-wide. footer.js emitted a
<script src=main.js> inside the footer block while pages also load one
before </body>, so DOMContentLoaded ran twice and every tap toggled the
mobile menu / article TOC twice (net no-op). Menu and TOC only worked on
the homepage. Now exactly one main.js per page, before </body>.
- Kill horizontal overflow: add overflow-x: clip to html/body (clips the
off-canvas mobile nav panel without breaking position: sticky, unlike
overflow-x: hidden).
- Reset align-items to stretch in the mobile .article-layout-container
rule; the desktop flex-start made .article-container size to max-content
width in a column flexbox and overflow the viewport.
Membership form hardening (Become a Member):
- Honeypot field + localStorage cooldown (30s gap, max 3/24h) + stronger
email regex; trilingual cooldown alert message.
- Apps Script (setup doc): per-email auto-reply dedupe + daily send cap;
applicant reply is a plain thank-you that never echoes submitted answers.
- Draft HTML welcome email (email-welcome-preview.html) for later use.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
New trilingual /<lang>/become-a-member/ conversion page: hero with real-photo collage, why-join benefits, animated MSOS-in-numbers, ways to participate, membership-in-real-life and projects showcase (real project photos), testimonials, who-can-join, an adaptive multi-step form (student + supporter flows, conditional fields, progress, personalised messages, validation, success screen), FAQ and final CTA. Site-wide 'Become a member' buttons now link here. Form posts to a Google Form once wired; metrics/testimonials are placeholders to confirm.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
popovskik