/* ====================================================================================================== File: mamadex-learning.css Path: assets/css/mamadex/mamadex-learning.css Author: Buktika Webdesk (Binka) Owner: Buktika — Binka Purpose: Page-scoped styles for mamadex-learning.html (MamaDEX Door 4 — "I want to learn"). Loaded AFTER mamadex.css so this file's .page-mamadex-learning rules win on tie specificity against mamadex.css's shared .page-mamadex rules (same technique every other MamaDEX page CSS file uses — see mamadex-join.css §1). This page keeps BOTH "page-mamadex" and "page-mamadex-learning" 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; 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, .eyebrow, .section-title, .intro, hero system) — only page-scoped additions below for the things this page needs that no existing component covers: the hero-image override (geometry copied verbatim from mamadex-opportunity.css — same locked asset, no new hero layout), the four-card "many kinds of learning" grid, the numbered learning-route list, the quiet note callout, and the centred secondary-link wrapper for "Understand EduTower". Type: CSS License: © Buktika, 2026. All rights reserved. Colour Map: v3.9.0 Design System: v4.0.0 ChangeLog: v1.2.0 (2026-07-13): NARROW OWNER CORRECTION — TYPOGRAPHY SCALE + EDUTOWER BRIDGE BUTTON — explicit owner instruction, withdrawing the v1.1.0 changelog's "no page-level heading/body override needed" finding for this one, specific, owner-authorised exception: the inherited global.css section-title/body scale is too large for this calm learner page, and .sdx-btn- secondary's plain single-colour outline cannot express a cross-pillar (MamaDEX -> EduTower) bridge. Added §7 (scoped font-size/line-height reduction on .sdx-card-section > h2, .sdx-cta-band-inner h2, and body p/li/.section-intro — eyebrow size, eyebrow-to-title gap, and the violet underline are NOT touched) and §8 (.learning-edutower-bridge modifier: violet- to-teal gradient, white text, hover/focus states — .sdx-btn- secondary itself still supplies geometry only). No !important used anywhere. global.css untouched — both additions are page-scoped under .page-mamadex-learning. v1.1.0 (2026-07-13): CORRECTION PASS — owner instruction (visual-system audit following screenshot review). Full re-read of this file against six named complaints (hero readability, section- heading scale, body typography, button hierarchy, CTA disclaimer-first meaning, Door 4 wording) found NO page-level override in this file for .headline/.hero .intro text-shadow, .eyebrow, .section-title/.sdx-card-section > h2/.section-intro, body-paragraph font-size, or .sdx-btn-primary/.sdx-btn- secondary — this file has never added or touched any of those rules (grepped in full, confirmed absent both before and after this pass); they were already resolving through global.css/ mamadex.css's canonical, unmodified values. §6 (new) adds the one real, specified change: a small muted boundary line inside the closing CTA band (.learning-cta-boundary), using a two-class selector so it reliably overrides global.css's own .sdx-cta-band-inner p rule rather than relying on load-order tie-breaking. No headless browser or connected Chrome extension was available in this environment (list_connected_ browsers returned empty) to capture screenshots or read getComputedStyle() values directly — verification below is by cascade tracing against the actual global.css/mamadex.css source, not a rendered screenshot; flagged for a follow-up visual confirmation pass once a browser is connected. v1.0.0 (2026-07-13): NEW FILE — owner instruction (MamaDEX Door 4 learner-route build). Hero-image binding and geometry (§1-1b) copied byte-for-byte from mamadex-opportunity.css v1.2.0 — same locked asset (/assets/images/mamadex/mamadex-opportunity- hero.webp), same background-position values (38% 40% / 37% 40%), same .hero-body left-column placement above/below 1024px — "do not change the hero geometry or invent a new hero layout" is satisfied by reuse, not by re-derivation. §2 (four-card grid), §3 (numbered steps), §4 (note callout) and §5 (secondary-link wrapper) are new components this page needs and no existing shared class covers. No per-page eyebrow override added — .page-mamadex .eyebrow (mamadex.css) already supplies the correct start-aligned, dark-violet treatment. No second page-level background system, no inline colour or layout styles, global.css untouched. ====================================================================================================== */ /* ====================================================================================================== 1) Page variable override — locked hero image only, reused unmodified from mamadex-opportunity.html/css (same approved Door 4 asset). 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-learning { /* Locked hero image — same asset mamadex-opportunity.html uses (Kenya; the approved EduTower Studio design — curved photovoltaic roof, MamaDEX branding, Buktika branding, "EduTower Studio" lettering, established Studio architectural form). Approved exactly as supplied — do not generate, redraw, edit, retouch, crop, replace, or recompress this file. Do not remove its branding. */ --hero-image: url("/assets/images/mamadex/mamadex-opportunity-hero.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); } /* ====================================================================================================== 1b) Hero copy placement — copied verbatim from mamadex-opportunity.css v1.1.0/v1.2.0. LOCKED VISUAL RULE: hero text occupies the left-hand field (may sit over the quieter branding/background area); the trainee, mentor, camera and audio activity stay unobstructed on the right. Same values, same technique — no new hero layout invented. ====================================================================================================== */ @media (min-width: 1024px) { .page-mamadex-learning .hero-body { position: absolute; left: 5%; top: 50%; transform: translateY(-50%); width: min(30rem, 38vw); max-width: 30rem; margin: 0; text-align: left; } } @media (max-width: 1023px) { .page-mamadex-learning .hero { align-items: end; } .page-mamadex-learning .hero-body { position: static; justify-self: start; text-align: left; max-width: min(42%, 18rem); margin: 0; padding-bottom: 0.5rem; } } /* Crop position — same values as mamadex-opportunity.css v1.1.0 (same image, same text-placement mechanics). */ .page-mamadex-learning .hero-wrap { background-position: 38% 40%; } @media (max-width: 1023px) { .page-mamadex-learning .hero-wrap { background-position: 37% 40%; } } /* ====================================================================================================== 2) "Many kinds of learning" — four-card grid. Image + always-visible title/body (no disclosure, no lightbox — these are supporting images only, and the cards must remain readable without them). 2x2 at desktop, single column on mobile. Media uses the same aspect-ratio:3/2 + overflow:hidden + object-fit:cover convention already established for .capability-card-media/.door-card-media elsewhere on this page family (mamadex.css), redeclared page-locally since this is a new component, not a reuse of those exact classes. ====================================================================================================== */ .learning-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2rem; } @media (min-width: 768px) { .learning-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } .learning-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .learning-card-media { aspect-ratio: 3 / 2; overflow: hidden; background: rgba(120, 113, 108, 0.08); } .learning-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; } .learning-card-body { padding: 1.25rem 1.5rem 1.5rem; } .learning-card-body h3 { font-family: var(--headline-font); font-size: 1.1875rem; font-weight: 700; color: var(--fg); margin: 0 0 0.5rem; } .learning-card-body p { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); margin: 0; } /* Cards must remain readable without their images — a card whose image never loads (asset not yet supplied, or a slow/offline connection) still shows a full-height coloured media placeholder above complete title/body text; nothing is cropped, hidden, or dependent on the image painting. */ /* ====================================================================================================== 3) Numbered learning-route steps (§4 "How the route works"). Native decimal numbering, same "process reads as this-happens-then-this" rationale already used for mamadex-join.css's .join-list--steps — redeclared here as its own small component since this page does not load mamadex-join.css. ====================================================================================================== */ .learning-steps { list-style: decimal; max-width: 42rem; margin: 2rem auto 0; padding-left: 1.5rem; text-align: left; } .learning-steps li { margin-bottom: 1.25rem; padding-left: 0.35rem; } .learning-steps li:last-child { margin-bottom: 0; } .learning-step-label { display: block; font-weight: 700; color: var(--fg); margin-bottom: 0.25rem; } .learning-steps p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 0.9375rem; } /* ====================================================================================================== 4) Quiet note callout — the "not a complete programme list" note beneath the four-card grid. Same base treatment as mamadex-join.css's .mamadex-join-note (neutral surface, not a warning colour), redeclared page-locally since this page does not load mamadex-join.css. ====================================================================================================== */ .learning-note { margin: 1.5rem auto 0; max-width: 56rem; padding: 1rem 1.25rem; background: rgba(120, 113, 108, 0.08); border: 1px solid rgba(120, 113, 108, 0.18); border-radius: var(--radius); text-align: center; color: var(--muted); font-size: var(--body); line-height: 1.6; } [data-theme="dark"] .learning-note { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); } /* ====================================================================================================== 5) Secondary link wrapper — "Understand EduTower" (§7). Centred, restrained, .sdx-btn-secondary (canonical ghost/outline button, global.css) so it visibly does not compete with the page's one primary CTA in the closing .sdx-cta-band. ====================================================================================================== */ .learning-secondary-link { text-align: center; margin-top: 1.5rem; } /* ====================================================================================================== 6) Final-CTA boundary line — v1.1.0. Small, muted, separate from the main learner-invitation paragraph above it, so the page's last message is the invitation, not the disclaimer. Sits inside the canonical .sdx-cta-band (unmodified) — only this one line gets a smaller, muted treatment; the band's own heading/body/button typography is completely untouched (still resolves through global.css's canonical .sdx-cta-band- inner h2/p/.sdx-btn-primary rules). ====================================================================================================== */ /* Two-class selector (.sdx-cta-band-inner .learning-cta-boundary) — specificity (0,2,0) — is required to win over global.css's own .sdx-cta-band-inner p rule (0,1,1: one class + one element), which would otherwise keep supplying its 1.0625rem/1.7/2rem-margin values ahead of a bare single-class selector. */ .sdx-cta-band-inner .learning-cta-boundary { font-size: var(--small); line-height: 1.6; color: var(--muted); margin-top: -0.75rem; margin-bottom: 2rem; } /* ====================================================================================================== 7) Owner-authorised typography scale reduction — v1.2.0. Explicit, page-scoped exception to the global.css "page CSS MUST NOT override .section-title" rule, authorised by the owner for this page only: Door 4 is a calm learner route, not a pillar-scale page, and the inherited global section-title/body scale read too large here. Eyebrow size, eyebrow-to-title gap, and the violet underline are NOT touched by this section — only font-size/line-height on the heading and body text. ====================================================================================================== */ .page-mamadex-learning main .sdx-card-section > h2 { font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.2; } .page-mamadex-learning .sdx-cta-band-inner h2 { font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.2; } .page-mamadex-learning main .sdx-card-section p, .page-mamadex-learning main .sdx-card-section li, .page-mamadex-learning main .sdx-card-section .section-intro { font-size: 1rem; line-height: 1.65; } .page-mamadex-learning .sdx-cta-band-inner > p { font-size: 1rem; line-height: 1.65; } @media (max-width: 680px) { .page-mamadex-learning main .sdx-card-section > h2, .page-mamadex-learning .sdx-cta-band-inner h2 { font-size: 1.5rem; } } /* ====================================================================================================== 8) EduTower cross-pillar bridge button — v1.2.0. .sdx-btn-secondary (global.css) supplies geometry only (padding, radius, border-width, focus outline shape); this modifier owns the colour treatment so the button visibly carries both MamaDEX violet and EduTower teal, rather than a single-colour outline. Scoped to .learning-edutower-bridge only — no other .sdx-btn-secondary usage anywhere else is affected. ====================================================================================================== */ .page-mamadex-learning .learning-edutower-bridge, .page-mamadex-learning .learning-edutower-bridge:link, .page-mamadex-learning .learning-edutower-bridge:visited { background: linear-gradient( 145deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-teal-deep) 100% ); color: #ffffff; border: 0; box-shadow: 0 4px 14px color-mix( in srgb, var(--sdx-color-mama-violet) 25%, transparent ); } .page-mamadex-learning .learning-edutower-bridge:hover, .page-mamadex-learning .learning-edutower-bridge:focus-visible { color: #ffffff; filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 7px 20px color-mix( in srgb, var(--sdx-color-teal-deep) 30%, transparent ); } .page-mamadex-learning .learning-edutower-bridge:focus-visible { outline: 3px solid var(--sdx-color-mama-cyan); outline-offset: 3px; }