Commit Graph

12 Commits

Author SHA1 Message Date
popovskik 0052b38c1c fix(qa2): responsive Latest-news/FAQ at tablet + muted-text contrast sweep
Deploy to Production on Develop Push / deploy (push) Successful in 22s Details
- Latest-news row and FAQ grid now go 3 -> 2 -> 1 columns (added a 1024px
  tablet step); .news-card drops its brittle fixed 405.33px width and fills a
  responsive grid cell. Fixes cramped 3-across cards on 769-1024px.
- Contrast: replace #98A2B3 text color (2.58:1 on white) with the palette
  muted #667085 (~4.8:1) across 13 CSS files (31 text-color uses; borders/
  backgrounds untouched, verified none on dark backgrounds).
- Re-stamped cache-bust (v=6770822f).

Note: the ~20px-looser header top-gap at 769-1024px is left as a minor,
lower-risk follow-up (would need a coordinated multi-page padding pass).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-27 19:33:31 +02:00
popovskik c5bdb59a92 fix(qa): SI hero copy, footer width, form contrast + iOS input-zoom
Deploy to Production on Develop Push / deploy (push) Successful in 21s Details
From the QA audit — high-impact, low-risk fixes:
- SI homepage hero: replace leftover template boilerplate subtitle
  ("timski nabiralniki"...) and truncated badge with proper Slovene copy
  matching EN/MK.
- Footer: .footer-container was a hard width:1280px and got clipped by
  overflow-x:clip on 769-1279px screens; now width:100%; max-width:1280px.
- WCAG AA contrast: darken orange text (.article-publish-date, .mm-real-link)
  and the Ask-MSOS footer (.msa-foot) which were ~2.6-3:1 on white.
- iOS Safari focus-zoom: bump form/search/assistant inputs to 16px
  (.ms-field, .msa-input, .filterbar-search-field).
- Re-stamped cache-bust (v=9ff60d7a).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-27 19:18:17 +02:00
popovskik 7bccf716de fix(mobile): language banner vs Ask-MSOS pill + guide button overflow
- On phones the language-suggestion banner sat at the bottom and the floating
  "Ask MSOS" pill (higher z-index) overlapped its bottom-right, hiding the
  dismiss (x) button. Raise the banner above the pill (bottom: 84px) so they
  stack and the x is fully visible and tappable.
- The success-screen "Read the welcome guide" button used the base .btn
  white-space:nowrap, so the long MK label overflowed the box on narrow
  screens. Allow .ms-success-links .btn to wrap (white-space: normal).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-27 16:09:39 +02:00
popovskik 954dfb4d7d feat(event,support): refine event page + add supporter form to Support page
Event page (Meet Student Slovenia 2026):
- Guide-style centred header with wide banner hero and caption
- Key facts on a plain background: When/Where side by side, subtle
  live-stream line, centred Register CTA, full-width note
- Partner logos (NLB patron, Embassy support) + sponsor
  Kapital Aset Menadžment DOOEL / Капитал асет менаџмент ДООЕЛ
- Inline photos between sections; em-dash removed from the subtitle
- "Support MSOS" call-out linking to the support page

Support page:
- Added the become-a-member supporter flow (supporter path only) via a
  new data-only-flow="supporter" mode in member-form.js; submits to the
  same combined Google Form tagged type=supporter
- Hero "Become a partner" button now scrolls to the form
- .ms-section carries its own brand vars so the form renders off the
  member page

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-20 23:35:43 +02:00
popovskik b058c80713 Become a member: photo-only carousel + drop unconfirmed figures note
- Remove the coloured placeholder cards behind the "ways to be part of
  MSOS" carousel (override the _hub.css gradients on .mm-use) and load the
  photos eagerly with fetchpriority so they appear immediately.
- Remove the "Figures to confirm before launch." note (and the SI
  equivalent) from the MSOS-in-numbers section.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-06 00:00:30 +02:00
popovskik 4c27ebb105 Carousels: drag + position dots, and real Become-a-member photos
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>
2026-08-05 15:54:06 +02:00
popovskik a7782eb28f 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>
2026-08-05 12:50:39 +02:00
popovskik 7c32f416f5 Fix mobile top spacing (double header offset) + CTA/newsletter gap
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>
2026-08-03 01:31:49 +02:00
popovskik f492a8a547 Become a Member: bento benefits, merged/redesigned join form, floating CTA, fixes
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>
2026-08-01 13:14:36 +02:00
popovskik 51474b2da5 Polish Become a Member hero: full-bleed gradient, button sizing + interaction, remove tag pills
- 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>
2026-08-01 12:29:59 +02:00
popovskik efb3c6ea39 Fix mobile nav/TOC/overflow on article pages + harden membership form
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>
2026-08-01 10:59:55 +02:00
popovskik a21450c8c8 Add flagship Become a Member page with interactive multi-step form
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>
2026-08-01 00:14:13 +02:00