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:
popovskikandClaude Opus 4.8 committed 2026-08-01 12:29:59 +02:00
1 parent d35324f988
commit 51474b2da5
5 files changed
+30 -10

No files matched your search

+10
View File
@@ -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 */