From 51474b2da58154b30af96c6adba7104f8151399b Mon Sep 17 00:00:00 2001 From: popovskik Date: Sat, 1 Aug 2026 12:29:59 +0200 Subject: [PATCH] Polish Become a Member hero: full-bleed gradient, button sizing + interaction, remove tag pills - Hero gradient now spans edge to edge (full-viewport ::before band behind the centred content) and is more colourful/on-brand (warm peach to soft teal). - Both hero CTAs (Become a member / See what we do) share one size so they align. - Add hover (lift + shadow + colour shift) and active (press) states to the reusable .btn classes, so all buttons site-wide get consistent feedback; plus a focus-visible outline for keyboard users. - Remove the confusing Community/Events/Support/... tag pills (they duplicated the hero lead sentence). member.js updated + now emits main.js on the member pages so regeneration keeps the nav working. Co-Authored-By: Claude Opus 4.8 (1M context) --- css/components/_buttons.css | 10 ++++++++++ css/pages/_member.css | 21 +++++++++++++++++---- en/become-a-member/index.html | 3 +-- mk/become-a-member/index.html | 3 +-- si/become-a-member/index.html | 3 +-- 5 files changed, 30 insertions(+), 10 deletions(-) diff --git a/css/components/_buttons.css b/css/components/_buttons.css index 221c6c4e..b677e0b0 100644 --- a/css/components/_buttons.css +++ b/css/components/_buttons.css @@ -27,8 +27,15 @@ display: inline-block; text-align: center; white-space: nowrap; /* KLJUČNA SPREMEMBA: Prepreči prelamljanje besedila */ + transition: transform 0.15s ease, box-shadow 0.15s ease, + background-color 0.15s ease, border-color 0.15s ease; } +/* Interaction: subtle lift on hover, press-down on click */ +.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 24, 40, 0.12); } +.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); } +.btn:focus-visible { outline: 2px solid #2D738C; outline-offset: 2px; } + /* 2. Različice gumbov */ .btn-primary { @@ -36,6 +43,7 @@ color: #FFFFFF; border-color: #2D738C; } +.btn-primary:hover { background-color: #255E73; border-color: #255E73; } .btn-primary-orange { background: #FA7850; @@ -44,12 +52,14 @@ font-size: 18px; line-height: 28px; } +.btn-primary-orange:hover { background: #E8663F; } .btn-secondary { background-color: #FFFFFF; color: #344054; border: 1px solid #D0D5DD; } +.btn-secondary:hover { background-color: #F9FAFB; border-color: #98A2B3; color: #101828; } /* 3. Gumbi z ikonami */ diff --git a/css/pages/_member.css b/css/pages/_member.css index 594ae265..758cccdd 100644 --- a/css/pages/_member.css +++ b/css/pages/_member.css @@ -14,7 +14,7 @@ /* ---- hero ---- */ .mm-hero { - background: linear-gradient(180deg, #FFF4EC 0%, #FFFFFF 100%); + position: relative; padding: 120px 24px 64px; display: grid; grid-template-columns: 1.05fr 0.95fr; @@ -23,12 +23,25 @@ max-width: 1200px; margin: 0 auto; } +/* Full-bleed gradient band behind the centred content: spans edge to edge + while the text/images stay within the 1200px column. */ +.mm-hero::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 50%; + width: 100vw; + transform: translateX(-50%); + background: linear-gradient(115deg, #FFD3B8 0%, #FFE7D6 42%, #DCEBEE 100%); + z-index: -1; +} .mm-eyebrow { display: inline-block; color: var(--mm-orange); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; } .mm-hero h1 { font-size: 52px; line-height: 1.05; margin: 0 0 18px; letter-spacing: -0.02em; } .mm-hero-lead { font-size: 19px; line-height: 30px; color: #475467; margin: 0 0 28px; max-width: 520px; } -.mm-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; } -.mm-tags { display: flex; flex-wrap: wrap; gap: 8px; } -.mm-tag { font-size: 13px; font-weight: 600; color: #475467; background: #FFFFFF; border: 1px solid #EAECF0; border-radius: 999px; padding: 6px 14px; } +.mm-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; } +/* Both hero buttons share one size so they align cleanly */ +.mm-hero-cta .btn { padding: 14px 28px; font-size: 16px; line-height: 24px; border-radius: 10px; } .mm-hero-collage { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 460px; } .mm-hero-photo { border-radius: 18px; overflow: hidden; box-shadow: 0 16px 32px rgba(16,24,40,0.12); } diff --git a/en/become-a-member/index.html b/en/become-a-member/index.html index e2882dc8..3515a815 100644 --- a/en/become-a-member/index.html +++ b/en/become-a-member/index.html @@ -167,7 +167,6 @@ Become a member See what we do -
CommunityEventsSupportProjectsFriendsOpportunities
Meet Student Slovenia 2024
Macedonian Student Night in Ljubljana
Cheering for Macedonia, Watching Handball Together in Slovenia
@@ -558,8 +557,8 @@ + - diff --git a/mk/become-a-member/index.html b/mk/become-a-member/index.html index 4566c62a..3c778327 100644 --- a/mk/become-a-member/index.html +++ b/mk/become-a-member/index.html @@ -167,7 +167,6 @@ Стани член Види што работиме -
ЗаедницаНастаниПоддршкаПроектиПријателиМожности
Запознај ја студентска Словенија 2024
Македонска студентска вечер во Љубљана
Навивање за Македонија, заедничко гледање ракомет во Словенија
@@ -556,8 +555,8 @@ + - diff --git a/si/become-a-member/index.html b/si/become-a-member/index.html index de87b9a7..5069642a 100644 --- a/si/become-a-member/index.html +++ b/si/become-a-member/index.html @@ -167,7 +167,6 @@ Postani član Poglej, kaj počnemo -
SkupnostDogodkiPodporaProjektiPrijateljiPriložnosti
Spoznaj študentsko Slovenijo 2024
Makedonska študentska noč v Ljubljani
Navijanje za Makedonijo, skupno gledanje rokometa v Sloveniji
@@ -556,8 +555,8 @@ + -