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) <noreply@anthropic.com>
This commit is contained in:
popovskik
parent
d35324f988
commit
51474b2da5
|
|
@ -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 */
|
||||
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
|
|
|
|||
|
|
@ -167,7 +167,6 @@
|
|||
<a class="btn btn-primary-orange" href="#join-form">Become a member</a>
|
||||
<a class="btn btn-secondary" href="#showcase">See what we do</a>
|
||||
</div>
|
||||
<div class="mm-tags"><span class="mm-tag">Community</span><span class="mm-tag">Events</span><span class="mm-tag">Support</span><span class="mm-tag">Projects</span><span class="mm-tag">Friends</span><span class="mm-tag">Opportunities</span></div>
|
||||
</div>
|
||||
<div class="mm-hero-collage"><div class="mm-hero-photo mm-hero-photo--1"><img src="../../images/event4-img-1.webp" alt="Meet Student Slovenia 2024" loading="eager"></div><div class="mm-hero-photo mm-hero-photo--2"><img src="../../images/msnl-1.webp" alt="Macedonian Student Night in Ljubljana" loading="eager"></div><div class="mm-hero-photo mm-hero-photo--3"><img src="../../images/handball-2025-1.png" alt="Cheering for Macedonia, Watching Handball Together in Slovenia" loading="eager"></div></div>
|
||||
</section>
|
||||
|
|
@ -558,8 +557,8 @@
|
|||
</div>
|
||||
</footer>
|
||||
<!-- END_FOOTER -->
|
||||
<script src="../../main.js"></script>
|
||||
<script src="../../member-form.js"></script>
|
||||
|
||||
<script src="../../main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -167,7 +167,6 @@
|
|||
<a class="btn btn-primary-orange" href="#join-form">Стани член</a>
|
||||
<a class="btn btn-secondary" href="#showcase">Види што работиме</a>
|
||||
</div>
|
||||
<div class="mm-tags"><span class="mm-tag">Заедница</span><span class="mm-tag">Настани</span><span class="mm-tag">Поддршка</span><span class="mm-tag">Проекти</span><span class="mm-tag">Пријатели</span><span class="mm-tag">Можности</span></div>
|
||||
</div>
|
||||
<div class="mm-hero-collage"><div class="mm-hero-photo mm-hero-photo--1"><img src="../../images/event4-img-1.webp" alt="Запознај ја студентска Словенија 2024" loading="eager"></div><div class="mm-hero-photo mm-hero-photo--2"><img src="../../images/msnl-1.webp" alt="Македонска студентска вечер во Љубљана" loading="eager"></div><div class="mm-hero-photo mm-hero-photo--3"><img src="../../images/handball-2025-1.png" alt="Навивање за Македонија, заедничко гледање ракомет во Словенија" loading="eager"></div></div>
|
||||
</section>
|
||||
|
|
@ -556,8 +555,8 @@
|
|||
</div>
|
||||
</footer>
|
||||
<!-- END_FOOTER -->
|
||||
<script src="../../main.js"></script>
|
||||
<script src="../../member-form.js"></script>
|
||||
|
||||
<script src="../../main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -167,7 +167,6 @@
|
|||
<a class="btn btn-primary-orange" href="#join-form">Postani član</a>
|
||||
<a class="btn btn-secondary" href="#showcase">Poglej, kaj počnemo</a>
|
||||
</div>
|
||||
<div class="mm-tags"><span class="mm-tag">Skupnost</span><span class="mm-tag">Dogodki</span><span class="mm-tag">Podpora</span><span class="mm-tag">Projekti</span><span class="mm-tag">Prijatelji</span><span class="mm-tag">Priložnosti</span></div>
|
||||
</div>
|
||||
<div class="mm-hero-collage"><div class="mm-hero-photo mm-hero-photo--1"><img src="../../images/event4-img-1.webp" alt="Spoznaj študentsko Slovenijo 2024" loading="eager"></div><div class="mm-hero-photo mm-hero-photo--2"><img src="../../images/msnl-1.webp" alt="Makedonska študentska noč v Ljubljani" loading="eager"></div><div class="mm-hero-photo mm-hero-photo--3"><img src="../../images/handball-2025-1.png" alt="Navijanje za Makedonijo, skupno gledanje rokometa v Sloveniji" loading="eager"></div></div>
|
||||
</section>
|
||||
|
|
@ -556,8 +555,8 @@
|
|||
</div>
|
||||
</footer>
|
||||
<!-- END_FOOTER -->
|
||||
<script src="../../main.js"></script>
|
||||
<script src="../../member-form.js"></script>
|
||||
|
||||
<script src="../../main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue