(colored-name placeholder). Both need to render at the
58x58 thumb size that the article-recent-list expects. */
.article-recent-thumb.article-recent-thumb-wrap {
display: block;
padding: 0;
overflow: hidden;
}
.article-recent-thumb.article-recent-thumb-wrap .card-image,
.article-recent-thumb.article-recent-thumb-wrap .card-image-fallback {
width: 100%;
height: 100%;
min-height: 0;
aspect-ratio: auto;
border-radius: 8px;
font-size: 0.78rem;
padding: 6px;
line-height: 1.15;
}
/* The dev's .membership-area carries margin: 100px 0 (style.css) which
pushes the body content way below where article/event description bodies
start. The new layout uses .event-details-area for its own spacing —
neutralize the outer-wrapper margin so we match the other detail pages. */
.membership-area.join-area {
margin: 0;
}
.membership-area.join-area > .container {
padding: 0;
max-width: none;
}
/* ── Join wizard modal — shares the SAME styles as the event registration
modal (ev-checkout-modal) above so the two popups are visually
identical. We just alias .plan-join-modal-* selectors onto the same
rules as .ev-checkout-modal-* using grouped selectors. */
/* .plan-join-modal-* + .campaign-donate-modal-* rules below are grouped
with their .ev-checkout-modal-* counterparts so all three modals share
identical dimensions / chrome and cannot drift visually. */
dialog.plan-join-modal,
dialog.campaign-donate-modal {
border: none;
border-radius: 16px;
padding: 0;
max-width: 640px;
width: 92%;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
font-family: var(--font-stack);
}
dialog.plan-join-modal::backdrop,
dialog.campaign-donate-modal::backdrop {
background: rgba(0, 0, 0, 0.55);
}
.plan-join-modal-header,
.campaign-donate-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
border-bottom: 1px solid #e3e8f0;
}
.plan-join-modal-header h4,
.campaign-donate-modal-header h4 {
margin: 0;
font-family: var(--font-stack);
font-size: 18px;
font-weight: 700;
color: #505050;
}
.plan-join-modal-close,
.campaign-donate-modal-close {
background: transparent;
border: none;
font-size: 28px;
line-height: 1;
color: #666;
cursor: pointer;
padding: 0 4px;
}
.plan-join-modal-close:hover,
.campaign-donate-modal-close:hover {
color: #000;
}
.plan-join-modal-body,
.campaign-donate-modal-body {
padding: 24px;
color: #505050;
font-family: var(--font-stack);
max-height: 75vh;
overflow-y: auto;
}
.plan-join-modal-body > div:first-child > h4:first-child,
.campaign-donate-modal-body > div:first-child > h4:first-child {
margin-top: 0;
}
.plan-join-modal-body h4,
.campaign-donate-modal-body h4 {
font-family: var(--font-stack);
font-size: 22px;
font-weight: 700;
color: #505050;
}
/* ── Join wizard step indicator (Basic Details → Additional Details).
Modern numbered-circle pattern. Overrides the dev's earlier clip-path
chevron shape in style.css — we keep the .form-timeline class +
ul/li IDs (the dev's JS toggles .active on these) and just visually
redesign with a more-specific .form-timeline-steps selector. */
.form-timeline.form-timeline-steps {
margin: 4px 0 22px;
}
.form-timeline.form-timeline-steps ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
}
.form-timeline.form-timeline-steps ul li {
/* Reset the dev's clip-path chevron + background + padding. */
background: transparent;
color: #8a8a8a;
padding: 0;
clip-path: none;
width: auto;
text-align: center;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-stack);
font-size: 0.92rem;
font-weight: 600;
white-space: nowrap;
}
.form-timeline.form-timeline-steps ul li.active {
background: transparent;
color: var(--theme-color-readable);
}
.form-timeline.form-timeline-steps .form-timeline-num {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid #d9dfeb;
background: #fff;
color: #8a8a8a;
font-family: var(--font-stack);
font-size: 0.85rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
flex-shrink: 0;
}
.form-timeline.form-timeline-steps ul li.active .form-timeline-num {
background: var(--theme-color);
border-color: var(--theme-color);
color: var(--theme-on-primary);
}
.form-timeline.form-timeline-steps .form-timeline-label {
font-family: var(--font-stack);
font-weight: 600;
}
/* Connector line between the two steps. Sits between the
s as a
pseudo-element on every after the first. */
.form-timeline.form-timeline-steps ul li + li::before {
content: "";
display: inline-block;
width: 64px;
height: 2px;
background: #d9dfeb;
margin: 0 14px 0 0;
flex-shrink: 0;
}
/* When step 2 is the active one, the connector becomes themed too. */
.form-timeline.form-timeline-steps ul li.active + li::before,
.form-timeline.form-timeline-steps ul li:has(+ li.active)::before {
background: var(--theme-color);
}
/* Narrow viewports: keep the circles + numbers, hide the wordy labels. */
@media (max-width: 480px) {
.form-timeline.form-timeline-steps .form-timeline-label {
display: none;
}
.form-timeline.form-timeline-steps ul li + li::before {
width: 32px;
margin-right: 6px;
}
}
/* Drop the dev's .membership-form-box card chrome when it's rendered
INSIDE the join modal — the modal is already the card, so the inner
box-shadow + padding creates a card-in-a-card look. Scoped to the
modal so plan listings / other contexts where membership-form-box
appears stand-alone keep their original framed look. */
.plan-join-modal .membership-form-box {
box-shadow: none;
border-radius: 0;
padding: 0;
}
/* Shrink the Other-memberships list inside the plan-detail sidebar so the
titles + prices don't read as oversized. Scoped to .plan-sidebar-cta
territory (the parent .article-sidebar-card here lives only on the
plan detail page) — the article page's "More from this community"
list stays at its original size. */
.plan-sidebar-cta-actions
~ .article-recent-inline
.article-recent-inline-heading,
.article-sidebar-card:has(.plan-sidebar-cta-actions)
.article-recent-inline-heading {
font-size: 0.72rem;
margin-bottom: 10px;
}
.plan-sidebar-cta-actions ~ .article-recent-inline .article-recent-title,
.article-sidebar-card:has(.plan-sidebar-cta-actions) .article-recent-title {
font-size: 0.78rem;
line-height: 1.25;
}
.plan-sidebar-cta-actions ~ .article-recent-inline .article-recent-date,
.article-sidebar-card:has(.plan-sidebar-cta-actions) .article-recent-date {
font-size: 0.7rem;
}
/* Tighten the form field labels + helper text inside the join modal —
the dev's defaults felt loose, especially the form-check-label helper
text below the email field. Scoped to .plan-join-modal so other pages
that use .membership-form keep their original spacing. */
.plan-join-modal .membership-form label {
font-size: 0.85rem;
margin-bottom: 4px;
line-height: 1.35;
}
.plan-join-modal .membership-form .form-check-label,
.plan-join-modal .membership-form .text-muted {
font-size: 0.78rem !important;
line-height: 1.4 !important;
}
.plan-join-modal .membership-form .form-control {
font-size: 0.92rem;
padding-top: 8px;
padding-bottom: 8px;
}
.plan-join-modal .membership-form .mt-2 {
margin-top: 0.4rem;
}
/* Custom org-defined fields with short-text or textarea content span
full width inside the modal — they get a data-customfield attribute
from the foreach loop in web/join.php so we can target them without
wrapping (a wrapper div would break the Bootstrap row gutters). */
.plan-join-modal [data-customfield].col-md-6:has(input[type="text"]),
.plan-join-modal [data-customfield].col-md-12:has(textarea) {
flex: 0 0 100%;
max-width: 100%;
}
/* Step action buttons (.form-btn) — keep Back left, push Submit/Next
right. The dev's step-1 row already has justify-content-end (only
one button), step-2 has a typo " ustify-content-between" missing
the j — works by Bootstrap default but doesn't guarantee separation.
Force the correct layout for both steps. */
.plan-join-modal .form-btn {
justify-content: space-between !important;
}
.plan-join-modal .form-btn > .theme-btn:only-child,
.plan-join-modal .form-btn > .theme-btn:last-child:first-child {
margin-left: auto;
}
/* Shrink the text inside colored-name fallback thumbs in the
Other-memberships list further — at 58x58 even 0.78rem reads as
"too much" for plan names. Drop to 0.65rem so they stay legible
without dominating the disc. */
.article-recent-thumb.article-recent-thumb-wrap .card-image-fallback {
font-size: 0.65rem;
padding: 4px;
line-height: 1.1;
}
/* ── Event detail page — mobile-only fixes ─────────────────────────────
Desktop layout is untouched: the right column (.event-sidebar-col) sits
beside the description as col-md-4 + col-md-8. On mobile Bootstrap
collapses both to full-width and stacks them vertically. */
@media (max-width: 767px) {
/* Hero meta: pack the first two rows (date + time) onto the same line
so a long address row below them still flows on its own line. The
first two rows take ~50% each; rows 3+ keep the default 100%
width via the row reverting to full block flow. */
.detail-hero .detail-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
}
.detail-hero .detail-hero-meta p {
flex: 1 1 100%;
margin-bottom: 0;
}
.detail-hero .detail-hero-meta p:nth-child(1),
.detail-hero .detail-hero-meta p:nth-child(2) {
flex: 1 1 calc(50% - 6px);
min-width: 0;
}
/* Campaign hero "Raised: $X" + "Goal: $Y" line — escape the 50%
date+time pairing above. It needs the FULL row so its
justify-content: space-between (from the desktop rule) can anchor
Raised to the left edge and Goal to the right edge. */
.detail-hero .detail-hero-meta p.detail-hero-raised-line {
flex: 1 1 100%;
}
/* Reorder the event-detail sidebar so coordinators come BEFORE the map
card on mobile. Desktop renders map first because the map is the
bigger visual anchor in the sidebar; on mobile we follow the user's
reading flow: description → who → where → directions. The flex order
trick keeps desktop markup order intact. */
.event-details-area .event-sidebar-col {
display: flex;
flex-direction: column;
gap: 24px;
}
/* The desktop sibling-margin rule (.detail-info-card-sidebar +
.detail-info-card-sidebar { margin-top: 18px }) is DOM-sibling based,
so when we re-order with flex `order` it no longer applies between
the visually-adjacent cards. The flex-container gap above handles
that — zero out the sibling margin so we don't get a doubled
space on the card that would have inherited it. */
.event-details-area .event-sidebar-col .detail-info-card-sidebar + .detail-info-card-sidebar {
margin-top: 0;
}
.event-details-area .event-sidebar-col .detail-info-card-map {
order: 2;
}
.event-details-area .event-sidebar-col .detail-info-card:not(.detail-info-card-map) {
order: 1;
}
/* Tickets section padding — the desktop's 100px top/bottom band is too
much on mobile; tighten so the ticket flow doesn't feel like a giant
empty band. */
.event-tickets-section {
padding: 40px 0;
}
/* Inline checkout pill — desktop is one tall horizontal row (Stepper |
Summary | Continue) with a 60px gap that crushes everything together
under ~500px. On mobile we let it grow taller and stack vertically so
the full ticket name (which previously got ellipsis-truncated at
220px) can show in full. The summary block becomes a 2-line wrap
allowance instead of nowrap, and the row uses flex-direction: column
so each section gets its own row of real estate. */
.event-tickets-main .ev-checkout-row {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px 20px;
width: 100%;
max-width: 100%;
}
.event-tickets-main .ev-checkout-quantity,
.event-tickets-main .ev-checkout-actions {
width: 100%;
justify-content: center;
}
.event-tickets-main .ev-checkout-summary {
min-height: 0;
text-align: center;
}
/* Ticket name wraps to as many lines as it needs; the 220px clamp +
nowrap from desktop is dropped. */
.event-tickets-main .ev-checkout-summary .ev-checkout-summary-name {
white-space: normal;
overflow: visible;
text-overflow: clip;
max-width: 100%;
line-height: 1.35;
word-break: break-word;
}
.event-tickets-main .ev-checkout-continue {
width: 100%;
}
}