— a page-scoped markup change only, so their content stays valid inside summary's content model; the shared mamadex.css rules for those two classes are selector-only (never tag-qualified) and keep applying unmodified. display:block is restored on .capability-card-label here since defaults to inline and

's implicit block behaviour is lost with the tag change — the only reason this page overrides that one shared-looking property. Nothing in mamadex.css itself was touched; mamadex.html's own capability section keeps its original non-interactive div/p structure untouched. Whole-card selectability, "no lightbox" and "no JS accordion" all fall out of using

as the sole trigger: native summary click/keyboard handling covers the whole box (image included, since img is not itself interactive and does not intercept the click), no .media-thumb class or data-gallery attribute is present so media-lightbox.js's delegation (which matches on .media-thumb) never engages, and multiple cards can be open at once because that is

's native default — no JS was added to force accordion (single-open) behaviour, matching the owner's explicit "no JavaScript accordion" instruction. Chevron uses the same CSS-only border-triangle technique already established for this exact interaction pattern elsewhere on the site (faq.css's .faq-item summary::after), rotated via the details[open] attribute selector — no JS reads or writes the open state. ====================================================================================================== */ .page-mamadex-join .capability-disclosure { display: flex; flex-direction: column; width: 100%; } .page-mamadex-join .capability-summary { display: flex; flex-direction: column; width: 100%; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .page-mamadex-join .capability-summary::-webkit-details-marker { display: none; } .page-mamadex-join .capability-summary::marker { display: none; } /* replaces

for summary-content-model validity (see file header note above) — restore the block display the shared mamadex.css rule never had to declare while this was a

. */ .page-mamadex-join .capability-card-label { display: block; } /* Trigger row — "What this includes" + chevron, directly beneath the label, inside the always-visible summary content (so it, like the photograph, stays visible when the card is collapsed). Centred to match the label's own centred treatment (mamadex.css .capability-card-label). */ .page-mamadex-join .capability-trigger { display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0 1rem 1rem; margin-top: -0.5rem; font-family: var(--text-font); font-size: 0.875rem; /* v1.10.0: up from 0.8125rem — owner reported disclosure-panel text too small */ font-weight: 600; color: var(--page-primary); /* Touch target: the whole summary (image + label + this row) is the click target, well over the 44px minimum on its own via the image height alone — this row does not need its own min-height. */ } .page-mamadex-join .capability-chevron { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--page-primary); flex-shrink: 0; transition: transform 0.2s ease; } .page-mamadex-join .capability-disclosure[open] .capability-chevron { transform: rotate(180deg); } .page-mamadex-join .capability-summary:focus { outline: 2px solid var(--page-primary); outline-offset: -2px; border-radius: 10px; } .page-mamadex-join .capability-summary:focus:not(:focus-visible) { outline: none; } /* Panel content — hidden by the browser natively when the details element is closed (this div sits outside

); only the lead/list/consent copy is ever conditionally hidden, never the photograph or label. */ .page-mamadex-join .capability-disclosure-panel { padding: 0 1rem 1.125rem; } .page-mamadex-join .capability-disclosure-lead { font-family: var(--text-font); font-weight: 700; font-size: 1rem; /* v1.10.0: up from 0.875rem — owner reported disclosure-panel text too small */ color: var(--fg); margin: 0.75rem 0 0.375rem; text-align: left; } .page-mamadex-join .capability-disclosure-lead:first-child { margin-top: 0; } .page-mamadex-join .capability-disclosure-list { list-style: none; padding: 0; margin: 0 0 0.25rem; text-align: left; } .page-mamadex-join .capability-disclosure-list li { position: relative; padding-left: 1.25rem; margin-bottom: 0.375rem; color: var(--muted); font-size: 0.9375rem; /* v1.10.0: up from 0.8125rem — owner reported disclosure-panel text too small */ line-height: 1.55; } .page-mamadex-join .capability-disclosure-list li::before { content: "✓"; position: absolute; left: 0; color: var(--page-primary); font-weight: 700; } .page-mamadex-join .capability-disclosure-consent { margin: 0.5rem 0 0; padding: 0.625rem 0.75rem; font-size: 0.875rem; /* v1.10.0: up from 0.75rem — owner reported disclosure-panel text too small */ line-height: 1.5; text-align: left; background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(139, 92, 246, 0.22); border-radius: 6px; color: var(--fg); } [data-theme="dark"] .page-mamadex-join .capability-trigger, [data-theme="dark"] .page-mamadex-join .capability-disclosure-columns > .capability-disclosure-col:first-child .capability-disclosure-lead { color: var(--sdx-color-mama-violet-light); } [data-theme="dark"] .page-mamadex-join .capability-chevron { border-top-color: var(--sdx-color-mama-violet-light); } /* Universal readiness block — reuses .mamadex-join-not-title (§2, already centred/bold) and .join-list (§3, already checkmarked/left-aligned) and .mamadex-join-note--emphasis (§6, already the exact non-approval-sentence styling used in §6 of the page) verbatim; only the wrapper's own top margin is new. */ .page-mamadex-join .mamadex-join-readiness { margin-top: 1.75rem; } @media (prefers-reduced-motion: reduce) { .page-mamadex-join .capability-chevron { transition: none; } } [data-theme="dark"] .page-mamadex-join .capability-disclosure-consent { background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.35); } /* ====================================================================================================== 8) Density and layout correction — v1.5.0. Owner-reviewed screenshots showed two distinct problems: (a) opening a capability disclosure produced a tall narrow single-column wall of text instead of a scannable panel, and (b) §4-§8 read as excessive vertical padding over very wide centred prose. Both are corrected here, formatting only — no wording, image, route, contact, translation *value*, Form 1/2/3, or shared-file change anywhere below. One exception permitted by the brief: the duplicate non-approval sentence previously rendered in both this section and §6 is now rendered once only (§6's own

was removed in the HTML; the mamadex_join.next.non_approval_note key itself is kept, still consumed by the readiness block below). All new selectors below are page-scoped (.page-mamadex-join / new wrapper classes only) or scoped via a NEW WRAPPER ELEMENT whose presence changes the DOM parent of existing elements (e.g. .intro is now a child of .mamadex-join-content in §5-§8, not a direct child of .mamadex-join-section) — this is why the existing §2 rule (.mamadex-join-section > .intro, direct-child combinator) no longer matches those five sections without being edited: the immediate parent changed, so the old rule simply stops applying there, while continuing to serve §2 "Recognition" (deliberately NOT wrapped, deliberately NOT in scope for this pass) exactly as before. No existing §1-§7 rule was edited to make this work. ====================================================================================================== */ /* -- 8a) Generic narrow content column — §5 intake, §6 next, §7 Living Tower, §8 privacy intro/note. Left-aligned, narrower than the shared .sdx-card-section's own 1200px canvas so prose reads as a normal measure instead of stretching wall-to-wall. */ .mamadex-join-content { max-width: 42rem; margin: 0 auto; } .mamadex-join-content > .intro { font-size: 1.0625rem; line-height: 1.6; text-align: left; color: var(--muted); margin: 0 0 1.25rem; } .mamadex-join-content > *:last-child { margin-bottom: 0; } /* -- 8b) §4 "What joining means" — balanced two-column interior at desktop (left: what joining means; right: the "is not" list in a quiet inset surface, not a warning box), stacked on mobile. Reuses .intro and .join-list--not verbatim; only the grid wrapper and the inset surface are new. */ .mamadex-join-means-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; max-width: 56rem; margin: 0 auto; } @media (min-width: 1024px) { .mamadex-join-means-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 2.5rem; } } .mamadex-join-means-grid > .intro { font-size: 1.0625rem; line-height: 1.6; text-align: left; color: var(--muted); margin: 0; } .mamadex-join-not { background: rgba(120, 113, 108, 0.06); border: 1px solid rgba(120, 113, 108, 0.14); border-radius: var(--radius); padding: 1.25rem 1.5rem; } .mamadex-join-not .join-list { margin: 0; } .mamadex-join-not .join-list li:last-child { margin-bottom: 0; } [data-theme="dark"] .mamadex-join-not { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); } /* Redeclares text-align/margin only (cascade: later + equal specificity wins over the §3 rule above for these two properties; font-weight and color are unchanged so are not repeated). Both current users of this class — §4's "is not" title and the readiness block's own heading below — now sit in left-aligned narrow contexts, so a single left-aligned definition correctly serves both; there is no third, centred usage anywhere on this page. */ .mamadex-join-not-title { text-align: left; margin: 0 0 0.75rem; } /* -- 8c) §8 Privacy — two columns for the seven "do not send" items at desktop, one column on mobile. grid-auto-flow:column with a fixed 4-row track reads top-to-bottom then continues in the second column (items 1-4, then 5-7), not the default row-major left-right-left-right order, which would read oddly for an itemised list. */ @media (min-width: 1024px) { .mamadex-join-privacy-list { display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 2rem; row-gap: 0; } } /* -- 8d) §7 Living Tower — reduced vertical prominence: button sits close to the copy above it (this is supporting context, not the primary application path) instead of the wider default gap. v1.9.0 CORRECTION — owner instruction, following owner screenshot review: the v1.5.0 left-alignment below is now overridden back to centred so this button visually matches the page's other primary CTA ("Contact us about joining" in the §9 CTA band) — see §9 below for the matching colour fix. Left-aligned narrow-column prose above (.mamadex-join-content > .intro) is untouched; only this button's own wrapper is re-centred. */ .mamadex-join-living-tower-link { text-align: center; margin-top: 1rem; } /* -- 8e) Universal readiness block — v1.5.0 restructure. Was a single centred column that visually disappeared beneath six busy cards; now a distinct, compact module: heading + one short framing line on the left, the seven points on the right, closing non-approval callout full-width beneath both (not the base .mamadex-join-note's own 56rem centred cap, which is still correct for the unrelated §3/§8 quiet-callout usages of that same base class — overridden here only for this instance via the added modifier class). Stacks to heading -> framing -> points -> callout on mobile, matching the brief's mobile order exactly. A top border (not a full section) marks it as its own module without becoming another large page-sized section. */ .page-mamadex-join .mamadex-join-readiness { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--border); } .page-mamadex-join .mamadex-join-readiness-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; } @media (min-width: 1024px) { .page-mamadex-join .mamadex-join-readiness-grid { grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 1.3fr); gap: 2.5rem; } } .page-mamadex-join .mamadex-join-readiness-framing { font-family: var(--text-font); font-size: 0.9375rem; line-height: 1.5; color: var(--muted); margin: 0; } .page-mamadex-join .mamadex-join-readiness-list { margin: 0; } .page-mamadex-join .mamadex-join-readiness-callout { max-width: none; margin: 1.5rem 0 0; } /* -- 8f) Card grid — explicit safety net, not a change of behaviour: never stretch collapsed cards to match a taller sibling (e.g. a longer translated label wrapping to two lines in one locale). Harmless for open cards, which occupy their own full-width row and have no sibling to stretch against. */ .page-mamadex-join .capability-grid { align-items: start; } /* -- 8g) Expanded-card architecture — the main fix. An opened disclosure no longer renders as a tall narrow column: the card itself spans the full grid row (:has() — supported in every evergreen engine this site already depends on, e.g. faq.css's own modern CSS usage), and its two native children (

= photo+label+trigger, and the panel div) become a two-column grid instead of a vertical stack. Photo/summary stay left, criteria panel right — matches the collapsed card's own left-to-right reading start point, so opening a card does not relocate the photograph. Below 1024px this entire block does not apply — cards stay exactly as already specified (single column, summary then panel stacked beneath, no side-by-side content), matching the established desktop/mobile line already used throughout this file's own hero rules. No accordion script —

keeps its native default of allowing multiple simultaneously-open elements; nothing here reads or writes the open attribute. */ @media (min-width: 1024px) { .page-mamadex-join .capability-card:has(.capability-disclosure[open]) { grid-column: 1 / -1; } .page-mamadex-join .capability-disclosure[open] { display: grid; grid-template-columns: minmax(18rem, 0.85fr) minmax(0, 1.3fr); gap: 1.5rem; align-items: start; } .page-mamadex-join .capability-disclosure[open] .capability-disclosure-panel { padding: 1.5rem 1.5rem 1.5rem 0; } .page-mamadex-join .capability-disclosure-columns { display: flex; gap: 2rem; } .page-mamadex-join .capability-disclosure-columns > .capability-disclosure-col { flex: 1 1 0; min-width: 0; } } /* -- 8h) Disclosure density reduction — tighter list rhythm, and the two lead phrases ("This may describe your centre if…" / "Later, we may ask about…") made visibly distinct by colour rather than weight alone, so an open panel reads as two clearly different kinds of information, not one undifferentiated block. Warning-note colour (mama-violet) is unchanged from v1.4.0 — still deliberately not red/coral, so it never reads as an error. */ .page-mamadex-join .capability-disclosure-list li { margin-bottom: 0.25rem; } .page-mamadex-join .capability-disclosure-panel { padding: 0 1rem 0.875rem; } .page-mamadex-join .capability-disclosure-columns > .capability-disclosure-col:first-child .capability-disclosure-lead { color: var(--page-primary); } .page-mamadex-join .capability-disclosure-columns > .capability-disclosure-col:last-child .capability-disclosure-lead { color: var(--fg); opacity: 0.72; } .page-mamadex-join .capability-disclosure-consent { margin-top: 0.75rem; } /* ====================================================================================================== 9) Living Tower button colour match — v1.9.0, owner instruction. Owner screenshot showed the "See the Living Tower" button rendering flat/mono (var(--page-primary) solid fill only) after v1.9.0's class swap to sdx-btn-primary, because the page's real MamaDEX gradient (mamadex.css §7, `.page-mamadex .sdx-cta-band .sdx-btn-primary`) is scoped to buttons inside .sdx-cta-band only — this button sits in §7's in-page content, not the CTA band, so it never matched that selector and fell back to global.css's plain single-colour .sdx-btn-primary rule. Reproduces the exact same gradient/shadow values as the CTA band rule, scoped narrowly to this one button only (not a blanket .sdx-btn-primary override, so no other button anywhere on this page or elsewhere is affected) so it now visually matches "Contact us about joining" exactly. mamadex.css itself is untouched — this is a page-scoped duplicate of its §7 values, same pattern this file already uses throughout. */ .page-mamadex-join .mamadex-join-living-tower-link .sdx-btn-primary { background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%); color: #ffffff; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.40), inset 0 0 0 1px rgba(255, 255, 255, 0.20); } .page-mamadex-join .mamadex-join-living-tower-link .sdx-btn-primary:hover { box-shadow: 0 10px 30px rgba(139, 92, 246, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.25); }