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:
1 parent
d35324f988
commit
51474b2da5
5 files changed
+30
-10
No files matched your search
@@ -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 */
|
||||
|
||||
|
||||
Reference in new issue
Block a user