diff --git a/css/pages/_member.css b/css/pages/_member.css index 758cccdd..9b6c97b4 100644 --- a/css/pages/_member.css +++ b/css/pages/_member.css @@ -50,17 +50,27 @@ .mm-hero-photo--2 { } .mm-hero-photo--3 { } -/* ---- benefits ---- */ -.mm-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 32px; } +/* ---- benefits (bento grid: 7 icon cards + 2 real photo tiles) ---- */ +.mm-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .mm-benefit { background: #FFFFFF; border: 1px solid #EAECF0; border-radius: 16px; padding: 26px; transition: transform 0.18s ease, box-shadow 0.18s ease; } .mm-benefit:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(16,24,40,0.08); } -.mm-benefit-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--mm-orange); background: #FFF1E8; margin-bottom: 16px; } +.mm-benefit-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--mm-orange); background: #FFF1E8; margin-bottom: 16px; transition: transform 0.2s ease, background 0.2s ease; } +.mm-benefit:hover .mm-benefit-ico { transform: scale(1.08) rotate(-4deg); background: #FFE3D1; } .mm-benefit h3 { font-size: 18px; margin: 0 0 8px; } .mm-benefit p { font-size: 15px; line-height: 23px; color: #667085; margin: 0; } +/* photo tiles */ +.mm-benefit-photo { position: relative; margin: 0; min-height: 240px; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 28px rgba(16,24,40,0.12); } +.mm-benefit-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } +.mm-benefit-photo:hover img { transform: scale(1.06); } +.mm-benefit-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; color: #FFFFFF; font-weight: 700; font-size: 16px; line-height: 22px; background: linear-gradient(to top, rgba(16,24,40,0.78), rgba(16,24,40,0.15) 70%, rgba(16,24,40,0)); } + +@media (max-width: 900px) { .mm-benefits { grid-template-columns: repeat(2, 1fr); } } +@media (max-width: 600px) { .mm-benefits { grid-template-columns: 1fr; } } + /* ---- numbers ---- */ .mm-numbers-section { background: var(--mm-teal); padding: 64px 24px; text-align: center; } -.mm-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; max-width: 960px; margin: 28px auto 0; } +.mm-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; max-width: 960px; margin: 44px auto 0; } .mm-num { color: #FFFFFF; } .mm-num-value { display: block; font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .mm-num-label { display: block; margin-top: 8px; font-size: 15px; color: rgba(255,255,255,0.85); } @@ -75,7 +85,7 @@ .mm-way p { font-size: 14px; line-height: 22px; color: #667085; margin: 0; } /* ---- membership in real life ---- */ -.mm-reals { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } +.mm-reals { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; } .mm-real { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid #EAECF0; background: #FFFFFF; text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease; } .mm-real:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(16,24,40,0.10); } .mm-real-media { height: 170px; background: #F2F4F7; } @@ -86,7 +96,7 @@ .mm-real-link { font-size: 14px; font-weight: 600; color: var(--mm-orange); display: inline-flex; align-items: center; gap: 6px; } /* ---- testimonials ---- */ -.mm-tests { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } +.mm-tests { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 40px; } .mm-test { margin: 0; background: #FFFFFF; border: 1px solid #EAECF0; border-radius: 16px; padding: 26px; box-shadow: 0 6px 16px rgba(16,24,40,0.04); } .mm-test blockquote { margin: 0 0 18px; font-size: 17px; line-height: 27px; color: #101828; } .mm-test blockquote::before { content: '\201C'; color: var(--mm-orange); font-size: 40px; line-height: 0; vertical-align: -18px; margin-right: 4px; } @@ -94,21 +104,28 @@ .mm-test figcaption span { font-size: 13px; color: #98A2B3; } /* ---- projects showcase ---- */ -.mm-shows { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } +.mm-shows { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 40px; } .mm-show { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid #EAECF0; text-decoration: none; color: inherit; background: #FFFFFF; transition: transform 0.18s ease, box-shadow 0.18s ease; } .mm-show:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(16,24,40,0.10); } .mm-show-media { height: 180px; background: #F2F4F7; } .mm-show-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .mm-show h3 { font-size: 16px; margin: 0; padding: 16px 18px; line-height: 1.3; } -/* ---- who can join ---- */ -.mm-who { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } -.mm-who-card { border: 1px solid #EAECF0; border-radius: 18px; padding: 30px; background: #FFFFFF; } -.mm-who-card:first-child { border-color: #F6C9A8; background: linear-gradient(180deg, #FFF7F1 0%, #FFFFFF 100%); } -.mm-who-ico { font-size: 26px; color: var(--mm-orange); margin-bottom: 14px; } -.mm-who-card h3 { font-size: 20px; margin: 0 0 8px; } -.mm-who-card p { font-size: 15px; line-height: 23px; color: #667085; margin: 0 0 16px; } -.mm-who-link { font-weight: 600; color: var(--mm-teal); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } +/* ---- floating "Become a member" CTA (appears after the hero, hides near the form) ---- */ +.mm-sticky-cta { + position: fixed; right: 24px; bottom: 24px; z-index: 900; + display: inline-flex; align-items: center; gap: 10px; + background: var(--mm-orange); color: #FFFFFF; font-weight: 700; font-size: 15px; + padding: 14px 22px; border-radius: 999px; text-decoration: none; + box-shadow: 0 10px 28px rgba(242,118,46,0.45); + transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.25s ease; +} +.mm-sticky-cta[hidden] { display: none; } +.mm-sticky-cta.is-hiding { opacity: 0; transform: translateY(14px); pointer-events: none; } +.mm-sticky-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(242,118,46,0.55); } +@media (max-width: 600px) { + .mm-sticky-cta { right: 16px; bottom: 16px; padding: 12px 18px; font-size: 14px; } +} /* ---- multi-step form ---- */ .ms-section { max-width: 760px; margin: 0 auto; padding: 72px 24px; } @@ -130,12 +147,26 @@ .ms-step h3 { font-size: 20px; margin: 0 0 6px; } .ms-hint { font-size: 14px; color: #98A2B3; margin: 0 0 16px; } -.ms-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; } -.ms-path { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; border: 2px solid #EAECF0; border-radius: 16px; background: #FFFFFF; cursor: pointer; font-family: inherit; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } -.ms-path i { font-size: 26px; color: var(--mm-orange); } -.ms-path strong { font-size: 16px; color: #101828; } -.ms-path:hover { border-color: #F6C9A8; transform: translateY(-2px); } -.ms-path.is-selected { border-color: var(--mm-orange); background: #FFF7F1; } +/* path choice: two rich, colour-accented cards (student = orange, supporter = teal) */ +.ms-step--path { text-align: center; } +.ms-path-prompt { font-size: 18px; margin: 0 0 20px; } +.ms-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; } +.ms-path { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 32px 22px; border: 2px solid #EAECF0; border-radius: 18px; background: #FFFFFF; cursor: pointer; font-family: inherit; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } +.ms-path-ico { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; transition: transform 0.18s ease; } +.ms-path--student .ms-path-ico { color: var(--mm-orange); background: #FFF1E8; } +.ms-path--supporter .ms-path-ico { color: var(--mm-teal); background: #E7F1F4; } +.ms-path strong { font-size: 18px; color: #101828; } +.ms-path-desc { font-size: 14px; line-height: 21px; color: #667085; } +.ms-path-go { margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 6px; opacity: 0; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease; } +.ms-path--student .ms-path-go { color: var(--mm-orange); } +.ms-path--supporter .ms-path-go { color: var(--mm-teal); } +.ms-path:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(16,24,40,0.10); } +.ms-path:hover .ms-path-ico { transform: scale(1.06); } +.ms-path:hover .ms-path-go, .ms-path.is-selected .ms-path-go { opacity: 1; transform: translateY(0); } +.ms-path--student:hover, .ms-path--student.is-selected { border-color: var(--mm-orange); } +.ms-path--supporter:hover, .ms-path--supporter.is-selected { border-color: var(--mm-teal); } +.ms-path--student.is-selected { background: #FFF7F1; } +.ms-path--supporter.is-selected { background: #EFF5F7; } .ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; } .ms-field { display: flex; flex-direction: column; gap: 6px; } diff --git a/en/become-a-member/index.html b/en/become-a-member/index.html index 3515a815..2f877172 100644 --- a/en/become-a-member/index.html +++ b/en/become-a-member/index.html @@ -158,6 +158,7 @@
+
Become a member @@ -174,6 +175,10 @@

Why become a member?

+
+ Macedonian students gathered together in Ljubljana +
Real events, real friendships
+

Find your people

Meet Macedonian students across Slovenia and build friendships outside the classroom.

@@ -199,9 +204,13 @@

Grow your network

Meet students, alumni, professionals, institutions and partners.

-
+

Feel at home away from home

Belong to a community where you never have to explain where you come from.

+
+ Students writing their names in Cyrillic at Macedonian Student Night +
A piece of home in Slovenia
+
@@ -274,18 +283,17 @@
I joined because I wanted to meet people. I stayed because MSOS became part of my life in Slovenia.
-
AnaStudent, Ljubljana
+
AnaStudent, Maribor
When I moved to Slovenia, I did not know where to begin. Through MSOS I found support, friends and opportunities.
-
MarkoStudent, Maribor
+
MarkoStudent, Ljubljana
Being part of the team taught me more than any classroom. I organised events, met partners and grew a lot.
-
ElenaVolunteer, Koper
+
KaterinaVolunteer, Koper
-

Sample quotes to replace with real testimonials.

@@ -319,30 +327,32 @@
See all events and projects
-
-

There is a place for you here

-
-

For students

Current students, future students, bachelor and master students, in every Slovenian study city.

I am a student
-

For supporters

You do not need to be a student to support the community. Contribute through knowledge, partnerships, mentorship, volunteering, sponsorships, media or useful connections.

I want to support MSOS
-
-
-
- Membership form -

Join in a couple of minutes

-

A few friendly questions. You do not need to decide now how active you want to be.

+ Join us +

There is a place for you here

+

Choose how you would like to join. It takes a couple of minutes, and you can decide later how active you want to be.

-
-

How would you like to connect with MSOS?

+
+

Which one sounds like you?

- - + +
diff --git a/member-form.js b/member-form.js index f171fedf..5cf2bd2c 100644 --- a/member-form.js +++ b/member-form.js @@ -25,6 +25,28 @@ nums.forEach(function (n) { io.observe(n); }); } + /* ---- floating "Become a member" CTA: show after the hero, hide near the form/footer ---- */ + (function () { + var sticky = document.querySelector('.mm-sticky-cta'); + if (!sticky) return; + var hero = document.querySelector('.mm-hero'); + var joinForm = document.getElementById('join-form'); + var finalCta = document.querySelector('.mm-final'); + function update() { + var pastHero = hero ? (window.scrollY > hero.offsetHeight - 100) : (window.scrollY > 500); + var nearTarget = [joinForm, finalCta].some(function (el) { + if (!el) return false; + var r = el.getBoundingClientRect(); + return r.top < window.innerHeight * 0.85 && r.bottom > 0; + }); + if (pastHero && !nearTarget) { sticky.hidden = false; sticky.classList.remove('is-hiding'); } + else if (!sticky.hidden) { sticky.classList.add('is-hiding'); } + } + window.addEventListener('scroll', update, { passive: true }); + window.addEventListener('resize', update); + update(); + })(); + /* ---- multi-step form ---- */ var form = document.querySelector('.ms-form'); if (!form) return; @@ -99,7 +121,8 @@ var last = state.idx === total - 1; var onPath = state.order[state.idx] === 'path'; next.hidden = last || onPath; - submit.hidden = !last; + // never show submit on the path step (you advance by picking a card) + submit.hidden = !last || onPath; if (last) submit.textContent = state.path === 'student' ? submit.getAttribute('data-student') : submit.getAttribute('data-supporter'); alertBox.hidden = true; } diff --git a/mk/become-a-member/index.html b/mk/become-a-member/index.html index 3c778327..553be843 100644 --- a/mk/become-a-member/index.html +++ b/mk/become-a-member/index.html @@ -158,6 +158,7 @@
+
Стани член @@ -174,6 +175,10 @@

