diff --git a/blog-filter.js b/blog-filter.js index 7aafb2aa..c79d0906 100644 --- a/blog-filter.js +++ b/blog-filter.js @@ -1,22 +1,91 @@ -/* Blog topic filter: chips toggle which cards are shown. No dependencies. */ +/* Blog: topic filter + client-side pagination (they work together). + Chips toggle the visible topic; the pager pages through the matches. */ (function () { var list = document.querySelector('.blog-list'); if (!list) return; - var chips = list.querySelectorAll('.blog-chip'); - var cards = list.querySelectorAll('.blog-card'); + var chips = [].slice.call(list.querySelectorAll('.blog-chip')); + var cards = [].slice.call(list.querySelectorAll('.blog-card')); + var pager = list.querySelector('.blog-pagination'); + var numbers = pager ? pager.querySelector('.pagination-numbers') : null; + var prevBtn = pager ? pager.querySelector('[data-nav="prev"]') : null; + var nextBtn = pager ? pager.querySelector('[data-nav="next"]') : null; + var pageSize = pager ? (parseInt(pager.getAttribute('data-page-size'), 10) || 6) : 6; - function apply(topic) { - cards.forEach(function (card) { - var show = topic === 'all' || card.getAttribute('data-topic') === topic; - card.hidden = !show; + var state = { topic: 'all', page: 1 }; + + function matching() { + return cards.filter(function (c) { + return state.topic === 'all' || c.getAttribute('data-topic') === state.topic; }); } + // Compact list of page tokens: numbers and 'dots'. + function tokens(total, cur) { + if (total <= 7) { + var all = []; + for (var i = 1; i <= total; i++) all.push(i); + return all; + } + var set = { 1: 1, 2: 1 }; + set[total] = 1; set[total - 1] = 1; + set[cur] = 1; set[cur - 1] = 1; set[cur + 1] = 1; + var pages = Object.keys(set).map(Number).filter(function (n) { return n >= 1 && n <= total; }).sort(function (a, b) { return a - b; }); + var out = []; + for (var j = 0; j < pages.length; j++) { + if (j > 0 && pages[j] - pages[j - 1] > 1) out.push('dots'); + out.push(pages[j]); + } + return out; + } + + function buildPager(total) { + if (!pager) return; + if (total <= 1) { pager.hidden = true; return; } + pager.hidden = false; + numbers.innerHTML = ''; + tokens(total, state.page).forEach(function (t) { + if (t === 'dots') { + var s = document.createElement('span'); + s.className = 'page-dots'; + s.textContent = '...'; + numbers.appendChild(s); + return; + } + var b = document.createElement('button'); + b.type = 'button'; + b.className = 'page-number' + (t === state.page ? ' active' : ''); + b.textContent = t; + b.addEventListener('click', function () { state.page = t; render(true); }); + numbers.appendChild(b); + }); + prevBtn.classList.toggle('disabled', state.page <= 1); + nextBtn.classList.toggle('disabled', state.page >= total); + } + + function render(scroll) { + var m = matching(); + var total = Math.max(1, Math.ceil(m.length / pageSize)); + if (state.page > total) state.page = total; + if (state.page < 1) state.page = 1; + var start = (state.page - 1) * pageSize; + var end = start + pageSize; + cards.forEach(function (c) { c.hidden = true; }); + m.slice(start, end).forEach(function (c) { c.hidden = false; }); + buildPager(total); + if (scroll) list.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + chips.forEach(function (chip) { chip.addEventListener('click', function () { chips.forEach(function (c) { c.classList.remove('is-active'); }); chip.classList.add('is-active'); - apply(chip.getAttribute('data-topic')); + state.topic = chip.getAttribute('data-topic'); + state.page = 1; + render(false); }); }); + if (prevBtn) prevBtn.addEventListener('click', function () { if (state.page > 1) { state.page--; render(true); } }); + if (nextBtn) nextBtn.addEventListener('click', function () { state.page++; render(true); }); + + render(false); })(); diff --git a/css/pages/_article.css b/css/pages/_article.css index 05ce1f66..fd77dae5 100644 --- a/css/pages/_article.css +++ b/css/pages/_article.css @@ -447,11 +447,11 @@ ========================================================================== */ .newsletter-cta { - padding: 0 32px 96px 32px; + padding: 40px 32px 72px 32px; } .newsletter-cta .container { - padding: 64px; + padding: 44px 48px; background: #F9FAFB; border-radius: 16px; display: flex; @@ -459,7 +459,7 @@ justify-content: center; align-items: center; max-width: 1216px; - gap: 32px; + gap: 20px; text-align: center; } @@ -467,22 +467,28 @@ display: flex; flex-direction: column; align-items: center; - gap: 16px; + gap: 10px; flex: 1; } .newsletter-cta h2 { - font-size: 30px; + font-size: 24px; font-weight: 600; - line-height: 38px; + line-height: 32px; color: #101828; margin: 0; } .newsletter-cta p { - font-size: 20px; - line-height: 30px; + font-size: 16px; + line-height: 24px; color: #667085; margin: 0; } +/* Small print — override the generic .newsletter-cta p size above */ +.newsletter-cta .privacy-note { + font-size: 13px; + line-height: 20px; + margin-top: 4px; +} .newsletter-cta .subscribe-form-bottom { display: flex; gap: 16px; diff --git a/css/pages/_blog.css b/css/pages/_blog.css index 68670c29..c2a00bac 100644 --- a/css/pages/_blog.css +++ b/css/pages/_blog.css @@ -176,3 +176,13 @@ .blog-hero h1 { font-size: 30px; } .blog-grid { columns: 1; } } + +/* Pagination — reuses the shared .pagination look; reset button chrome. + Topic filter + client-side paging are handled by blog-filter.js. */ +.blog-pagination { margin-top: 40px; } +.blog-pagination .pagination-arrow, +.blog-pagination .page-number { + background: transparent; + border: none; + font-family: inherit; +} diff --git a/css/pages/_home.css b/css/pages/_home.css index effc5958..6f87f7fb 100644 --- a/css/pages/_home.css +++ b/css/pages/_home.css @@ -201,13 +201,23 @@ /* 4. Activities Section */ .activities-section { - padding: 128px 80px; + padding: 112px 80px; background: #F9FAFB; } .activities-header { text-align: center; - margin-bottom: 96px; + margin-bottom: 64px; +} + +.activities-eyebrow { + display: inline-block; + color: #2D738C; + font-weight: 700; + font-size: 14px; + letter-spacing: 0.06em; + text-transform: uppercase; + margin-bottom: 12px; } .activities-header h2 { @@ -216,80 +226,126 @@ line-height: 44px; letter-spacing: -0.02em; color: #101828; - margin-bottom: 20px; + margin-bottom: 16px; } .activities-header p { - font-size: 20px; - line-height: 30px; + font-size: 19px; + line-height: 29px; color: #667085; - max-width: 768px; + max-width: 720px; margin: 0 auto; } .activities-content { - display: flex; - gap: 109px; + display: grid; + grid-template-columns: 340px 1fr; + gap: 56px; max-width: 1232px; margin: 0 auto; + align-items: start; } .activities-nav { - width: 302px; display: flex; flex-direction: column; - justify-content: space-between; + gap: 12px; } -.activities-nav ul { - list-style: none; - padding: 0; - margin: 0; +/* Tab buttons — card style with icon + active highlight */ +.activity-tab { display: flex; - flex-direction: column; - gap: 40px; -} - -.activities-nav li { - font-size: 20px; - color: #646E82; - cursor: pointer; - position: relative; - padding-left: 48px; -} -.activities-nav li::before { - content: ''; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - width: 24px; - height: 2px; - background-color: #646E82; -} - -.activities-nav li.active { - font-size: 24px; - font-weight: 600; - color: #000000; -} - -.activity-details { - width: 821px; -} - -.activity-details p { - font-size: 20px; - line-height: 30px; - color: #667085; - margin-bottom: 40px; -} - -.activity-details img { + align-items: center; + gap: 16px; width: 100%; - height: 400px; + text-align: left; + background: transparent; + border: 1px solid transparent; + border-radius: 14px; + padding: 16px 18px; + cursor: pointer; + font-family: inherit; + color: #475467; + transition: background 0.18s ease, border-color 0.18s ease, + box-shadow 0.18s ease, transform 0.18s ease; +} +.activity-tab:hover { + background: #FFFFFF; + border-color: #EAECF0; + transform: translateX(2px); +} +.activity-tab.active { + background: #FFFFFF; + border-color: #EAECF0; + box-shadow: 0 10px 24px rgba(16, 24, 40, 0.06); +} + +.activity-tab-ico { + flex: 0 0 auto; + width: 44px; + height: 44px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + color: #2D738C; + background: #E7F0F3; + transition: background 0.18s ease, color 0.18s ease; +} +.activity-tab.active .activity-tab-ico { + background: #2D738C; + color: #FFFFFF; +} + +.activity-tab-label { + font-size: 17px; + font-weight: 600; + line-height: 22px; +} +.activity-tab.active .activity-tab-label { + color: #101828; +} + +.activities-cta { + margin-top: 20px; + align-self: flex-start; +} + +/* Panels */ +.activities-panels { + position: relative; +} +.activity-panel[hidden] { + display: none; +} +.activity-panel.active { + animation: activity-fade 0.35s ease; +} +@keyframes activity-fade { + from { opacity: 0; transform: translateY(8px); } + to { opacity: 1; transform: none; } +} +.activity-panel p { + font-size: 19px; + line-height: 30px; + color: #475467; + margin: 0 0 28px; +} +.activity-panel-media { + border-radius: 20px; + overflow: hidden; + box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12); +} +.activity-panel-media img { + width: 100%; + height: 420px; object-fit: cover; - border-radius: 24px; + display: block; + transition: transform 0.5s ease; +} +.activity-panel-media:hover img { + transform: scale(1.04); } /* 5. Latest News Section */ @@ -386,127 +442,92 @@ /* 7. Become Part Section */ -.become-part-section { - padding: 128px 0; - background: #F9FAFB; - text-align: center; +/* ========================================================================== + Join CTA — "Find your people" band (mirrors member hero, blue/white palette) + ========================================================================== */ +.join-cta { + position: relative; + max-width: 1200px; + margin: 0 auto; + padding: 96px 24px; + display: grid; + grid-template-columns: 1.05fr 0.95fr; + gap: 48px; + align-items: center; } - -.become-part-header { - margin-bottom: 64px; +/* Full-bleed soft-blue gradient band behind the centred content */ +.join-cta::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 50%; + width: 100vw; + transform: translateX(-50%); + background: linear-gradient(115deg, #CFE3EA 0%, #E4EFF3 45%, #F5FAFC 100%); + z-index: -1; } - -.become-part-header h2 { - font-size: 36px; - font-weight: 600; - line-height: 44px; +.join-cta-eyebrow { + display: inline-block; + color: #2D738C; + font-weight: 700; + font-size: 14px; + letter-spacing: 0.06em; + text-transform: uppercase; + margin-bottom: 14px; +} +.join-cta-text h2 { + font-size: 46px; + line-height: 1.06; letter-spacing: -0.02em; color: #101828; - margin-bottom: 20px; + margin: 0 0 18px; } - -.become-part-header p { - font-size: 20px; +.join-cta-lead { + font-size: 19px; line-height: 30px; - color: #646E82; + color: #475467; + margin: 0 0 28px; + max-width: 520px; } - -.team-photo { - width: 1232px; - height: 400px; - object-fit: cover; - border-radius: 24px; - margin: 0 auto 96px; - display: block; -} - -.contact-form-container { - max-width: 800px; - margin: 0 auto; -} - -.contact-form { +.join-cta-actions { display: flex; - flex-direction: column; - gap: 24px; - text-align: left; -} - -.form-row { - display: flex; - gap: 32px; -} - -.form-group { - flex: 1; - display: flex; - flex-direction: column; -} - -.form-group label { - font-size: 14px; - font-weight: 500; - color: #344054; - margin-bottom: 6px; -} - -.form-group input, -.form-group textarea, -.form-group select { - padding: 12px 16px; - border: 1px solid #D0D5DD; - border-radius: 8px; - box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); - font-size: 16px; - background: #FFFFFF; - color: #646E82; - font-family: 'Inter', sans-serif; -} -.form-group input::placeholder, -.form-group textarea::placeholder { - color: #646E82; -} - -.phone-input { - display: flex; - border: 1px solid #D0D5DD; - border-radius: 8px; - overflow: hidden; - box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); -} -.phone-input select { - border: none; - border-right: 1px solid #D0D5DD; - border-radius: 0; - box-shadow: none; -} -.phone-input input { - border: none; - flex-grow: 1; - box-shadow: none; -} - -.checkbox-group { - flex-direction: row; + gap: 14px; + flex-wrap: wrap; align-items: center; - gap: 12px; } -.checkbox-group input { - width: 20px; - height: 20px; -} -.checkbox-group label { - margin: 0; - color: #646E82; -} -.checkbox-group label a { - color: #2D738C; -} - -.contact-form button { - width: 100%; - padding: 12px 20px; +/* Normalise both button sizes so they align cleanly */ +.join-cta-actions .btn { + padding: 14px 28px; font-size: 16px; + line-height: 24px; + border-radius: 10px; +} +.join-cta-collage { + position: relative; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 16px; + height: 460px; +} +.join-cta-photo { + border-radius: 18px; + overflow: hidden; + box-shadow: 0 16px 32px rgba(16, 24, 40, 0.12); +} +.join-cta-photo img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transition: transform 0.5s ease; +} +.join-cta-photo:hover img { + transform: scale(1.05); +} +.join-cta-photo--1 { + grid-row: 1 / span 2; } /* 8. FAQ Section */ @@ -714,7 +735,7 @@ } .activities-header { padding: 0 24px; - margin-bottom: 48px; + margin-bottom: 40px; } .activities-header h2 { font-size: 32px; @@ -725,56 +746,39 @@ line-height: 24px; } .activities-content { - flex-direction: column; - align-items: center; - gap: 32px; + grid-template-columns: 1fr; + gap: 28px; padding: 0 24px; } .activities-nav { width: 100%; - max-width: 326px; - gap: 32px; + gap: 10px; } - .activities-nav ul { - width: 100%; - gap: 16px; + .activity-tab { + padding: 14px 16px; + gap: 14px; } - .activities-nav li { - display: flex; - justify-content: space-between; - align-items: center; - padding: 16px; - background: rgba(208, 213, 221, 0.5); - border-radius: 8px; + .activity-tab-ico { + width: 40px; + height: 40px; font-size: 16px; - font-weight: 600; - color: #000; } - .activities-nav li::before { - display: none; - } - .activities-nav li.active::after { - content: ' '; - display: inline-block; - border: solid black; - border-width: 0 2px 2px 0; - padding: 4px; - transform: rotate(45deg); - -webkit-transform: rotate(45deg); - } - .activities-nav .btn-primary-orange { - align-self: center; - } - .activity-details { - width: 100%; - max-width: 327px; - } - .activity-details p { + .activity-tab-label { font-size: 16px; - line-height: 24px; } - .activity-details img { + .activities-cta { + width: 100%; + text-align: center; + margin-top: 8px; + } + .activity-panel p { + font-size: 16px; + line-height: 25px; + } + .activity-panel-media img { height: 300px; + } + .activity-panel-media { border-radius: 16px; } @@ -841,33 +845,28 @@ margin-top: 0; } - /* Mobile Become Part Section */ - .become-part-section { - padding: 64px 16px; + /* Mobile Join CTA */ + .join-cta { + grid-template-columns: 1fr; + padding: 64px 20px; + gap: 36px; } - .become-part-header { - margin-bottom: 48px; + .join-cta-text h2 { + font-size: 34px; } - .become-part-header h2 { - font-size: 32px; - line-height: 40px; + .join-cta-lead { + font-size: 17px; + line-height: 27px; } - .become-part-header p { - font-size: 16px; - line-height: 24px; - } - .team-photo { - width: 100%; - height: auto; - margin-bottom: 48px; - } - .contact-form-container { - width: 100%; - padding: 0; - } - .form-row { + .join-cta-actions { flex-direction: column; - gap: 24px; + align-items: stretch; + } + .join-cta-actions .btn { + width: 100%; + } + .join-cta-collage { + height: 320px; } /* Mobile FAQ Section */ diff --git a/css/pages/_projects.css b/css/pages/_projects.css index aa43b0ab..25feec8a 100644 --- a/css/pages/_projects.css +++ b/css/pages/_projects.css @@ -19,8 +19,10 @@ } .page-header-section { - padding: 96px 0; - background: #FFFFFF; + background: linear-gradient(180deg, #FFF7F2 0%, #FFFFFF 100%); + /* .page-content already offsets the fixed 80px header, so this top value + is the actual visible gap under the menu — keep it small. */ + padding: 40px 24px 44px; text-align: center; } @@ -28,30 +30,34 @@ display: flex; flex-direction: column; align-items: center; - gap: 24px; - max-width: 960px; + gap: 14px; + max-width: 760px; } +/* Eyebrow — uppercase, letter-spaced, like the News/Blog hero */ .page-subtitle { - font-weight: 600; - font-size: 16px; - color: #FA7850; + display: inline-block; + font-weight: 700; + font-size: 14px; + letter-spacing: 0.06em; + text-transform: uppercase; + color: #E8833A; } .page-header-section h1 { - font-weight: 600; - font-size: 48px; - line-height: 60px; - letter-spacing: -0.02em; + font-weight: 700; + font-size: 42px; + line-height: 1.12; color: #101828; margin: 0; + max-width: 760px; } .page-description { - font-size: 20px; - line-height: 30px; - color: #667085; - max-width: 768px; + font-size: 18px; + line-height: 28px; + color: #475467; + max-width: 640px; margin: 0; } @@ -107,67 +113,60 @@ /* 1b. Filter kategorij (pill navigacija + podfiltri) */ +/* Filter bar — left-aligned pills with a thin separator, like the News hub. + .filter-inner mirrors the posts container so the pills/separator line up + with the grid below. */ .filter-section { - padding: 0 24px 44px; - margin-top: -40px; + padding: 8px 80px 40px; /* bottom gap so the separator/sub-filter clears "All our projects" */ +} +.filter-inner { + max-width: 1280px; + margin: 0 auto; + padding: 0 32px; display: flex; flex-direction: column; - align-items: center; - gap: 20px; + gap: 16px; } -/* Zunanja "pill" navigacija (glavne kategorije) */ .filter-nav { display: flex; + flex-wrap: wrap; align-items: center; - gap: 4px; - max-width: 100%; - padding: 6px; - background: #F9FAFB; - border-radius: 999px; - box-shadow: 0px 8px 30px rgba(16, 24, 40, 0.06); - overflow-x: auto; - scrollbar-width: none; - -ms-overflow-style: none; + gap: 10px; + padding-bottom: 24px; + border-bottom: 1px solid #EAECF0; /* thin, near-transparent separator */ } -.filter-nav::-webkit-scrollbar { display: none; } .filter-pill { - flex: 0 0 auto; - display: inline-flex; - align-items: center; - justify-content: center; - height: 40px; - padding: 0 20px; - border: none; - background: transparent; - border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; - color: #344054; + color: #475467; + background: #F2F4F7; + border: 1px solid transparent; + border-radius: 999px; + padding: 9px 16px; white-space: nowrap; cursor: pointer; - transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; + transition: background 0.15s ease, color 0.15s ease; } .filter-pill:hover { - color: #2D738C; + background: #E4E7EC; } .filter-pill.active { - color: #2D738C; - background: #FFFFFF; - box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); + background: #101828; + color: #FFFFFF; } -/* Notranja vrstica s podfiltri (npr. vrste dogodkov) */ +/* Sub-filter row (e.g. event types) — sits under the pills, left aligned */ .filter-subnav { display: flex; flex-wrap: wrap; align-items: center; - justify-content: center; + justify-content: flex-start; gap: 12px; } .filter-subnav[hidden] { display: none; } @@ -321,12 +320,12 @@ } .page-header-section { - padding: 64px 24px; + padding: 32px 20px 28px; } .page-header-section h1 { - font-size: 32px; - line-height: 40px; + font-size: 30px; + line-height: 1.15; } .page-description { @@ -344,16 +343,16 @@ } .filter-section { - padding: 0 16px 28px; - margin-top: -24px; - align-items: stretch; - gap: 16px; + padding: 8px 20px 32px; + } + .filter-inner { + padding: 0; + gap: 14px; } - /* Na mobilnem se glavna navigacija vodoravno pomika */ .filter-nav { justify-content: flex-start; - border-radius: 12px; + padding-bottom: 20px; } .filter-subnav { @@ -381,11 +380,14 @@ } .pagination { - flex-direction: column; - gap: 24px; + flex-wrap: wrap; + gap: 20px; } + /* Numbers on their own row on top; Previous / Next share the row below */ .pagination-numbers { order: -1; + flex-basis: 100%; + justify-content: center; } } \ No newline at end of file diff --git a/docs/newsletter-signup.md b/docs/newsletter-signup.md new file mode 100644 index 00000000..39bab4d0 --- /dev/null +++ b/docs/newsletter-signup.md @@ -0,0 +1,136 @@ +# Standard: Newsletter signup (MailerLite) + +**Status:** established convention — follow it on every page that should collect email subscribers. +**Audience:** anyone (human or AI agent) adding a newsletter signup to this site. + +This documents the one and only way we add a "subscribe to our newsletter" form. It is already +wired to MailerLite through `main.js`; you do **not** write any JavaScript. You only paste HTML. + +--- + +## 1. How it works (read this once) + +- All subscribe forms are handled centrally by `setupNewsletter()` in **`main.js`** (section 7). +- On page load it finds every `form.subscribe-form` and `form.subscribe-form-bottom`, and: + - forces the input to `type="email"`, `name="fields[email]"`, `required`, + - inserts a live status message element after the form, + - on submit: validates the email, then POSTs to MailerLite's JSONP endpoint, + - shows a localized success / error / "sending" message (EN / SI / MK). +- MailerLite uses **double opt-in**: the subscriber gets a confirmation email. The success + message intentionally says "check your inbox to confirm". + +**MailerLite config** lives in one place — `main.js`, `setupNewsletter()`: + +```js +const ML_ACCOUNT = '1253161'; +const ML_FORM = '194374752800868123'; +``` + +To point the whole site at a different MailerLite audience/form, change those two values only. +(They come from MailerLite → Forms → Embedded forms → your form → the subscribe URL +`https://assets.mailerlite.com/jsonp//forms/
/subscribe`.) + +--- + +## 2. Two non-negotiable requirements + +1. **The page must load `main.js`.** Without it the form is dead. Check for: + ```html + + ``` + just before ``. If a page has its own script (e.g. `news-filter.js`), load `main.js` + **as well**, before it. (This was the exact bug on the News hub page — it shipped without + `main.js`, so its form — and its header dropdowns — didn't work.) + +2. **Use the exact class names.** `subscribe-form-bottom` (full band, the default) or + `subscribe-form` (compact hero). No other class is auto-wired. + +--- + +## 3. The snippet (default — full "band" CTA) + +This is the standard block shown above the footer on content pages (News, articles, projects, +get-to-know…). Paste it just before ``. + +```html +
+``` + +Styling is already defined in `css/pages/_article.css` (`.newsletter-cta`, `.subscribe-form-bottom`, +`.privacy-note`) and is globally available via `main.css`. Nothing to add. + +### Compact variant (hero) +When you want it inline under a page hero (as on the get-to-know pages), use the smaller form — +same wiring, no band wrapper: + +```html +
+ + +
+

{{PRIVACY_TEXT}} {{PRIVACY_LINK}}{{PRIVACY_SUFFIX}}

+``` + +--- + +## 4. `{{PREFIX}}` — the relative path to the site root + +Count the folders between the page and the repo root; that's how many `../` you need. + +| Page location (example) | `{{PREFIX}}` | +| -------------------------------------------------------- | ------------ | +| `en/index.html` | `../` | +| `en/news/index.html` | `../../` | +| `en/news/proof-of-means-updated-2026/index.html` | `../../../` | + +So the privacy link on a depth‑3 article is `../../../en/privacy-policy/`, and the script tag is +`../../../main.js`. Get this wrong and the link/JS 404s. + +--- + +## 5. Copy — fill the placeholders per language + +Always ship all three languages (`en/`, `si/`, `mk/`) — the site is fully mirrored. + +**Honest copy only.** Do **not** reuse the legacy `"Join 2,000+ subscribers"` heading that still +appears on some older pages — we don't have that many subscribers. Tailor the heading to the page. +The values below are the current News-section standard: + +| Field | EN | MK | SI | +| ------------------ | --------------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------ | +| `{{HEADING}}` | Never miss an MSOS update | Не пропуштајте ниту една новост од МСОС | Ne zamudite nobene novice MSOS | +| `{{SUBTITLE}}` | News, announcements and open calls — straight to your inbox. | Вести, соопштенија и отворени повици — директно во вашето сандаче. | Novice, obvestila in razpisi — naravnost v vaš e-poštni predal. | +| `{{PLACEHOLDER}}` | Enter your email | Внесете ја вашата е-пошта | Vnesite svoj e-mail | +| `{{BUTTON}}` | Subscribe | Претплати се | Naroči se | +| `{{PRIVACY_TEXT}}` | We care about your data in our | Ние се грижиме за вашите податоци во нашата | Skrbimo za vaše podatke v naši | +| `{{PRIVACY_LINK}}` | privacy policy | политика за приватност | politiki zasebnosti | +| `{{PRIVACY_SUFFIX}}` | *(empty)* | *(empty)* | `.` | + +Change `{{HEADING}}` / `{{SUBTITLE}}` to fit the page's purpose; keep the rest as-is for consistency. + +--- + +## 6. Checklist before you call it done + +- [ ] Block pasted before `` (band) or under the hero (compact). +- [ ] `{{PREFIX}}` correct for the page depth (privacy link **and** the `main.js` script tag). +- [ ] Page loads `main.js` (added *before* any page-specific script). +- [ ] All three languages updated (`en/`, `si/`, `mk/`). +- [ ] Copy is honest (no fake subscriber counts). +- [ ] Tested locally: on load the input gets `name="fields[email]"` and a `.subscribe-status` + element appears after the form; an invalid email shows the "valid email" error. + **Do not** submit a real address while testing — it lands in the live MailerLite audience. diff --git a/en/about-us/index.html b/en/about-us/index.html index c7132a3e..18fc05a4 100644 --- a/en/about-us/index.html +++ b/en/about-us/index.html @@ -42,7 +42,6 @@ @@ -55,18 +54,12 @@
  • Get to know Macedonia
  • - +