Skip to content

Commit 05e295a

Browse files
MazizovaMazizova
authored
Merge pull request #41 from Mazizova/community-get-involved-membership
Add a Community section: Get Involved and Join / Membership
2 parents 7956366 + 9647b59 commit 05e295a

13 files changed

Lines changed: 787 additions & 9 deletions

File tree

‎assets/scss/_community.scss‎

Lines changed: 375 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,375 @@
1+
// Community section (Get Involved, Join / Membership)
2+
// Built from the site's existing component language (about-hero, about-block,
3+
// about-value-card, about-dive-card, about-btn, resources-category-eyebrow) —
4+
// only the mockups' text and block structure carried over, not their look.
5+
6+
// ── Get Involved: numbered step list ──
7+
.steps-list {
8+
list-style: none;
9+
margin: 1.5rem 0 0;
10+
padding: 0;
11+
}
12+
13+
.step-item {
14+
display: flex;
15+
gap: 1.25rem;
16+
padding: 1.5rem 0;
17+
border-bottom: 1px solid $dark-border;
18+
19+
&:first-child { padding-top: 0; }
20+
&:last-child { padding-bottom: 0; border-bottom: none; }
21+
}
22+
23+
.step-number {
24+
flex-shrink: 0;
25+
width: 32px;
26+
height: 32px;
27+
border-radius: 50%;
28+
border: 1px solid rgba($accent, 0.35);
29+
background: $accent-glow;
30+
color: $accent;
31+
display: flex;
32+
align-items: center;
33+
justify-content: center;
34+
font-size: 0.875rem;
35+
font-weight: 700;
36+
}
37+
38+
.step-body { min-width: 0; }
39+
40+
.step-title {
41+
font-size: 1.0625rem;
42+
font-weight: 700;
43+
color: $off-white;
44+
margin: 0 0 0.375rem;
45+
}
46+
47+
.step-desc {
48+
font-size: 0.9375rem;
49+
color: $muted;
50+
line-height: 1.65;
51+
margin: 0;
52+
53+
ul {
54+
margin: 0.625rem 0 0;
55+
padding-left: 1.25rem;
56+
}
57+
58+
li {
59+
color: $muted;
60+
margin-bottom: 0.375rem;
61+
}
62+
}
63+
64+
// ── Get Involved: "Ways to contribute" card grid ──
65+
.contribute-ways-grid {
66+
display: grid;
67+
grid-template-columns: repeat(3, 1fr);
68+
gap: 1rem;
69+
margin-top: 1rem;
70+
71+
@media (max-width: $break-lg) { grid-template-columns: 1fr 1fr; }
72+
@media (max-width: $break-sm) { grid-template-columns: 1fr; }
73+
}
74+
75+
.contribute-way-card {
76+
background: $dark-surface;
77+
border: 1px solid $dark-border;
78+
border-radius: 10px;
79+
padding: 1.25rem 1.5rem;
80+
81+
h3 {
82+
font-size: 0.9375rem;
83+
color: $off-white;
84+
margin: 0 0 0.375rem;
85+
}
86+
87+
p {
88+
font-size: 0.875rem;
89+
color: $muted;
90+
line-height: 1.5;
91+
margin: 0;
92+
}
93+
}
94+
95+
// ── Shared: centered CTA band (Get Involved bottom, reused wherever a
96+
// full-width "ready to act" strip fits) ──
97+
.community-cta-band {
98+
text-align: center;
99+
background: $dark-surface;
100+
border: 1px solid $dark-border;
101+
border-radius: 12px;
102+
padding: 2rem;
103+
margin-top: 1rem;
104+
105+
p {
106+
font-size: 1rem;
107+
color: $off-white;
108+
max-width: 560px;
109+
margin: 0 auto 1.25rem;
110+
}
111+
112+
.about-cta-row {
113+
justify-content: center;
114+
margin-top: 0;
115+
}
116+
}
117+
118+
// ── Join / Membership: dark hero band ──
119+
// A normal bordered/rounded panel within .about-page's own column (same
120+
// pattern as every other card on the site), not a full-bleed break-out —
121+
// that kept independently re-centering a narrower inner column, which put
122+
// its left edge out of line with the breadcrumb and every block below it.
123+
.join-hero {
124+
background: $dark-surface;
125+
border: 1px solid $dark-border;
126+
border-radius: 14px;
127+
padding: 2.5rem 2rem;
128+
margin-bottom: 3rem;
129+
}
130+
131+
.join-hero-inner {
132+
max-width: 620px;
133+
}
134+
135+
.join-hero h1 {
136+
font-size: clamp(1.75rem, 4vw, 2.5rem);
137+
font-weight: 700;
138+
line-height: 1.25;
139+
color: $off-white;
140+
margin: 0 0 1rem;
141+
}
142+
143+
.join-hero-sub {
144+
font-size: 1.0625rem;
145+
color: $muted;
146+
line-height: 1.65;
147+
max-width: 620px;
148+
margin: 0 0 1.5rem;
149+
}
150+
151+
// ── Join / Membership: numbered reason rows ("Why companies join") ──
152+
.reasons-list {
153+
margin-top: 1.5rem;
154+
border: 1px solid $dark-border;
155+
border-radius: 12px;
156+
overflow: hidden;
157+
}
158+
159+
.reason-item {
160+
padding: 1.5rem 1.75rem;
161+
border-bottom: 1px solid $dark-border;
162+
163+
&:last-child { border-bottom: none; }
164+
}
165+
166+
.reason-number {
167+
display: block;
168+
font-size: 0.75rem;
169+
font-weight: 700;
170+
color: $muted;
171+
letter-spacing: 0.05em;
172+
margin-bottom: 0.5rem;
173+
}
174+
175+
.reason-title {
176+
font-size: 1.0625rem;
177+
font-weight: 700;
178+
color: $off-white;
179+
margin: 0 0 0.375rem;
180+
}
181+
182+
.reason-desc {
183+
font-size: 0.9375rem;
184+
color: $muted;
185+
line-height: 1.6;
186+
margin: 0;
187+
}
188+
189+
// ── Join / Membership: Individual Supporter callout ──
190+
.individual-supporter-box {
191+
display: flex;
192+
align-items: center;
193+
justify-content: space-between;
194+
gap: 1.5rem;
195+
flex-wrap: wrap;
196+
background: $dark-surface;
197+
border: 1px solid $dark-border;
198+
border-left: 3px solid $accent;
199+
border-radius: 10px;
200+
padding: 1.5rem 1.75rem;
201+
margin-top: 1.5rem;
202+
}
203+
204+
.individual-supporter-title {
205+
font-size: 1rem;
206+
font-weight: 700;
207+
color: $off-white;
208+
margin: 0 0 0.375rem;
209+
}
210+
211+
.individual-supporter-desc {
212+
font-size: 0.9375rem;
213+
color: $muted;
214+
line-height: 1.6;
215+
margin: 0;
216+
max-width: 480px;
217+
}
218+
219+
// ── Join / Membership: benefit cards ("What members get") ──
220+
.benefits-list {
221+
display: grid;
222+
grid-template-columns: repeat(4, 1fr);
223+
gap: 1rem;
224+
margin-top: 1rem;
225+
226+
@media (max-width: $break-lg) { grid-template-columns: 1fr 1fr; }
227+
@media (max-width: $break-sm) { grid-template-columns: 1fr; }
228+
}
229+
230+
.benefit-card {
231+
display: flex;
232+
align-items: center;
233+
flex-direction: column;
234+
text-align: center;
235+
background: $dark-surface;
236+
border: 1px solid $dark-border;
237+
border-radius: 12px;
238+
padding: 1.5rem 1.25rem;
239+
}
240+
241+
.benefit-icon {
242+
display: flex;
243+
align-items: center;
244+
justify-content: center;
245+
width: 44px;
246+
height: 44px;
247+
border-radius: 50%;
248+
background: $accent-glow;
249+
color: $accent;
250+
margin-bottom: 0.875rem;
251+
}
252+
253+
.benefit-title {
254+
font-size: 1rem;
255+
font-weight: 700;
256+
color: $off-white;
257+
margin: 0;
258+
}
259+
260+
// ── Join / Membership: "Other ways to support" ──
261+
.support-option-card {
262+
display: flex;
263+
align-items: center;
264+
justify-content: space-between;
265+
gap: 1.5rem;
266+
flex-wrap: wrap;
267+
background: $dark-surface;
268+
border: 1px solid $dark-border;
269+
border-radius: 10px;
270+
padding: 1.5rem 1.75rem;
271+
margin-top: 1rem;
272+
}
273+
274+
.support-option-title {
275+
font-size: 1rem;
276+
font-weight: 700;
277+
color: $off-white;
278+
margin: 0 0 0.375rem;
279+
}
280+
281+
.support-option-desc {
282+
font-size: 0.9375rem;
283+
color: $muted;
284+
line-height: 1.6;
285+
margin: 0;
286+
max-width: 480px;
287+
}
288+
289+
.support-option-link {
290+
font-size: 0.9375rem;
291+
font-weight: 600;
292+
color: $accent;
293+
text-decoration: none;
294+
white-space: nowrap;
295+
296+
&:hover { text-decoration: underline; }
297+
}
298+
299+
// ── Join / Membership: no-cost options grid ──
300+
.no-cost-grid {
301+
display: grid;
302+
grid-template-columns: 1fr 1fr;
303+
gap: 1rem;
304+
margin-top: 1rem;
305+
306+
@media (max-width: $break-sm) { grid-template-columns: 1fr; }
307+
}
308+
309+
.no-cost-card {
310+
background: $dark-surface;
311+
border: 1px solid $dark-border;
312+
border-radius: 10px;
313+
padding: 1.5rem 1.75rem;
314+
315+
h3 {
316+
font-size: 1rem;
317+
color: $off-white;
318+
margin: 0 0 0.5rem;
319+
}
320+
321+
p {
322+
font-size: 0.9375rem;
323+
color: $muted;
324+
line-height: 1.6;
325+
margin: 0 0 0.875rem;
326+
}
327+
}
328+
329+
.no-cost-link {
330+
font-size: 0.9375rem;
331+
font-weight: 600;
332+
color: $accent;
333+
text-decoration: none;
334+
335+
&:hover { text-decoration: underline; }
336+
}
337+
338+
.no-cost-link--disabled {
339+
color: $muted;
340+
cursor: default;
341+
pointer-events: none;
342+
}
343+
344+
// ── Join / Membership: closing CTA band ──
345+
.join-closing-band {
346+
display: flex;
347+
align-items: center;
348+
justify-content: space-between;
349+
gap: 1.5rem;
350+
flex-wrap: wrap;
351+
background: $dark-bg;
352+
border: 1px solid $dark-border;
353+
border-radius: 14px;
354+
padding: 2rem;
355+
margin-top: 1rem;
356+
357+
h2 {
358+
font-size: 1.375rem;
359+
margin: 0 0 0.5rem;
360+
}
361+
362+
p {
363+
font-size: 0.9375rem;
364+
color: $muted;
365+
margin: 0;
366+
max-width: 420px;
367+
}
368+
}
369+
370+
// .join-closing-actions reuses .about-cta-row's own flex/wrap behavior —
371+
// this just removes the margin-top that class normally adds after a
372+
// paragraph, since here it sits inside a flex row of its own.
373+
.join-closing-actions {
374+
margin-top: 0;
375+
}

0 commit comments

Comments
 (0)