Зошто да станеш член?

+
+ Македонски студенти собрани во Љубљана +
Вистински настани, вистински пријателства
+

Најди ги своите луѓе

Запознај македонски студенти низ Словенија и создади пријателства надвор од предавалната.

@@ -199,9 +204,13 @@

Прошири ја својата мрежа

Запознај студенти, алумни, професионалци, институции и партнери.

-
+

Почувствувај се како дома

Припаѓај на заедница каде никогаш не мораш да објаснуваш од каде доаѓаш.

+
+ Студенти ги пишуваат своите имиња на кирилица на македонската студентска вечер +
Парче дома во Словенија
+
@@ -274,18 +283,17 @@
Се приклучив затоа што сакав да запознаам луѓе. Останав затоа што МСОС стана дел од мојот живот во Словенија.
-
AnaСтудентка, Љубљана
+
AnaСтудентка, Марибор
Кога се преселив во Словенија, не знаев од каде да почнам. Преку МСОС најдов поддршка, пријатели и можности.
-
MarkoСтудент, Марибор
+
MarkoСтудент, Љубљана
Тимската работа ме научи повеќе од која било предавална. Организирав настани, запознав партнери и многу пораснав.
-
ElenaВолонтерка, Копер
+
KaterinaВолонтерка, Копер
-

