Commit Graph

103 Commits

Author SHA1 Message Date
popovskik 0a1971efad style(brand): unify orange to #FA7850 + yellow token; fix tablet header gap
Deploy to Production on Develop Push / deploy (push) Successful in 22s Details
- Brand orange is now the official #FA7850 everywhere: folded the stray
  oranges (#F2762E, #E8833A, #ff6b2c) into it and kept a single darker shade
  (#E85D2A) for gradient depth + button hover. Added the official brand
  --yellow (#FFE16E) token.
- Tablet header gap (769-1024px): the fixed header shrinks 80->60px there but
  first-section paddings kept their 80px clearance; pull the first section up
  by the 20px delta in that range only (phones untouched). Verified on
  interior pages and the full-bleed homepage hero — gap now matches desktop,
  no overlap.
- Re-stamped cache-bust (v=f95de694).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-27 20:48:50 +02:00
popovskik fd9df42995 style(qa3): design-token foundation + safe polish/a11y fixes
Deploy to Production on Develop Push / deploy (push) Successful in 20s Details
- Add :root design tokens in _typography.css (was empty) — brand teal/orange,
  ink/text greys, radius + type scale + section rhythm. Visually neutral;
  new rules can reference var()s instead of scattered literals.
- a11y: visible :focus-visible ring on header nav + dropdown links (keyboard
  users had none).
- Fix synthesized faux-bold: .route-report h1 800 -> 700 (Inter loads 400-700).
- Testimonials column: overflow-y scroll -> auto (no permanent scrollbar gutter).
- Lightbox image radius 6px -> 8px (matches the site rounding scale).
- Consistent card affordance: homepage .news-card now lifts on hover like the
  news-hub / blog cards.
- Re-stamped cache-bust (v=1f64b22f).

Deferred (needs a brand decision): unifying the two primary oranges
(#FA7850 vs #F2762E) and the fuller literal->token migration.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-27 19:45:59 +02:00
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 954f186761 build: content-hash cache-busting for local CSS/JS (?v=hash)
Deploy to Production on Develop Push / deploy (push) Successful in 20s Details
Stops deploys being served stale from browser cache — the recurring "changes
do not show up until a hard refresh" problem.

- New tools/cache_bust.py stamps a global content hash onto every local
  <link>/<script> CSS/JS ref AND the @import lines in css/main.css (so partial
  edits bust too). External (https://) refs are untouched. Deterministic and
  idempotent: same content -> same stamp, any asset edit -> new stamp sitewide.
- Wired as the final step of tools/build_site.py so every build/deploy stamps.
- Initial stamp applied across 259 pages + main.css (v=64a53dd6).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-27 18:14:44 +02:00
popovskik 7c2110d8a5 fix(mobile): Ask-MSOS pill yields to cookie/language banners
Deploy to Production on Develop Push / deploy (push) Successful in 19s Details
In in-app browsers (Instagram/Facebook) the floating pill (z-index 9999, same
as the cookie banner) sat on top of the cookie Accept button and the language
banner, so consent could not be tapped. The pill now hides whenever the
cookie-consent (.msos-cc) or language (.lang-suggest) banner is present, via a
MutationObserver on <body>, and reappears once they are dismissed. With the
pill yielding, the language banner is dropped back to the bottom edge.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-27 18:03:13 +02:00
popovskik 6bfd882354 Merge remote-tracking branch 'origin/fix/si-guide-copy-corrections' into develop
Deploy to Production on Develop Push / deploy (push) Successful in 22s Details
2026-08-27 17:46:30 +02:00
popovskik 7823578225 style(home): permanent drop shadow on latest-news card images
Add a soft box-shadow to .news-card-media so the card image separates from the
teal (#2D738C) News section background — needed when an image has blue edges
that otherwise merge into the section colour.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-27 17:24:48 +02:00
popovskik abf04db9b1 Merge branch 'fix/blog-card-images' into develop-kristijan 2026-08-27 17:00:13 +02:00
popovskik 6c710eafb7 Merge branch 'fix/lightbox-mobile-layout' into develop-kristijan 2026-08-27 17:00:12 +02:00
popovskik 9ffb7fe257 Merge branch 'fix/mobile-lang-popup-button' into develop-kristijan 2026-08-27 17:00:12 +02:00
popovskik fb0c5c8639 fix(blog): use each published post hero image on the blog listing cards
The blog index cards showed placeholder icons even for published posts that
have a hero image. Replace the icon thumb with the post hero (cover-cropped)
for every published card in EN/MK/SI, and add a .blog-thumb--image rule to
mirror the existing featured-card image style. Coming-soon / unpublished cards
keep their icons.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-27 16:43:18 +02:00
popovskik 1273edcb41 fix(lightbox mobile): stack caption/button under photo + hide Ask-MSOS pill
On phones the lightbox caption and "Read the story" button were pinned to the
screen bottom, cramped and overlapped by the floating "Ask MSOS" pill
(z-index above the lightbox). Now:
- lightbox becomes a centred column on <=600px: image -> button -> caption
  flow directly under the photo instead of being absolutely bottom-pinned;
- image capped at 62vh so tall/portrait photos leave room for the button;
- the Ask-MSOS pill is hidden while the viewer is open (body.lightbox-open),
  so it can no longer overlap the controls.
Desktop layout is unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-27 16:36:38 +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 3e205a5c96 fix(mss-2026 form): hide study plans for parents and "other"
Parents and "other" registrants will not be studying, so the "Your study
plans" section is now hidden for those roles. Gating is driven by the role
<select>; validate()/collect() skip any field inside a hidden container, so
the study fields are neither required nor submitted for those roles. Students
(future/current) are unchanged: the section stays visible and required.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-27 15:38:03 +02:00
popovskik 481e157f87 fix(guide,si): apply Slovenian copy corrections across Student Welcome Guide
Landing page: refine hero lead, intro and study-cities paragraphs; rename
route-generator title/labels/button (Pripravi svojo študijsko pot, Kdo ste?,
Raven študija, Kje ste trenutno?, Prikaži mojo pot) and section subtitle.

student-guide.js: relabel SI phase options and switch budget options to
'X € / mesec' with en-dash ranges + gender-inclusive wording.

Shared across all SI guide pages: rewrite 'Dobro je vedeti' box into three
paragraphs (+ CSS), change 'Nazadnje preverjeno' -> 'Posodobljeno' (30 pages),
and refine the 'preverite najnovejše informacije' warning (22 pages).
complete-student-journey: reword the 'Devet korakov' subtitle.

New route-generator state 'Prijavo sem že oddal/-a' intentionally deferred
(needs my-route.js + Google Form wiring). SI only per request.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-26 00:57:25 +02:00
popovskik 7bd85c11a0 feat(event): add print/PDF export styles for event pages
Add a @media print block so event pages export cleanly to PDF/print:
keep faithful colours (print-color-adjust: exact), unstick the header,
hide screen-only chrome (chat bubble, cookie consent, sticky CTA, back
link, newsletter box, mobile nav), and reset the hero image to full
width. No effect on the on-screen layout.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-22 08:16:04 +02:00
popovskik 09dbeb2bc7 fix(home): restore homepage event banner styling
The .event-banner rules were dropped during an _event.css rewrite, so the
homepage promo banner rendered unstyled (full-width dark text, no gradient).
Restored the banner styles and removed the em-dash from the banner copy.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-20 23:40:01 +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 270df5b2f8 feat(news): add Meet Student Slovenia 2026 event page
Trilingual (EN/MK/SI) promo page for the upcoming "Meet Student Slovenia
2026" event, built through the content CMS (content/news/...) plus custom
sections styled to match the site.

- Guide-style centred header with a wide banner hero and caption
- Plain-background key facts (When/Where), subtle live-stream line,
  centred Register CTA, and partner/patron/sponsor logos
  (NLB Banka, Embassy of Slovenia; Capital Financial Center as text)
- Auto-scrolling "Moments from previous years" carousel + inline photos
- Embedded registration form (dropdowns, required study-plan fields,
  multi-field study preferences) wired to a Google Form; left-hand
  floating Register button
- Homepage promo banner (EN/MK/SI) + auto-listed in News hub, homepage
  latest, sitemap, llms.txt and the offline search index
- New assets: css/pages/_event.css, event-register.js

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-20 22:46:09 +02:00
popovskik 23d89bfff8 Add photo copyright & usage clause (EN/MK/SI)
Add a "Photos, images & copyright" card to the Official information
(legal) page in all three languages, plus a short rights/removal note
on the Gallery and Events & Projects pages.

- Clarifies most images are MSOS property or used with permission, and
  that third-party images (Get to know Macedonia/Slovenia, Student
  Welcome Guide) remain their owners' property.
- Requires prior written permission to reuse MSOS's own images.
- Adds a photo-removal / consent-withdrawal path via info@msosorg.com.
- New shared .photo-rights-note style in css/pages/_gallery.css.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-08 12:24:25 +02:00
popovskik e8604a9665 Gallery: photos open lightbox, add project button, watermark our photos
Gallery flow:
- Album covers now open the photo lightbox directly (full album set), while
  the title/"Read the story" link opens the article. Previously the whole card
  linked to the article and photos were only at the bottom of it.
- Each album carries its full photo set in a hidden js-lightbox grid; added
  main.js support for [data-lightbox-target] cover triggers.
- Added the missing main.js include on the gallery page (its lightbox, mobile
  menu and language switcher never ran before).
- Lightbox gained an optional "Read the story ->" button (data-project-url /
  data-project-label) shown only for gallery albums.

Watermark:
- Baked a subtle "(c) msosorg.com" watermark (bottom-right, sized per image)
  into 114 of our own event/community photos. Stock/partner/logo/icon images
  excluded. Clean originals backed up to images/_originals/ (git-ignored); the
  script always re-derives from them so re-runs never stack.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-08 01:55:34 +02:00
popovskik 91d29121c0 About Us "Through the years": retitle, redesign names, thank-you note
- Renamed the section from "Our members & friends" to "Through the years"
  (Низ годините / Skozi leta) — a retrospective framing that honours everyone
  who has been part of MSOS without labelling anyone a current member or friend.
  Updated title, marquee aria-label, image alt text and the dev comment.
- Removed dashes from the hero intro, section intro and closing note.
- Replaced the placeholder names with the full list of 74 contributors, kept
  the original five, sorted alphabetically per language (Latin for EN/SI,
  Macedonian Cyrillic with native collation for MK).
- New design for the names: a clean multi-column credits wall (accent dot,
  hairline rows, hover) instead of pill chips (css/pages/_about.css).
- Added a thank-you note to members past, present and future, and to everyone
  who has volunteered, contributed or supported MSOS. EN/MK/SI.

MK/SI copy is AI-drafted and pending a native proofread.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-08 00:57:53 +02:00
popovskik 57a3ca187b Press: add /press/ page (EN/MK/SI) + footer link + coverage list
- New Press & media page in all three languages: press-enquiries contact,
  a 6-way logo download grid (EN/SI/MK x colour/white), an "MSOS at a glance"
  fact sheet (full legal name + preferred name), and a grouped coverage list
  (media, universities & institutions, official records, reference, government)
  with 29 verified third-party links, each described in EN/MK/SL.
- Styling in css/pages/_press.css (imported by main.css), on the site's tokens.
- Footer: added a "Press & media" link to the Organisation column on every page
  (all languages, relative paths correct for each page depth).
- SEO/sitemap refreshed so the new pages carry NGO schema + hreflang.

MK/SI copy is AI-drafted and pending a native proofread.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-07 23:35:49 +02:00
popovskik 43847ba935 Student Welcome Guide: batch fixes from changes-2 review (EN/MK/SI)
Layout / CSS (css/pages/_guide.css):
- Left-align .guide-checklist and .guide-steps (margin 16px 0) so bullet
  lists no longer drift right inside the flex article-body.
- Make .guide-table-wrap shrink to the viewport (width:100%; min-width:0)
  so wide tables scroll horizontally on mobile instead of overflowing.
- Add a reusable .guide-cta pill button for inline calls to action.

Content, applied across all three languages:
- Replace the info-pill row (guide-meta) on every guide page with a
  "Last checked" eyebrow above the title.
- application-deadlines: correct "North Macedonian citizen" to
  "Citizen of North Macedonia".
- study-cities: reword the "X map:" run-on paragraphs, give Nova Gorica
  and Celje proper strengths/challenges bullet lists.
- tuition-and-scholarships: fix the leftover "Link the exact call" note
  and add a prominent SRIPS 380th-call button.
- student-accommodation: retitle to "full-time student", delete the SRCe
  brokerage paragraph, add an ownership-check (land register / GURS)
  paragraph.
- prepare-to-move: add bus, flight, airport-transfer and car-sharing
  providers with links.
- administrative-basics: link the DR-02 form and FURS tax-number page and
  the bank-account blog; remove the "A common sequence" section.
- official-sources-and-checklists: remove the "Checklists to build"
  section and the pre-publication reminder sentence, and tidy the meta
  description that referenced the removed section.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-06 00:01:04 +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 5d50604af4 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>
2026-08-05 22:28:16 +02:00
popovskik 93af2d8051 Mission & Vision: remove white band behind title; hide box icons on mobile
- Override the inherited cream .page-header-section background to transparent so
  the "Mission and Vision" title sits directly on the section's blue gradient
  (no white rectangle behind it).
- On mobile, hide the mission/vision box icons (crosshair/eye) — text only.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-05 18:59:11 +02:00
popovskik f309a90e1f About Us hero: align overlaid title to the top (off people's faces)
Switch the hero content from vertical-centre to top-aligned so the title/text sit
in the upper background area of the rotating group photos instead of over faces.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-05 18:52:21 +02:00
popovskik 2d2e422372 About Us: overlay title on the hero images + rename nav item to "About Us"
- Rework the About Us hero so the eyebrow, title and description are overlaid on
  the auto-rotating team images (centred, white, text-shadowed) exactly like the
  landing hero, instead of sitting in a separate white band above them. Remove the
  old page-header band and move its text into the hero. All three languages.
- Rename the "Who We Are" menu item from "Our team" to "About Us"
  (MK "За нас", SI "O nas") across all pages; footer "About us" link unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-05 18:47:48 +02:00
popovskik 7c52f30e3b Project pages: move membership CTA into the ToC sidebar (Proxify-style)
Add a compact "Like what we do?" CTA box directly below the table of contents
in the left sidebar. The ToC already scrolls internally when long, so the box
stays pinned in the same visual field. The full-width bottom CTA is hidden on
desktop where a sidebar CTA exists (via :has()) and remains the mobile fallback.

Applied to the 4 project pages that have a ToC sidebar; the others (all MK/SI +
3 EN) have no sidebar and keep the bottom CTA.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-05 17:55:27 +02:00
popovskik d75dbc1edd Blog: add personal essay "How I coped with leaving home" (trilingual, prose)
Publish Vasil Handziski's personal essay in MK (original) with EN/SI AI-drafted
translations. Adds a prose article variant (no scrollspy sidebar, centred column,
custom byline) via .article-page--prose, plus blog index cards in all languages.
Converter now omits the "last checked" line when empty.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-05 17:37:14 +02:00
popovskik 0bbc06c6bc 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>
2026-08-05 16:41:28 +02:00
popovskik 5abda945ed changes.txt #10: informative disclaimers (footer, guide, legal)
- Footer disclaimer on every page (informative-only, verify with official sources)
- "Good to know" callout across all Student Welcome Guide pages, pointing to
  the "Was this page helpful?" box for reporting errors
- "Website content & liability" disclaimer card on the Official information page
All three languages (EN/MK/SI).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-05 16:04:30 +02:00
popovskik 5e18020066 changes.txt Batch 1: nav, hero, gallery, project CTA, discl. groundwork
- #9.1 Reorder "Who We Are" nav to Our team, Timeline, MSOS Hub (all 225 pages)
- #4  Fix MK "Ask MSOS" label to "Прашај го МСОС"
- #11 Landing hero overlay -> radial blue vignette (lighter centre)
- #3  Gallery cards show the event date under the title (DD.MM.YYYY)
- #1  Membership/support CTA at the end of project pages (memorials excluded)
- #8  "Illustrative image" tag on blog/news photo captions
- #9.3 Mission & Vision: full-width gradient band + more space above title

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-05 15:54:33 +02:00
popovskik bec7e26dd4 Add four new blog articles + blog listing/styling updates
New posts (Ad futura scholarship, learning Slovene, welcome days,
study in North Macedonia) across EN/MK/SI, plus blog index and _blog.css
updates. (Also carries the site-wide nav reorder and the illustrative-image
caption tag on the bank-account post.)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-05 15:54:17 +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 30bc83e064 content(MK): apply proofreading corrections from owner + rename header menu
Applies the corrections from "msos web corrections.docx" across 6 Macedonian
pages, plus two global fixes, plus matching English tweaks.

Per-page (MK):
- Landing: hero eyebrow/subtitle, story section, testimonials, FAQ block
- About us / Our team: "Раководен тим" -> "Управен одбор", team names to
  Cyrillic, Marko's title, removed duplicate top gradient + added spacing,
  fixed the broken "Still have questions" footer to match the landing page
- MSOS Hub: title widow (nbsp), hub descriptions
- FAQ: intro + 9 answer corrections (also fixed leftover English fragments)
- Become a Member: card label, removed stats note, consistent "ти" voice,
  Cyrillic names, form step + success text
- Support: title, subtitle, community section, support options

Global (all MK pages): header menu "Нашиот тим, мисија, визија и вредности"
-> "Нашиот тим"; напатница -> напотница. Visible punctuation dashes changed
to commas per owner preference.

English: testimonials section (en/index.html) and two document answers
(en/faq) updated to match.

Adds docs/MK-PROOFREADING.md (6 proofread, 63 remaining of 69 MK pages).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-04 13:13:04 +02:00
popovskik b1a2a62f1b content: add real photos + captions to all Student Welcome Guide pages
Replace the "Image placeholder" boxes on all 30 guide subpages + the guide
landing hero with real, optimized photos and captions, EN/MK/SI (93 figures).

- 31 source photos (up to 18 MB) optimized to WebP (<=1400px, all <500 KB)
  as images/guide-<slug>.webp.
- Captions follow the Get-to-Know style: description + "Photo:/Фото:/Foto:"
  + linked source (or MSOS for own event photos). Photographer credits kept.
  MK/SI descriptions are translated (proofread welcome).
- CSS: move the banner crop from the figure onto the <img> so the caption
  shows below it (was clipped by the figure's fixed height + overflow).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-04 12:58:45 +02:00
popovskik 9ce7450aa1 health: fix broken pages, add image dimensions, a11y & SEO wins
Site-wide health pass (excludes in-progress blog work). Verified with a
local server + headless browser: Timeline, homepage and gallery pages load
with zero console errors and no layout distortion.

Render bugs
- Timeline page (en/mk/si): fix ../../../ paths that overshot the site root,
  so the main stylesheet and hero image load again.
- Meet Student Slovenia 2023 (en/mk/si): remove a <figure> referencing
  event3-photo-11.png, an image that was never uploaded (broken image).

Performance
- Add intrinsic width/height to 1039 raster <img> tags to prevent layout
  shift (CLS); 450 SVGs correctly skipped. Add a global
  `img { max-width:100%; height:auto }` safety net so aspect ratio is
  preserved and images never overflow.
- Preload the homepage hero (LCP) image on en/mk/si.
- Load Font Awesome non-blocking (media=print/onload swap) with a <noscript>
  fallback, on 225 pages.

Accessibility
- Add aria-label to 57 unlabeled newsletter email inputs.
- Add an sr-only <h1> to the three "My Route" pages (had no h1).
- Add an .sr-only utility class.

SEO
- Add meta descriptions to legal/msos-hub/support pages (en/mk/si).

Note: MK/SI meta descriptions are machine-drafted and should be proofread
by a native speaker before considering them final.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-04 00:31:27 +02:00
popovskik 1f5e031be9 In-post event gallery block + lightbox; mobile polish
- Reusable "Photos from the event" grid (shows 5 thumbnails + "+N more") that
  opens a full-screen lightbox (arrows / keyboard / swipe / Esc); added to the
  Meet Student Slovenia 2024 post as the pattern
- New css/components/_lightbox.css + setupLightbox() in main.js (injects one
  shared overlay, wires any .js-lightbox grid)
- Mobile polish: gallery albums go single-column on phones, two on tablets;
  event-gallery grid 3-up on mobile; lightbox sizing/controls tuned for small
  screens

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-03 15:16:28 +02:00
popovskik 24c77e6171 Gallery: distinct album cards, blue tint, hover lift, whole card links to story
- Each album is now a bordered card with a resting shadow and clear separation
- Blue brand tint over the cover photos; fades on hover so images brighten
- Whole card lifts with a stronger shadow on hover (album-level, not per image)
- Clicking anywhere on a card opens the event story page (removed the lightbox)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-03 14:49:28 +02:00
popovskik d048226daf Redesign gallery as Pinterest-style album collage cards
- Each album is now a compact collage card (1 large + 2 small photos) with a
  "+N" overlay on the last tile; multiple cards per row (responsive grid)
- Title + photo count + "Read the story" link under each card
- All album photos remain in the DOM (hidden) so the lightbox still browses
  the full set; clicking any tile opens the lightbox at that photo

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-03 14:43:04 +02:00
popovskik d085e3376a Add Gallery page (per-event albums + lightbox); remove video-thumbnail blur
- New multilingual Gallery page (en/mk/si) with 9 event albums and a
  keyboard-accessible lightbox (prev/next scoped per album)
- Reuses existing event photos; links each album to its event post
- New css/pages/_gallery.css + setupGallery() lightbox in main.js
- "Gallery" link added to the "What We Do" nav (desktop + mobile) site-wide
- Gallery URLs added to sitemap.xml with hreflang
- Landing "Every Student Has a Story": removed backdrop blur on the video
  thumbnail, kept the bluish gradient tint

Note: images/original/ (458 MB of raw source photos, gitignored + unused by
the site) moved out of the working tree to reclaim disk.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-03 14:28:53 +02:00
popovskik f5dfd8830e Hub redesign, per-language logos, partner carousel, footer + menu fixes
MSOS Hub page:
- "What you can do here": Porsche-style vertical image cards in a
  continuous auto-scrolling marquee with edge fades (real photos placeholders)
- "A glimpse of the space": full-bleed band of 4 connected photos
- "A space we built together": full-bleed image banner with blue gradient overlay
- "Made possible by": partner logo tiles (Cultural Association + Ministry);
  processed Ministry + Cultural Association logos from source art
- Copy/spacing polish; removed em-dashes; larger section spacing; deeper
  final-CTA gradient so it no longer blends into the footer

Branding / partners:
- Per-language MSOS logos (SVG) in header + footer across all pages
- Partner carousel: added Ministry (wide variant), Cultural Association,
  Embassy of North Macedonia, and Spletni Mojster (width-capped); de-duplicated
  logos within each marquee group so new logos appear sooner

Footer:
- Build credit line (Spletni Mojster + Kristijan), clean centered text
- Synced MK/SI footers to EN (added missing About us + Timeline links)

Landing page:
- FAQ short CTA already avatar design (FAQ page kept its Email/Viber block)
- Swapped blurry stock video thumbnail for the real team photo
- Removed the intentional hero-background blur

Navigation:
- Mobile menu: use 100dvh so the language selector is reachable with submenus open
- Desktop: dropdown parents no longer navigate to dead "/#" links

Language suggestion banner:
- Dismissible, browser-language based banner suggesting the matching locale;
  remembers choice in localStorage and waits for the cookie-consent choice
  to avoid overlapping the consent card

Removed stale *.html.bak backup files.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-03 14:06:53 +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 04f7653001 Support page: full legal account-holder name + fix partners spacing
- Account holder on the bank card now shows the full legal name (…za
  študentsko podporo in kulturno sodelovanje), matching the Official
  information page, in all three languages
- Fix cramped spacing: the .sup-thanks rule had cut the partners section's
  bottom padding to 24px, pushing the logos against the teal CTA; raised to
  72px for clear separation

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-03 01:10:26 +02:00
popovskik f057e761cf Fix Official information page: hero layout, short name, SKD activity
- Fix the hero: override the global flex-row .container so the eyebrow,
  title and lead stack and centre (they were laid out in a row)
- Short name -> "Društvo MŠOS za študentsko podporo in kulturno sodelovanje"
  (official kratki naziv, normal case) instead of "MSOS"
- Add the main activity row: SKD 94.999 (activities of other membership
  organisations n.e.c.), and relabel S.15000 as the institutional sector
  (SKIS). All three languages.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-03 01:05:23 +02:00
popovskik 974daa59f3 Add Official information page (EN/MK/SI) + fill real bank details
New legal/registration reference page at /{lang}/legal/ with the official
details: legal name, registered office, registration number (4128133000),
tax number (44932448), VAT status, SKIS activity, registration date, bank
(NLB d.d.), IBAN SI56 0284 3026 6115 703, SWIFT LJBASI2X, representative,
and contact. New css/pages/_legal.css. Linked as "Official information" in
the footer legal bar on all pages.

Also fills the Support page's bank-transfer card with the same real IBAN/
bank/SWIFT (placeholders removed). SEO block + hreflang + sitemap (210
pages) regenerated.

MK/SI labels AI-drafted -> native review. SWIFT LJBASI2X is inferred from
the IBAN bank code (02 = NLB) -> please double-check.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-03 00:56:19 +02:00