/* * V7-HEADER * Title: MamaDEX Evidence-Source Map — Page Styles (PROTOTYPE) * Filename: mamadex-locations.css * Path: /assets/css/mamadex/mamadex-locations.css * Version: v0.8.1-prototype * Issued: 2026-07-15 * Author: Buktika Webdesk (Binka) * Purpose: Styles for the MamaDEX evidence-source map page. * Status: v0.8.0 — SHARED POPUP VISUAL-CONTRACT REPAIR SECTION A, LIVE-BROWSER VERIFICATION * FIX. The file's own opening V7-HEADER comment used to describe some removed * classes as a slash-joined list ending each wildcard name with a trailing slash * right after its asterisk (old changelog prose, no longer present below) — that * exact two-character punctuation pair, asterisk immediately followed by slash, is * the CSS block-comment END token, and CSS comments have no escape syntax for it. * The browser therefore closed the file's very first comment right there, many * lines before this comment's real end, instead of where the author intended — * everything after that point, for the REST OF THE FILE, was exposed to the parser * as malformed top-level text instead of comment content, which silently zeroed out * EVERY rule in this stylesheet (confirmed live: the parsed stylesheet's rule count * was 0, despite a correct text/css Content-Type and a 200 response for the file). * That included the #mdl-map-container height rule this page's own map depends on — * with it silently gone, #mdl-map's rendered height stayed 0, and * mamadex-locations.js's bootWhenReady() correctly polled, correctly saw the map * element's height stuck at 0 for its full retry budget, and correctly gave up * (its own console warning showed every OTHER dependency — the map element, the * MapLibre library, the pins module — genuinely ready; only this page's own layout * was silently unstyled). Found via the section H live-browser visual acceptance * pass, not from reading the source alone — a plain text read of this file looks * completely valid. Fixed by rewording the offending prose so the file contains no * instance of that two-character punctuation pair outside a rule's own syntax; zero * style/behaviour change otherwise. NOTE FOR FUTURE EDITS TO THIS FILE: never write * a wildcard class name immediately followed by a slash inside a comment. * Status: v0.7.0 — BUILD THE SHARED RELATIONSHIP POPUP ENGINE (owner instruction, * 2026-07-15). REMOVED the entire "Mama selection pane" section below (all * .mdl-card, .mdl-mama- (wildcard), .mdl-centre (wildcard) and .mdl-cta * (wildcard) rules) — mamadex-locations.html * v0.9.0-prototype no longer has that DOM at all; the selected-Mama popup now * renders through the shared assets/css/partials/relationship-popup.css (the * same stylesheet Eco Guilds and Viridians use). .mdl-map-row is kept as a * simple single-child layout (the map alone; there is no sibling card element to * lay out beside it any more). Map/pin/hero/help-control styles below are * otherwise byte-for-byte unchanged from v0.6.0. * v0.6.0 — REDESIGN THE MAMA SELECTION PANE (owner instruction, * "Human-first card"). Scope: the .mdl-card selected-Mama pane * ONLY — the hero, #mdl-map-container, .mama-map-pin (all * states), the Tippy sentraledex tooltip rules, and * .maplibregl-ctrl-help are ALL UNCHANGED below. REPLACED the * card's visual identity: the former thick amber top border is * gone (amber is now action/accent-only, e.g. the .is-context pin * ring, unaffected by this pass); the card now uses the canonical * surface tokens (var(--card)/var(--border)/var(--card-shadow)) * with a narrow MamaDEX-violet top accent. RENAMED/REBUILT the * card-content classes to match the new HTML structure * (mamadex-locations.html v0.8.0-prototype): .mdl-card__portrait * (small square) -> .mdl-mama-portrait (full-width 4:3, the * primary visual subject); .mdl-card__kicker/.mdl-card__title (a * bare stacked kicker fragment above the name — the "broken * top-left label" defect) -> .mdl-mama-eyebrow +.mdl-mama-name + * .mdl-mama-location (one restrained eyebrow, the full name once, * then location); .mdl-story (heavy tinted box) -> .mdl-mama-quote * (a plain left-rule quote, no fill); .mdl-centre/.mdl-centre- * missing now share one quieter .mdl-centre-state wrapper — the * missing-centre copy is a calm status row, not a dashed warning * panel, and no longer implies rejection/inactivity. Desktop card * width increased 22rem -> 380px (owner-specified 360-420px * range) so the portrait/name are not compressed. CTA hierarchy * swapped: "View full profile" is now .mdl-cta--primary (uses the * canonical .sdx-btn-primary treatment, added in the HTML), "View * Evidence Packs from this Centre" is now .mdl-cta--secondary * (.sdx-btn-secondary); .mdl-cta--tertiary restyled as a * low-emphasis text link, not a bordered button. Added a 44x44px * close-button hit target in its own top bar (never overlapping * the portrait) with a visible focus ring. * v0.5.0 — CORRECT THE EVIDENCE-SOURCE MAP (owner instruction, * "Reuse the Mama map model"; see mamadex-locations.js v0.7.0- * prototype for the full rationale). The map's pins are now * active-roster MAMA pins (.mama-map-pin — same class name/visual * design already accepted on mamadex-mamas-map.css, duplicated * here rather than imported so mamadex-mamas.css is never touched) * instead of centre pins (.mdl-marker, REMOVED). The centre card * is now a MAMA-led card: portrait, kicker, title, short public * story context, a canonical-centre block OR an honest "not yet * available" state, and CTAs — REPLACING the four-block ECO * GUILD/MAMADEX/REPORTERS/EDUTOWER card (.mdl-blocks/.mdl-block*, * REMOVED) and the linked-Mamas list line (.mdl-card__mamas*, * REMOVED — that line belonged to the rejected centre-first * model). REMOVED: .mdl-country-label/.mdl-country-note (the * "Selected country: South Africa" line — that copy now lives in * the "?" help panel, not permanently above the map) and * .mdl-route-badge (the "mdx · evidence-pack" pill — also removed * from the page entirely per owner instruction: "the verbose * routing text and route badge are absent"). ADDED: Tippy * `sentraledex`-theme card content rules (.mama-map-card-link * etc.) — duplicated from mamadex-mamas-map.css since Tippy * renders at document.body root (unscoped, page-CSS-independent) * and this page does not load that partial's stylesheet. ADDED: * "?" help control styles (.maplibregl-ctrl-help), matching the * accepted map's own control exactly. * v0.4.2/v0.4.1/v0.4.0/v0.3.0/v0.2.0 — prior prototype passes, * superseded by the above; see git history / prior changelog * entries for that detail if needed. * License: © Buktika, 2026. All rights reserved. */ .page-mamadex-locations { --page-bg: var(--sdx-color-mama-bg); --page-primary: var(--sdx-color-mama-violet); --page-secondary: var(--sdx-color-mama-depth); --page-accent: var(--sdx-color-mama-amber); background: var(--page-bg); color: var(--fg); } /* ====================================================================================================== Hero — duplicated from mamadex-mamas.css §3 / mamadex-mamas-map.css, scoped to this page only. ====================================================================================================== */ .page-mamadex-locations #mdl-map-section { min-height: 760px; } .page-mamadex-locations .hero-mdl-map { position: relative; width: 100%; max-width: none; min-height: 760px; height: auto; margin: 0; padding: 2.5rem 0; text-align: center; display: flex; align-items: center; justify-content: center; background: radial-gradient( circle at 50% 25%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 44%, rgba(0, 0, 0, 0) 60% ), linear-gradient( 135deg, var(--sdx-color-teal-deep) 0%, var(--sdx-color-green-soft) 42%, #234038 100% ); color: #ffffff; font-family: var(--text-font); } .page-mamadex-locations .hero-mdl-map::before { content: ''; position: absolute; inset: 0; background-image: url('/assets/images/mamadex/mamadex-logo.webp'); background-size: 100px 100px; background-repeat: repeat; background-position: center; opacity: 0.06; pointer-events: none; z-index: 0; } .page-mamadex-locations .hero-mdl-map::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 70% 100% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.28) 100%); } .page-mamadex-locations .hero-mdl-map .hero-inner { position: relative; z-index: 1; width: 100%; max-width: 78rem; padding: 0 1.25rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .page-mamadex-locations .hero-mdl-map .hero-title { margin: 0 auto 1.25rem; max-width: 55rem; text-align: center; } .page-mamadex-locations .hero-mdl-map .headline { margin: 0 0 0.5rem; font-family: var(--headline-font); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; color: #ffffff; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.55); letter-spacing: -0.01em; } /* Restrained one-line instruction (v0.5.0) — replaces the former marketing tagline. Same treatment as before; copy itself is now task-directed ("Select a Mama to see her centre and available Human Restoration evidence.") rather than a generic strapline. */ .page-mamadex-locations .hero-mdl-map .tagline { margin: 0; font-size: clamp(0.9375rem, 1.5vw, 1.0625rem); line-height: 1.5; color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.40); } /* ====================================================================================================== Map + card row ====================================================================================================== */ .page-mamadex-locations .mdl-map-row { width: 100%; max-width: 78rem; margin: 0 auto; display: flex; align-items: flex-start; justify-content: center; gap: 1rem; } /* ====================================================================================================== Map container — duplicated from mamadex-mamas-map.css #map-container / #map. ====================================================================================================== */ .page-mamadex-locations #mdl-map-container { position: relative; flex: 1 1 auto; min-width: 0; width: min(100%, 62rem); height: 34rem; box-sizing: border-box; padding: 0.5rem; border-radius: 1rem; border: 1px solid rgba(148, 163, 184, 0.25); background: rgba(248, 248, 248, 0.945); overflow: hidden; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.55), 0 0 0 1px rgba(15, 23, 42, 0.18); } .page-mamadex-locations #mdl-map { width: 100%; height: 100%; border-radius: 0.75rem; overflow: hidden; } .page-mamadex-locations #mdl-map-container .maplibregl-ctrl-top-left, .page-mamadex-locations #mdl-map-container .maplibregl-ctrl-top-right { z-index: 100; } /* "?" help control — same MapLibre-control pattern as the accepted mamadex-mamas-map.css .maplibregl-ctrl-help, duplicated here (built in JS by mamadex-locations.js's own createHelpControl()). */ .page-mamadex-locations .maplibregl-ctrl-help { display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; font-size: 0.9375rem; font-weight: 700; color: var(--sdx-color-slate-dark); transition: background 0.15s ease, color 0.15s ease; padding: 0; line-height: 1; } .page-mamadex-locations .maplibregl-ctrl-help:hover { background: rgba(0, 0, 0, 0.05); color: var(--page-primary); } .page-mamadex-locations .maplibregl-ctrl-help.is-active { background: rgba(139, 92, 246, 0.12); color: var(--page-primary); } .page-mamadex-locations .maplibregl-ctrl-help:focus-visible { outline: 2px solid var(--page-primary); outline-offset: 1px; } [data-theme="dark"] .page-mamadex-locations .maplibregl-ctrl-help { color: var(--fg); } [data-theme="dark"] .page-mamadex-locations { background: var(--sdx-color-mama-dark-base); color: var(--fg); } /* ====================================================================================================== Mama pins (v0.5.0) — duplicated from mamadex-mamas-map.css .mama-map-pin, same class name/visual design as the accepted map (shared JS module assets/js/mamadex/partials/mamadex-mama-pins.js creates elements with this exact class). .mdl-marker (the former centre-pin class) is REMOVED. ====================================================================================================== */ .page-mamadex-locations .mama-map-pin { position: absolute; width: 48px; height: 48px; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; z-index: 5; } .page-mamadex-locations .mama-map-pin img { display: block; width: 48px; height: 48px; object-fit: contain; border-radius: 50%; background: #ffffff; padding: 4px; border: 3px solid #ffffff; box-shadow: 0 0 0 1px rgba(47, 92, 104, 0.15), 0 4px 12px rgba(15, 23, 42, 0.35); pointer-events: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .page-mamadex-locations .mama-map-pin:hover img { transform: scale(1.1); box-shadow: 0 0 0 1px rgba(47, 92, 104, 0.25), 0 6px 16px rgba(15, 23, 42, 0.45); } .page-mamadex-locations .mama-map-pin.featured img { border-color: var(--sdx-color-golden-joy); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.30), 0 0 20px rgba(251, 146, 60, 0.60), 0 4px 12px rgba(15, 23, 42, 0.35); } /* .is-context — pins canonically linked to a resolved ?centre_id= (may be several at once: "retain ALL of their individual pins"). Distinct from .is-active below (the single, currently OPEN card's pin). */ .page-mamadex-locations .mama-map-pin.is-context img { border-color: var(--sdx-color-mama-amber, #f5b014); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.24), 0 0 14px rgba(251, 146, 60, 0.40), 0 4px 12px rgba(15, 23, 42, 0.35); } /* .is-active — the pin whose card is currently open (single at a time). */ .page-mamadex-locations .mama-map-pin.is-active img, .page-mamadex-locations .mama-map-pin:focus-visible img { transform: scale(1.1); border-color: var(--sdx-color-mama-violet, #8b5cf6); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.35), 0 6px 16px rgba(15, 23, 42, 0.45); } /* Tippy tooltip card (sentraledex theme) — duplicated from mamadex-mamas-map.css since Tippy renders at document.body root and this page does not load that partial's stylesheet. Same markup/classes as the shared mamadex-mama-pins.js createTooltipContent(). */ .tippy-box[data-theme~='sentraledex'] .mama-map-card-link { display: flex; flex-direction: row; align-items: flex-start; gap: 0.75rem; text-decoration: none; color: inherit; } .tippy-box[data-theme~='sentraledex'] .card-copy { flex: 1 1 auto; min-width: 0; } .tippy-box[data-theme~='sentraledex'] .card-portrait { flex: 0 0 70px; width: 70px; height: 70px; border-radius: 0.625rem; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } .tippy-box[data-theme~='sentraledex'] .card-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; border: 2px solid var(--sdx-color-mama-amber); } .tippy-box[data-theme~='sentraledex'] .card-name { margin: 0 0 0.125rem; font-size: 1rem; font-weight: 700; color: var(--sdx-color-mama-bg); } .tippy-box[data-theme~='sentraledex'] .card-center { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: rgba(255, 255, 255, 0.80); } /* ── Empty state (map-only) ─────────────────────────────────────────────── */ .page-mamadex-locations .mdl-empty { position: absolute; inset: 0.5rem; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.6rem; padding: 2rem; text-align: center; border-radius: 0.75rem; color: rgba(34, 15, 39, 0.75); background: rgba(253, 246, 238, 0.96); } .page-mamadex-locations .mdl-empty[hidden] { display: none; } .page-mamadex-locations .mdl-empty__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(34, 15, 39, 0.5); } .page-mamadex-locations .mdl-empty__body { max-width: 30rem; font-size: 0.9rem; line-height: 1.5; } /* ── Hint line below the map — populated only once a Mama is selected ("Selected: "); empty/absent otherwise (no static "click a pin" instruction — that copy now lives in the "?" help panel). ──────────── */ .page-mamadex-locations .mdl-hint { margin: 0.85rem 0 0; text-align: center; font-size: 0.8125rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.62); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); min-height: 1em; } @media (max-width: 860px) { /* Mobile behaviour: the map fills the available width. The selected-Mama popup's own mobile behaviour (bottom-sheet, single-column relationship grid, etc.) is owned by the shared relationship-popup.css/SDXStage, not this page (v0.7.0-prototype). */ .page-mamadex-locations .mdl-map-row { flex-direction: column; align-items: stretch; } .page-mamadex-locations #mdl-map-container { width: 100%; height: 26rem; } } @media (max-width: 720px) { .page-mamadex-locations #mdl-map-section { min-height: 0; } .page-mamadex-locations .hero-mdl-map { min-height: 0; padding: 1.5rem 0; } .page-mamadex-locations .hero-mdl-map .hero-inner { padding-top: 0.85rem; } .page-mamadex-locations .hero-mdl-map .headline { font-size: 1.75rem; } } /* ====================================================================================================== Dark mode (v0.7.0). The selected-Mama popup's dark-mode behaviour is now entirely owned by the shared assets/css/partials/relationship-popup.css (theme-aware --card/--fg/--border/ --card-shadow tokens, same as this page used to consume directly) — no popup-specific dark overrides live in this file any more. The map/pins/hero/help-control rules above have no hardcoded light-only colours that need a dark-mode override either. ====================================================================================================== */