Примерни цитати за замена со вистински.

@@ -319,30 +327,32 @@
Сите настани и проекти
-
-

Тука има место за тебе

-
-

За студенти

Сегашни и идни студенти, додипломски и магистерски, во секој словенечки студентски град.

Јас сум студент
-

За поддржувачи

Не мора да си студент за да ја поддржиш заедницата. Придонеси со знаење, партнерства, менторство, волонтирање, спонзорства, медиуми или корисни врски.

Сакам да го поддржам МСОС
-
-
-
- Формулар за членство -

Приклучи се за неколку минути

-

Неколку пријателски прашања. Не мора сега да одлучиш колку активен сакаш да бидеш.

+ Приклучи се +

Тука има место за тебе

+

Избери како сакаш да се приклучиш. Трае само неколку минути, а колку активен ќе бидеш можеш да одлучиш подоцна.

-
-

Како сакаш да се поврзеш со МСОС?

+
+

Што те опишува подобро?

- - + +
diff --git a/si/become-a-member/index.html b/si/become-a-member/index.html index 5069642a..645b69a9 100644 --- a/si/become-a-member/index.html +++ b/si/become-a-member/index.html @@ -158,6 +158,7 @@
+
Postani član @@ -174,6 +175,10 @@

Zakaj postati član?

