diff --git a/css/main.css b/css/main.css
index 828bd23b..24acec0e 100644
--- a/css/main.css
+++ b/css/main.css
@@ -36,4 +36,7 @@
@import 'pages/_faq.css';
@import 'pages/_blog.css';
@import 'pages/_news.css';
-@import 'pages/_member.css';
\ No newline at end of file
+@import 'pages/_member.css';
+@import 'pages/_support.css';
+@import 'pages/_hub.css';
+@import 'pages/_legal.css';
\ No newline at end of file
diff --git a/css/pages/_article.css b/css/pages/_article.css
index fd77dae5..9b5c0123 100644
--- a/css/pages/_article.css
+++ b/css/pages/_article.css
@@ -605,7 +605,8 @@
}
.newsletter-cta {
- padding: 0 24px 64px 24px;
+ /* top gap so the box doesn't touch the CTA/content above it on mobile */
+ padding: 32px 24px 64px 24px;
}
.newsletter-cta .container {
diff --git a/css/pages/_blog.css b/css/pages/_blog.css
index 80131c5b..2a147153 100644
--- a/css/pages/_blog.css
+++ b/css/pages/_blog.css
@@ -193,7 +193,7 @@
.blog-feat--lg .blog-feat-thumb { min-height: 200px; }
}
@media (max-width: 768px) {
- .blog-hero { padding: 92px 20px 32px; }
+ .blog-hero { padding: 32px 20px 32px; } /* body offsets the fixed header on mobile */
.blog-hero h1 { font-size: 30px; }
.blog-grid { columns: 1; }
}
diff --git a/css/pages/_hub.css b/css/pages/_hub.css
new file mode 100644
index 00000000..d14d05a7
--- /dev/null
+++ b/css/pages/_hub.css
@@ -0,0 +1,126 @@
+/* ==========================================================================
+ MSOS Hub page (venue / space promo)
+ ========================================================================== */
+.hub-page { padding-top: 80px; background: #FFFFFF; font-family: 'Inter', sans-serif; }
+
+/* ---------- Hero ---------- */
+.hub-hero {
+ background: linear-gradient(180deg, #F1F7F9 0%, #FFFFFF 100%);
+ padding: 56px 24px 44px; text-align: center;
+}
+.hub-hero .container {
+ max-width: 840px; margin: 0 auto;
+ display: flex; flex-direction: column; align-items: center; gap: 18px;
+}
+.hub-eyebrow {
+ display: inline-flex; align-items: center; gap: 8px;
+ font-weight: 700; font-size: 14px; letter-spacing: 0.06em;
+ text-transform: uppercase; color: #2D738C;
+}
+.hub-hero h1 { font-size: 44px; line-height: 1.12; color: #101828; margin: 0; font-weight: 700; }
+.hub-lead { font-size: 19px; line-height: 30px; color: #475467; margin: 0; max-width: 700px; }
+.hub-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
+
+/* Quick facts strip */
+.hub-facts {
+ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
+ margin-top: 8px;
+}
+.hub-fact {
+ display: inline-flex; align-items: center; gap: 8px;
+ background: #FFFFFF; border: 1px solid #EAECF0; border-radius: 999px;
+ padding: 8px 16px; font-size: 14px; font-weight: 600; color: #344054;
+}
+.hub-fact i { color: #2D738C; }
+
+/* ---------- Generic section ---------- */
+.hub-section { max-width: 1120px; margin: 0 auto; padding: 64px 24px; }
+.hub-section--tint { background: #F9FAFB; max-width: none; }
+.hub-section--tint > .hub-inner { max-width: 1120px; margin: 0 auto; }
+.hub-section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
+.hub-h2 { font-size: 32px; line-height: 1.2; color: #101828; margin: 0 0 12px; font-weight: 700; }
+.hub-sub { font-size: 17px; line-height: 27px; color: #667085; margin: 0; }
+
+/* ---------- Story (two columns) ---------- */
+.hub-story-grid {
+ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
+ max-width: 1120px; margin: 0 auto;
+}
+.hub-story-text .hub-h2 { text-align: left; }
+.hub-story-text p { font-size: 17px; line-height: 28px; color: #475467; margin: 0 0 16px; }
+.hub-story-text p:last-child { margin-bottom: 0; }
+
+/* ---------- Use cases ---------- */
+.hub-uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+.hub-use {
+ border: 1px solid #EAECF0; border-radius: 14px; padding: 22px; background: #fff;
+ display: flex; flex-direction: column; gap: 10px;
+ transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+.hub-use:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(16, 24, 40, 0.07); }
+.hub-use-ico {
+ width: 44px; height: 44px; border-radius: 10px;
+ display: flex; align-items: center; justify-content: center;
+ font-size: 18px; color: #fff; background: #2D738C;
+}
+.hub-use:nth-child(3n+2) .hub-use-ico { background: #FA7850; }
+.hub-use:nth-child(3n+3) .hub-use-ico { background: #3B82C4; }
+.hub-use h3 { font-size: 17px; color: #101828; margin: 0; }
+.hub-use p { font-size: 14px; line-height: 22px; color: #667085; margin: 0; }
+
+/* ---------- Amenities ---------- */
+.hub-amenities {
+ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
+ max-width: 960px; margin: 0 auto;
+}
+.hub-amenity {
+ display: flex; align-items: center; gap: 12px;
+ border: 1px solid #EAECF0; border-radius: 12px; padding: 16px; background: #fff;
+}
+.hub-amenity i { color: #2E9E6B; font-size: 18px; width: 22px; text-align: center; flex-shrink: 0; }
+.hub-amenity span { font-size: 15px; font-weight: 500; color: #344054; }
+
+/* ---------- Gallery (image placeholders) ---------- */
+.hub-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
+.hub-gallery .image-placeholder { margin: 0; }
+
+/* ---------- Supporters / made possible by ---------- */
+.hub-supporters { text-align: center; }
+.hub-supporters-list {
+ display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
+ max-width: 900px; margin: 0 auto;
+}
+.hub-supporter {
+ border: 1px solid #EAECF0; border-radius: 12px; padding: 18px 22px;
+ background: #fff; font-size: 15px; font-weight: 600; color: #344054;
+ display: inline-flex; align-items: center; gap: 10px;
+}
+.hub-supporter i { color: #2D738C; font-size: 18px; }
+
+/* ---------- Final booking CTA ---------- */
+.hub-final {
+ background: linear-gradient(135deg, #2D738C 0%, #255F74 100%);
+ color: #fff; text-align: center; padding: 64px 24px;
+}
+.hub-final h2 { color: #fff; font-size: 30px; line-height: 1.2; margin: 0 0 12px; font-weight: 700; }
+.hub-final p { color: #D6E6EC; font-size: 17px; line-height: 27px; max-width: 640px; margin: 0 auto 24px; }
+.hub-final-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
+.hub-final .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.6); }
+.hub-final .btn-ghost:hover { background: rgba(255,255,255,0.12); }
+
+/* ---------- Mobile ---------- */
+@media (max-width: 768px) {
+ .hub-page { padding-top: 0; } /* body already offsets the fixed header on mobile */
+ .hub-hero { padding: 40px 20px 32px; }
+ .hub-hero h1 { font-size: 32px; }
+ .hub-lead { font-size: 17px; line-height: 27px; }
+ .hub-section { padding: 48px 20px; }
+ .hub-h2 { font-size: 26px; }
+ .hub-story-grid { grid-template-columns: 1fr; gap: 28px; }
+ .hub-story-media { order: -1; }
+ .hub-uses { grid-template-columns: 1fr; }
+ .hub-amenities { grid-template-columns: 1fr 1fr; }
+ .hub-gallery { grid-template-columns: 1fr; }
+ .hub-final { padding: 48px 20px; }
+ .hub-final h2 { font-size: 24px; }
+}
diff --git a/css/pages/_legal.css b/css/pages/_legal.css
new file mode 100644
index 00000000..5c3c3007
--- /dev/null
+++ b/css/pages/_legal.css
@@ -0,0 +1,49 @@
+/* ==========================================================================
+ Official information (legal / registration details)
+ ========================================================================== */
+.legal-page { padding-top: 80px; background: #FFFFFF; font-family: 'Inter', sans-serif; }
+
+.legal-hero {
+ background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
+ padding: 48px 24px 28px; text-align: center;
+}
+/* Override the global flex-row .container so the hero stacks and centres. */
+.legal-hero .container { display: block; max-width: 720px; margin: 0 auto; padding: 0; }
+.legal-eyebrow {
+ display: inline-block; font-weight: 700; font-size: 14px; letter-spacing: 0.06em;
+ text-transform: uppercase; color: #2D738C; margin-bottom: 12px;
+}
+.legal-hero h1 { font-size: 40px; line-height: 1.14; color: #101828; margin: 0 0 12px; font-weight: 700; }
+.legal-lead { font-size: 17px; line-height: 27px; color: #667085; margin: 0; }
+
+.legal-wrap {
+ max-width: 760px; margin: 0 auto; padding: 36px 24px 80px;
+ display: flex; flex-direction: column; gap: 24px;
+}
+.legal-card { border: 1px solid #EAECF0; border-radius: 16px; overflow: hidden; }
+.legal-card h2 {
+ font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #667085;
+ background: #F9FAFB; margin: 0; padding: 14px 24px; border-bottom: 1px solid #EAECF0;
+}
+.legal-row {
+ display: flex; justify-content: space-between; gap: 24px;
+ padding: 14px 24px; border-bottom: 1px solid #F2F4F7;
+}
+.legal-row:last-child { border-bottom: 0; }
+.legal-row .k { color: #667085; font-size: 14px; flex-shrink: 0; }
+.legal-row .v { color: #101828; font-weight: 600; font-size: 15px; text-align: right; word-break: break-word; }
+.legal-row .v a { color: #2D738C; text-decoration: none; }
+.legal-row .v a:hover { text-decoration: underline; }
+.legal-note { font-size: 13px; line-height: 20px; color: #667085; text-align: center; margin: 4px auto 0; max-width: 640px; }
+.legal-note a { color: #2D738C; font-weight: 500; }
+
+@media (max-width: 768px) {
+ /* body already offsets the fixed header on mobile — avoid a double gap. */
+ .legal-page { padding-top: 0; }
+ .legal-hero { padding-top: 32px; }
+}
+@media (max-width: 600px) {
+ .legal-hero h1 { font-size: 30px; }
+ .legal-row { flex-direction: column; gap: 2px; }
+ .legal-row .v { text-align: left; }
+}
diff --git a/css/pages/_member.css b/css/pages/_member.css
index 9b6c97b4..42cc44a9 100644
--- a/css/pages/_member.css
+++ b/css/pages/_member.css
@@ -233,6 +233,10 @@
.mm-hero-collage { height: 340px; }
.mm-who { grid-template-columns: 1fr; }
}
+@media (max-width: 768px) {
+ /* body already offsets the fixed header on mobile — trim the hero's top. */
+ .mm-hero { padding-top: 40px; }
+}
@media (max-width: 600px) {
.mm-h2 { font-size: 26px; }
.ms-grid, .ms-paths { grid-template-columns: 1fr; }
diff --git a/css/pages/_news.css b/css/pages/_news.css
index 8810a4f1..dac0def5 100644
--- a/css/pages/_news.css
+++ b/css/pages/_news.css
@@ -104,7 +104,7 @@
}
@media (max-width: 768px) {
- .newshub-hero { padding: 92px 20px 32px; }
+ .newshub-hero { padding: 32px 20px 32px; } /* body offsets the fixed header on mobile */
.newshub-hero h1 { font-size: 30px; }
}
@@ -136,7 +136,7 @@
.news-article-cta { display: inline-block; margin-top: 12px; }
@media (max-width: 768px) {
- .news-article { padding: 92px 20px 48px; }
+ .news-article { padding: 32px 20px 48px; } /* body offsets the fixed header on mobile */
.news-article h1 { font-size: 28px; }
.news-article-body p { font-size: 17px; line-height: 28px; }
}
diff --git a/css/pages/_projects.css b/css/pages/_projects.css
index 25feec8a..fb40992a 100644
--- a/css/pages/_projects.css
+++ b/css/pages/_projects.css
@@ -316,7 +316,9 @@
@media (max-width: 768px) {
.page-content {
- padding-top: 60px; /* Prilagoditev za fiksno glavo */
+ /* body already has padding-top:60px on mobile for the fixed header,
+ so no extra offset here (avoids a double gap under the menu). */
+ padding-top: 0;
}
.page-header-section {
diff --git a/css/pages/_support.css b/css/pages/_support.css
new file mode 100644
index 00000000..4128d7ce
--- /dev/null
+++ b/css/pages/_support.css
@@ -0,0 +1,132 @@
+/* ==========================================================================
+ Support MSOS page
+ ========================================================================== */
+.support-page { padding-top: 80px; background: #FFFFFF; font-family: 'Inter', sans-serif; }
+
+/* ---------- Hero ---------- */
+.sup-hero {
+ background: linear-gradient(180deg, #FFF7F2 0%, #FFFFFF 100%);
+ padding: 56px 24px 48px;
+ text-align: center;
+}
+.sup-hero .container {
+ max-width: 820px; margin: 0 auto;
+ display: flex; flex-direction: column; align-items: center; gap: 18px;
+}
+.sup-eyebrow {
+ display: inline-flex; align-items: center; gap: 8px;
+ font-weight: 700; font-size: 14px; letter-spacing: 0.06em;
+ text-transform: uppercase; color: #E8833A;
+}
+.sup-hero h1 { font-size: 44px; line-height: 1.12; color: #101828; margin: 0; font-weight: 700; }
+.sup-lead { font-size: 19px; line-height: 30px; color: #475467; margin: 0; max-width: 680px; }
+.sup-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
+
+/* ---------- Generic section ---------- */
+.sup-section { max-width: 1120px; margin: 0 auto; padding: 64px 24px; }
+.sup-section--tint { background: #F9FAFB; max-width: none; }
+.sup-section--tint > .sup-inner { max-width: 1120px; margin: 0 auto; }
+.sup-section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
+.sup-h2 { font-size: 32px; line-height: 1.2; color: #101828; margin: 0 0 12px; font-weight: 700; }
+.sup-sub { font-size: 17px; line-height: 27px; color: #667085; margin: 0; }
+
+/* ---------- Story (two columns) ---------- */
+.sup-story-grid {
+ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
+ max-width: 1120px; margin: 0 auto;
+}
+.sup-story-text .sup-h2 { text-align: left; }
+.sup-story-text p { font-size: 17px; line-height: 28px; color: #475467; margin: 0 0 16px; }
+.sup-story-text p:last-child { margin-bottom: 0; }
+.sup-story-media img {
+ width: 100%; border-radius: 16px; display: block;
+ box-shadow: 0 12px 28px rgba(16, 24, 40, 0.10);
+}
+
+/* ---------- Ways to support (cards) ---------- */
+.sup-ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
+.sup-way {
+ border: 1px solid #EAECF0; border-radius: 16px; padding: 28px;
+ display: flex; flex-direction: column; gap: 12px; background: #fff;
+ box-shadow: 0 4px 12px rgba(16, 24, 40, 0.04);
+ transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+.sup-way:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(16, 24, 40, 0.08); }
+.sup-way-ico {
+ width: 48px; height: 48px; border-radius: 12px;
+ display: flex; align-items: center; justify-content: center;
+ font-size: 20px; color: #fff; background: #2D738C;
+}
+.sup-way:nth-child(2) .sup-way-ico { background: #FA7850; }
+.sup-way:nth-child(3) .sup-way-ico { background: #3B82C4; }
+.sup-way:nth-child(4) .sup-way-ico { background: #2E9E6B; }
+.sup-way h3 { font-size: 20px; color: #101828; margin: 0; }
+.sup-way p { font-size: 15px; line-height: 24px; color: #667085; margin: 0; flex: 1; }
+.sup-way a {
+ color: #2D738C; font-weight: 600; text-decoration: none; font-size: 15px;
+ display: inline-flex; align-items: center; gap: 6px;
+}
+.sup-way a:hover { text-decoration: underline; }
+
+/* ---------- Impact ---------- */
+.sup-impact-grid {
+ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 40px;
+ max-width: 900px; margin: 0 auto;
+}
+.sup-impact-item { display: flex; gap: 14px; align-items: flex-start; }
+.sup-impact-item i { color: #2E9E6B; font-size: 18px; margin-top: 3px; flex-shrink: 0; }
+.sup-impact-item h4 { margin: 0 0 4px; font-size: 17px; color: #101828; }
+.sup-impact-item p { margin: 0; font-size: 15px; line-height: 23px; color: #667085; }
+
+/* ---------- Bank details card ---------- */
+.sup-bank { max-width: 720px; margin: 0 auto; border: 1px solid #EAECF0; border-radius: 16px; overflow: hidden; }
+.sup-bank-head {
+ background: #2D738C; color: #fff; padding: 20px 28px;
+ display: flex; align-items: center; gap: 12px;
+}
+.sup-bank-head i { font-size: 22px; }
+.sup-bank-head h3 { margin: 0; font-size: 20px; }
+.sup-bank-body { padding: 8px 28px 12px; }
+.sup-bank-row {
+ display: flex; justify-content: space-between; gap: 16px;
+ padding: 14px 0; border-bottom: 1px solid #EAECF0;
+}
+.sup-bank-row:last-child { border-bottom: 0; }
+.sup-bank-row .k { color: #667085; font-size: 14px; }
+.sup-bank-row .v { color: #101828; font-weight: 600; font-size: 15px; text-align: right; word-break: break-word; }
+.sup-bank-row .v.todo { color: #B42318; font-weight: 600; }
+.sup-bank-note { padding: 4px 28px 24px; font-size: 13px; line-height: 20px; color: #667085; }
+
+/* ---------- Partners thank-you ---------- */
+.sup-thanks { text-align: center; padding-bottom: 72px; }
+
+/* ---------- Final contact CTA ---------- */
+.sup-final {
+ background: linear-gradient(135deg, #2D738C 0%, #255F74 100%);
+ color: #fff; text-align: center; padding: 64px 24px;
+}
+.sup-final h2 { color: #fff; font-size: 30px; line-height: 1.2; margin: 0 0 12px; font-weight: 700; }
+.sup-final p { color: #D6E6EC; font-size: 17px; line-height: 27px; max-width: 620px; margin: 0 auto 24px; }
+.sup-final-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
+.sup-final .btn-ghost {
+ background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.6);
+}
+.sup-final .btn-ghost:hover { background: rgba(255,255,255,0.12); }
+
+/* ---------- Mobile ---------- */
+@media (max-width: 768px) {
+ .support-page { padding-top: 0; } /* body already offsets the fixed header on mobile */
+ .sup-hero { padding: 40px 20px 32px; }
+ .sup-hero h1 { font-size: 32px; }
+ .sup-lead { font-size: 17px; line-height: 27px; }
+ .sup-section { padding: 48px 20px; }
+ .sup-h2 { font-size: 26px; }
+ .sup-story-grid { grid-template-columns: 1fr; gap: 28px; }
+ .sup-story-media { order: -1; }
+ .sup-ways { grid-template-columns: 1fr; }
+ .sup-impact-grid { grid-template-columns: 1fr; }
+ .sup-bank-row { flex-direction: column; gap: 2px; }
+ .sup-bank-row .v { text-align: left; }
+ .sup-final { padding: 48px 20px; }
+ .sup-final h2 { font-size: 24px; }
+}
diff --git a/en/about-us/index.html b/en/about-us/index.html
index c4fcf6bb..a0c40658 100644
--- a/en/about-us/index.html
+++ b/en/about-us/index.html
@@ -78,6 +78,7 @@
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+