Add MSOS Hub venue page (EN/MK/SI) + add to Who We Are menu
A promo page for the MSOS Hub — a renovated community/event space in Ljubljana for gatherings up to 50 people. Sections: hero with quick facts, the funding/partner story (Ministry of Foreign Affairs and Trade of North Macedonia, Municipality of Ljubljana, Macedonian Cultural Association "Macedonia"), what you can do here, what's inside (amenities), an image placeholder gallery (photos pending — captioned), "made possible by", and a booking CTA (mailto info@msosorg.com). New css/pages/_hub.css. 'MSOS Hub' added to the Who We Are dropdown (desktop + mobile) on all pages. SEO block + hreflang + sitemap (207 pages) regenerated. MK/SI translations are AI-drafted -> native review. Real photos to replace the captioned placeholders when available. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed
1 parent
b9dee56628
commit
de3b65fb15
210 files changed
+1813
-4
No files matched your search
@@ -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: 60px; }
|
||||
.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; }
|
||||
}
|
||||
Reference in new issue
Block a user