+
+ Makedonski študenti zbrani v Ljubljani +
Pravi dogodki, prava prijateljstva
+

Najdi svoje ljudi

Spoznaj makedonske študente po vsej Sloveniji in stkaj prijateljstva zunaj predavalnice.

@@ -199,9 +204,13 @@

Razširi svojo mrežo

Spoznaj študente, alumne, strokovnjake, ustanove in partnerje.

-
+

Počuti se kot doma

Pripadaj skupnosti, kjer ti nikoli ni treba pojasnjevati, od kod prihajaš.

+
+ Študenti pišejo svoja imena v cirilici na makedonskem študentskem večeru +
Košček doma v Sloveniji
+
@@ -274,18 +283,17 @@
Pridružil sem se, ker sem želel spoznati ljudi. Ostal sem, ker je MSOS postal del mojega življenja v Sloveniji.
-
AnaŠtudentka, Ljubljana
+
AnaŠtudentka, Maribor
Ko sem se preselil v Slovenijo, nisem vedel, kje začeti. Prek MSOS sem našel podporo, prijatelje in priložnosti.
-
MarkoŠtudent, Maribor
+
MarkoŠtudent, Ljubljana
Delo v ekipi me je naučilo več kot katera koli predavalnica. Organiziral sem dogodke, spoznal partnerje in veliko zrasel.
-
ElenaProstovoljka, Koper
+
KaterinaProstovoljka, Koper
-

Vzorčni citati za zamenjavo z resničnimi.

@@ -319,30 +327,32 @@
Vsi dogodki in projekti
-
-

Tukaj je prostor zate

-
-

Za študente

Sedanji in bodoči študenti, dodiplomski in magistrski, v vsakem slovenskem študijskem mestu.

Sem študent
-

Za podpornike

Ni ti treba biti študent, da podpiraš skupnost. Prispevaj z znanjem, partnerstvi, mentorstvom, prostovoljstvom, sponzorstvi, mediji ali povezavami.

Želim podpreti MSOS
-
-
-
- Prijavni obrazec -

Pridruži se v nekaj minutah

-

Nekaj prijaznih vprašanj. Ni ti treba zdaj odločiti, kako aktiven želiš biti.

+ Pridruži se +

Tukaj je prostor zate

+

Izberi, kako se želiš pridružiti. Vzame le nekaj minut, kako aktiven boš, pa se lahko odločiš pozneje.

-
-

Kako se želiš povezati z MSOS?

+
+

Kaj te bolje opiše?

- - + +