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

+17 -4
View File
@@ -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); }