/* ====================================================================================================== File: mamadex-restoration-evidence.css Path: assets/css/mamadex/mamadex-restoration-evidence.css Author: Buktika Webdesk (Binka) Owner: Buktika — Binka Purpose: Page-scoped styles for mamadex-restoration-evidence.html (MamaDEX Door 1 — "I need evidence of human restoration"). Loaded AFTER mamadex.css so this file's .page-mamadex-restoration-evidence rules win on tie specificity against mamadex.css's shared .page-mamadex rules (same technique every other MamaDEX page CSS file already uses — see mamadex-proof-routes.css §1-2). This page keeps BOTH "page-mamadex" and "page-mamadex-restoration-evidence" classes on — the first is required so language-switcher.js's getPageNamespace() (picks the FIRST body class starting with "page-") keeps resolving to the shared flat /i18n/mamadex/{locale}.json bundle this page has always used; the second is this file's own CSS scope, purely for styling. Reuses existing mamadex.css/global.css components wherever possible (.sdx-card-section, .sdx-cta-band, .sdx-btn-primary/-secondary, hero system, page-token set). Page-owned rules provide the four-step evidence story, protected-information callout, responsibility handoff, community routes, and optional Mama context card. No global CSS is changed. Type: CSS License: © Buktika, 2026. All rights reserved. Colour Map: v3.9.0 Design System: v4.0.0 ChangeLog: v2.0.1 (2026-07-17): HERO RESTRAINT — removed the now-unused hero CTA layout after the button was removed from the page. v2.0.0 (2026-07-17): NARRATIVE REDESIGN — replaced the equal route cards, pill-like evidence chain, and separate consent chapter with one readable four-step story, an embedded privacy boundary, and a distinct downstream-responsibility handoff. Reduced visual repetition, removed false button affordances, shortened the community route controls, and added one centred hero deep-link. Context bridge and destination-pillar colours remain intact. v1.4.1 (2026-07-17): CONSENT SECTION WIDTH — removed the section-local 56rem maximum so the final consent/safeguarding card now uses the same container width as the preceding page sections. v1.4.0 (2026-07-17): CTA ALIGNMENT + DESTINATION COLOURS — centred the route-card and optional Mama-context action buttons within their containers. Strengthened the five Follow the community destination selectors across default, :link, and :visited states so the shared global button rule cannot flatten them all back to MamaDEX violet. No generic button styles changed. v1.3.0 (2026-07-14): CONTEXT BRIDGE CARD ADDED — owner instruction (BKT-35120 context-loss repair pass, companion to mamadex- restoration-evidence.html v2.6.0 and the new assets/js/mamadex/ mamadex-restoration-evidence.js). New §8 below styles the #mama-context-bridge section (hidden by default, shown by JS only when a valid ?mama= resolves) — a restrained card, not a second hero: small portrait (when one resolves), name/heading, one short explanatory paragraph, a plain definition-list of centre/location/Eco-Guild meta rows (each independently hidden until its own value resolves), and a row of plain-text action links. Reuses .sdx-card-section/.eyebrow/.sdx-btn-secondary as-is; only the card's own internal layout (portrait + body flex split, meta row spacing, action-link row) is new, at the same border- left-accent/--card/--card-shadow language §2's .path-card already established, so this reads as the same page family rather than a one-off construction. v1.2.0 (2026-07-13): LIVING TOWER TYPOGRAPHY NORMALISATION — owner instruction (narrow visual normalisation pass, comparator: /living-tower/living-tower.html). This page's own .restoration-evidence-section .eyebrow rule and the .restoration-evidence-section h2 margin-bottom:1.5rem rule are BOTH REMOVED — both are now redundant. The exact Living Tower-computed eyebrow typography (font-size:1.1rem, weight:600, letter-spacing:0.15em, uppercase, margin-block- end:2rem) plus this page's own reading-start alignment and dark-violet colour, and the matching h2 font-size/margin, are now set once in the shared mamadex.css §1b rule — see that file's own changelog (v5.12.0). No other rule in this file changed; the underline colour (inherited var(--page-primary), confirmed correct in v1.1.0 below) is untouched. v1.1.0 (2026-07-13): SECTION-HEADING LOCKUP + PER-PILLAR CTA COLOUR — owner instruction, extending the mamadex-join.css section- heading lockup and per-pillar button-colour corrections to this page. Two changes, §6 and §4: - §6 (.restoration-evidence-section .eyebrow): text-align changed from center to logical start, width:100% added, and colour changed from the inherited var(--page-primary) (light violet) to var(--page-secondary) (dark MamaDEX violet) — same treatment locked for mamadex-join.html's own eyebrow. Only §2 "Real community work. Evidence you can examine." (the only section on this page carrying an .eyebrow element) is affected. h2 gained margin-bottom:1.5rem (was 0, canonical) to open the rule->intro gap the owner flagged as too tight — matching mamadex-join.css's identical fix. h2 text-align, font, and colour (still var(--fg)) are untouched — the global.css HARD RULE only names those three; margin-bottom is not among them. UNDERLINE: audited and left unchanged — this file has never overridden border-bottom-color on any h2/ .section-title, so it already inherits global.css's canonical border-bottom:2px solid var(--page-primary) (light violet), the exact same token/value mamadex.html's own "What brings you to MamaDEX?" heading resolves through. No amber was ever present here; no fix was needed or made to the underline. - §4 (.community-links, "Follow the community" — Meet the Mamas/Find a MamaDEX Centre/Eco Guild/EduTower/Reporters): all five links previously carried the plain .sdx-btn- secondary class, rendering identically (this page's own --page-primary outline) regardless of destination pillar — owner screenshot showed this as visually "mono colour" with no differentiation. Base class swapped to .sdx-btn-primary (filled, white text) with one new modifier class per destination overriding only `background`, each read directly from that destination page's own --page-primary/-secondary/ -accent token declarations (eco-guilds.css, edutower.css, reporters.css — not approximated, not copied from contact. css's own similar-but-not-identical per-pillar gradients on contact.html, which use --sdx-color-teal-deep for EduTower and --sdx-color-coral for Reporters — neither is that page's own --page-primary/-accent token; this file uses each destination's actual bound token instead). Full per-button rationale in the CSS block's own comment, §4. No colour invented; every value traced to an existing page's own already-declared --page-primary/-secondary/-accent. No wording, image, section order, route, or i18n key changed. mamadex.css, global.css, and the four destination pages' own CSS/HTML are all untouched — this file only reads their already-declared tokens. v1.0.0 (2026-07-12): NEW FILE — owner instruction (BKT-35120 Pass B, Door 1 full build). Created because the v1.1.0 routing-shell version of this page used zero page CSS (relied entirely on mamadex.css's shared .page-mamadex rules); the full build needs its own hero-image override (locked bread/records photo, different from mamadex.html's own doorway-Mama hero image) plus two small new components not present anywhere else on the site in exactly this shape. ====================================================================================================== */ /* ====================================================================================================== 1) Page variable override — locked hero image only. Every other .page-mamadex token (colours, --page-bg/-primary/-secondary/-accent/-depth) is inherited unchanged from mamadex.css's .page-mamadex block; not redeclared here. ====================================================================================================== */ .page-mamadex-restoration-evidence { /* Locked hero image — owner instruction: "the approved Mamas baking bread image." Same real MamaDEX centre photo mamadex-proof-routes.html's v2.1.0 hero used before that page was moved to an owner-specified alternate image at v2.2.0 (see that file's own changelog) — two Mamas baking bread at a centre kitchen table, with a handwritten record/ledger book and a phone visible on the counter beside the loaves. Do not alter or regenerate this image file (owner instruction). */ --hero-image: url("/assets/images/mamadex/mamadex-the-centre-already-knows.webp"); --hero-vignette-from: rgba(139, 92, 246, 0.20); /* mama-violet, bottom only, max 0.25 — same value mamadex.css uses */ --hero-vignette-to: rgba(139, 92, 246, 0); } /* Crop: faces + bread stay in frame at "center 35%" — the last confirmed-good crop for this exact image, previously used at 480px card height (mamadex.css §8 archive, v4.9.5 changelog). Re-checked here for the taller hero box (var(--hero-min), 1000px desktop default) — same vertical bias keeps both women's faces and most of the loaves on-frame without cutting into the record book/phone corner more than mamadex.css's own hero crop already accepts as a trade-off. */ .page-mamadex-restoration-evidence .hero-wrap { background-position: center 35%; } @media (max-width: 640px) { .page-mamadex-restoration-evidence .hero-wrap { background-position: 62% 32%; } } /* ====================================================================================================== 2) Evidence story — a vertical sequence modelled on Living Tower's readable flow. The numbered nodes express order without looking clickable; the privacy boundary is nested inside the same common region because it qualifies the evidence story. ====================================================================================================== */ .restoration-evidence-section > .intro { max-width: 65ch; margin: 0 auto 2.5rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.7; text-align: center; } .evidence-story-steps { max-width: 52rem; margin: 0 auto; } .evidence-story-step { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 0 0 1.75rem; text-align: left; } .evidence-story-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 3rem; inset-block-end: 0; inset-inline-start: calc(1.5rem - 1px); width: 2px; background: color-mix(in srgb, var(--page-primary) 32%, var(--border)); } .evidence-story-number { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-secondary) 100%); color: #ffffff; font-weight: 700; box-shadow: 0 3px 12px color-mix(in srgb, var(--page-primary) 28%, transparent); } .evidence-story-step h3 { margin: 0 0 0.35rem; font-family: var(--headline-font); font-size: 1.25rem; color: var(--fg); } .evidence-story-step p { margin: 0; color: var(--muted); font-size: var(--body); line-height: 1.65; } .evidence-boundary-note { max-width: 52rem; margin: 0.5rem auto 0; padding: 1.25rem 1.5rem; background: rgba(120, 113, 108, 0.08); border: 1px solid rgba(120, 113, 108, 0.18); border-left: 4px solid var(--page-primary); border-radius: 0 var(--radius) var(--radius) 0; text-align: left; } .evidence-boundary-note h3 { margin: 0 0 0.4rem; font-family: var(--text-font); font-size: 1.125rem; color: var(--fg); } .evidence-boundary-note p { margin: 0; color: var(--muted); font-size: var(--body); line-height: 1.6; } /* ====================================================================================================== 3) Responsibility handoff — a compact, non-interactive track. Rectangular stages distinguish information from buttons; neutral downstream stages distinguish assessment from MamaDEX's evidence-assembly role. ====================================================================================================== */ .handoff-prelude, .handoff-boundary { max-width: 52rem; margin-inline: auto; color: var(--muted); font-size: var(--body); line-height: 1.65; text-align: center; } .handoff-prelude { margin-block: 0 1.25rem; } .handoff-track { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.75rem; max-width: 52rem; margin: 0 auto 1.5rem; } .handoff-stage { display: flex; align-items: center; justify-content: center; min-height: 5rem; padding: 1rem; background: rgba(120, 113, 108, 0.08); border: 1px solid rgba(120, 113, 108, 0.28); border-radius: 0.5rem; color: var(--fg); font-weight: 700; line-height: 1.35; text-align: center; } .handoff-stage.is-mamadex { background: rgba(139, 92, 246, 0.10); border-color: rgba(139, 92, 246, 0.38); } .handoff-arrow { color: var(--page-primary); font-size: 1.25rem; font-weight: 700; } .handoff-boundary { margin-block: 0; padding-top: 1.25rem; border-top: 1px solid var(--border); } /* ====================================================================================================== 4) Community routes — compact, destination-coloured links. These are related exits, not the page's primary action, so their geometry is deliberately quieter. ====================================================================================================== */ .community-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; } .page-mamadex-restoration-evidence .community-link { min-height: 2.75rem; padding: 0.625rem 1.125rem; font-size: 0.9375rem; } /* Per-pillar CTA colour — v1.1.0, owner instruction. These five links leave the MamaDEX page for four different destinations; a single mono violet (the old .sdx-btn-secondary treatment, all five outlined in this page's own --page-primary) read as one undifferentiated colour regardless of where each button actually goes. Base class swapped to .sdx-btn-primary (filled, white text, standalone hover-lift already correct per global.css — see global.css §"CANONICAL BUTTONS", "a button outside a card MAY lift") with one modifier class per destination overriding only `background`, to each destination PAGE'S OWN --page-primary/--page- secondary/--page-accent token pair — read directly from that page's own CSS file, not approximated: - .community-link-mamas (Meet the Mamas / Find a MamaDEX Centre — both stay inside the MamaDEX family): var(--page-primary)/var(--page- secondary) used UN-namespaced, because this page IS a MamaDEX page — those tokens already equal mama-violet/mama-depth here, identical to mamadex.css's own .sdx-cta-band .sdx-btn-primary gradient. - .community-link-ecoguild: eco-guilds.css's own --page-primary/--page- depth (green-deep -> stem-olive; eco-guilds.css lines 56/59). - .community-link-edutower: EduTower's canonical CTA gradient (teal-deep -> stem-olive), matching edutower.css's own primary-button treatment rather than its quieter structural blue. - .community-link-reporters: reporters.css's own --page-primary/--page- accent (mama-amber -> reporters-orange; reporters.css lines 46/48) — --page-secondary is skipped because reporters.css binds it to the same amber as --page-primary ("BKT-DOC-01 §4 HARD RULE: universal amber, no exceptions", reporters.css line 47), so --page-accent is the only token that actually distinguishes Reporters' own gradient. No change to mamadex.css, global.css, or any of the four destination pages' own CSS — this file only reads their already-declared tokens. */ .page-mamadex-restoration-evidence .community-link-mamas, .page-mamadex-restoration-evidence .community-link-mamas:link, .page-mamadex-restoration-evidence .community-link-mamas:visited { background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-secondary) 100%); } .page-mamadex-restoration-evidence .community-link-ecoguild, .page-mamadex-restoration-evidence .community-link-ecoguild:link, .page-mamadex-restoration-evidence .community-link-ecoguild:visited { background: linear-gradient(135deg, var(--sdx-color-green-deep) 0%, var(--sdx-color-stem-olive) 100%); } .page-mamadex-restoration-evidence .community-link-edutower, .page-mamadex-restoration-evidence .community-link-edutower:link, .page-mamadex-restoration-evidence .community-link-edutower:visited { background: linear-gradient(145deg, var(--sdx-color-teal-deep) 0%, var(--sdx-color-stem-olive) 100%); } .page-mamadex-restoration-evidence .community-link-reporters, .page-mamadex-restoration-evidence .community-link-reporters:link, .page-mamadex-restoration-evidence .community-link-reporters:visited { background: linear-gradient(145deg, var(--sdx-color-mama-amber) 0%, var(--sdx-color-reporters-orange) 100%); } @media (max-width: 700px) { .handoff-track { grid-template-columns: 1fr; } .handoff-stage { min-height: 0; } .handoff-arrow { transform: rotate(90deg); justify-self: center; } } /* ====================================================================================================== 7) Context bridge card (new in v2.6.0 of the HTML) — restrained identity card, not a hero. Portrait (optional) + body column; body holds the eyebrow, the "You came here from X's profile" heading, one explanatory paragraph, a definition list of meta rows (centre/location/Eco Guild — each independently hidden by the controller JS until its own value resolves), and a plain action-link row. Card shell matches §2's .path-card language (var(--card) surface, 4px left accent, var(--card-shadow)) so it reads as this same page family, not an invented new component. ====================================================================================================== */ .restoration-evidence-context-bridge { padding-top: 0; } .context-bridge-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem; max-width: 900px; margin: 0 auto; padding: 1.75rem; background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--page-secondary); border-radius: var(--radius); box-shadow: var(--card-shadow); text-align: left; } .context-bridge-portrait { width: 88px; height: 88px; border-radius: 999px; object-fit: cover; flex-shrink: 0; } .context-bridge-body { flex: 1 1 320px; min-width: 0; } .context-bridge-body .eyebrow { display: block; } .context-bridge-body h2 { margin: 0 0 0.5rem; font-family: var(--headline-font); font-size: 1.375rem; font-weight: 700; color: var(--fg); } .context-bridge-body > p { margin: 0 0 1rem; font-size: var(--body); line-height: 1.6; color: var(--muted); max-width: 60ch; } .context-bridge-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0 0 1.25rem; } .context-bridge-meta-row { margin: 0; min-width: 10rem; } .context-bridge-meta-row dt { font-size: var(--small); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--page-primary); } .context-bridge-meta-row dd { margin: 0.15rem 0 0; font-size: var(--body); color: var(--fg); } .context-bridge-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .context-bridge-actions .sdx-btn-secondary { font-size: var(--small); } @media (max-width: 480px) { .context-bridge-card { padding: 1.25rem; } .context-bridge-portrait { width: 64px; height: 64px; } } /* Note: .context-bridge-card above uses only var(--card)/var(--border)/ var(--muted)/var(--fg)/var(--page-primary)/var(--page-secondary) — no fixed rgba() — so it already resolves correctly in dark mode via global.css/themes.css/mamadex.css and needs no explicit override below. */ /* ====================================================================================================== 6) Dark theme — only the values above that use fixed rgba() rather than existing tokens need an explicit override; var(--card)/var(--border)/var(--muted)/var(--fg) already resolve correctly in dark mode via global.css/themes.css. ====================================================================================================== */ [data-theme="dark"] .evidence-boundary-note, [data-theme="dark"] .handoff-stage { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.18); } [data-theme="dark"] .handoff-stage.is-mamadex { background: rgba(139, 92, 246, 0.18); border-color: rgba(139, 92, 246, 0.45); }