/* ======================================================================================================
* Version: v3.9.4
* Created: 2026-02-21 00h00 SAST
* Updated: 2026-07-17 00h00 SAST
* File: mamadex-mama-profile.css
* Path: assets/css/mamadex/mamadex-mama-profile.css
* Author: Buktika Webdesk (Binka)
* Purpose: Layout for the single dynamic Mama profile template: hero, portrait+bio grid,
* three-image gallery, short video thumb, evidence section, and CTA band.
* Type: CSS stylesheet
* License: © Buktika, 2026. All rights reserved.
* ISO Reference: ISO 27001, ISO 9241-110
* Source Naming Standard: Buktika v7.1 (ISO Aligned)
*
* ChangeLog:
* - v3.9.3 (2026-07-17): Kept legacy desktop lightbox captions on one line;
* narrow-screen captions continue to wrap normally.
* - v3.9.2 (2026-07-17): Reserved caption padding outside the maximum text
* width so expanded desktop pills do not wrap prematurely.
* - v3.9.1 (2026-07-17): Allowed legacy single-line lightbox captions to
* expand up to the safe viewport width instead of wrapping at the
* shared 640px reading measure.
* - v3.9.0 (2026-07-17): Standardised every profile image/video lightbox
* trigger on cursor:zoom-in and applied the full cross-browser
* button reset, including Firefox's -moz-appearance:none and
* defensive zero border/padding/margin backstops.
*/
/* ====================================================================================================== */
/* 0) depends on: global.css, themes.css, partials/header.css, partials/footer.css */
/* ======================================================================================================
1) Page variable binding
Colour Map v3.0.0 §5.4 — MamaDEX canonical token set.
====================================================================================================== */
.page-mamadex-mama-profile {
--page-bg: var(--sdx-color-mama-bg); /* #fdf6ee warm parchment */
--page-primary: var(--sdx-color-mama-violet); /* #8b5cf6 social upliftment signal */
--page-secondary: var(--sdx-color-mama-amber); /* #f5b014 tagline — DOC-01 §4 universal amber, no per-pillar exceptions */
--page-accent: var(--sdx-color-mama-amber); /* #f5b014 CTAs, badges */
--page-depth: var(--sdx-color-stem-olive); /* #464820 grounding — PIL-03 §2 */
--page-dark-base: var(--sdx-color-mama-dark-base); /* #150a18 night ceremony */
--page-dark-surface: var(--sdx-color-mama-dark-surface); /* #220f27 card face */
/* EXCEPTION: --hero-image is absent from this binding block by design.
The template contract (_page-template.css §1) normally requires a static --hero-image
URL. This page's hero is per-Mama photography loaded dynamically at runtime.
mamadex-mama-profile.js calls document.body.style.setProperty("--hero", url(...))
after probing the asset. global.css .hero-wrap consumes background-image: var(--hero).
A static --hero-image token cannot apply here. Documented exception. */
--hero-vignette-from: rgba(139, 92, 246, 0.20); /* mama-violet derived, max 0.25 */
--hero-vignette-to: rgba(139, 92, 246, 0);
background-color: var(--page-bg);
color: var(--fg);
}
[data-theme="dark"] .page-mamadex-mama-profile {
background-color: var(--page-dark-base);
color: var(--fg);
}
/* ======================================================================================================
2) Base page surfaces
====================================================================================================== */
.page-mamadex-mama-profile main {
padding-bottom: 3.5rem;
}
/* ======================================================================================================
3) Hero
Hero rules and orb geometry live in mamadex-mama-profile-hero.css.
====================================================================================================== */
/* none — see /assets/css/mamadex/mamadex-mama-profile-hero.css */
/* ======================================================================================================
4) Typography overrides
====================================================================================================== */
/* none */
/* ======================================================================================================
5) Sections — .sdx-card-section from global.css
====================================================================================================== */
/* none */
/* ======================================================================================================
6) Cards and tiles
====================================================================================================== */
/* Card accent — PIL-03 §6 AMENDED (owner 2026-03-05):
MamaDEX uses the global.css canonical border-left: 4px solid var(--page-accent).
border-left inherits from global.css — no override needed here. */
/* Portrait + bio: two-column grid matching reporters-reporter-profile.css pattern.
portrait-panel left, bio-panel right. No .card — portrait is a display surface. */
.page-mamadex-mama-profile .portrait-grid {
display: grid;
grid-template-columns: minmax(0, 22.5rem) minmax(0, 1fr);
gap: 2rem;
align-items: start;
}
@media (max-width: 960px) {
.page-mamadex-mama-profile .portrait-grid {
grid-template-columns: 1fr;
}
}
/* Portrait panel — image fills flush. overflow:hidden clips to border-radius.
Shadow on panel (not image) — overflow:hidden clips child shadows. */
.page-mamadex-mama-profile .portrait-panel {
padding: 0;
overflow: hidden;
border-radius: var(--radius);
background: var(--card);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
border: 1.5px solid var(--border);
}
.page-mamadex-mama-profile .portrait {
width: 100%;
display: block;
border-radius: 0; /* panel clips — no double rounding */
object-fit: cover;
}
/* Bio panel — plain surface, flex column */
.page-mamadex-mama-profile .bio-panel {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* Gallery grid: three-column, equal width. No .card — figures are display surfaces. */
.page-mamadex-mama-profile .gallery3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.125rem;
margin-top: 2rem;
}
@media (max-width: 768px) {
.page-mamadex-mama-profile .gallery3 {
grid-template-columns: 1fr;
}
}
/* v3.9.0: Shared reset for every actual lightbox trigger on the profile.
In particular, -moz-appearance:none prevents Firefox from restoring its
native button bevel around an otherwise borderless photograph. */
.page-mamadex-mama-profile .media-thumb {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0;
background: transparent;
box-shadow: none;
font: inherit;
line-height: 0;
cursor: zoom-in;
}
.page-mamadex-mama-profile .media-thumb img {
border: 0;
box-shadow: none;
cursor: inherit;
}
.page-mamadex-mama-profile .lightbox-caption:not(:has(.lightbox-caption-description)) {
width: max-content;
max-width: calc(min(90vw, 960px) - 2.5rem);
}
@media (min-width: 641px) {
.page-mamadex-mama-profile .lightbox-caption:not(:has(.lightbox-caption-description)) {
white-space: nowrap;
}
}
/* Gallery figures — sdx-figure pattern. No .card chrome, no border-left. */
.page-mamadex-mama-profile .gallery3 .sdx-figure {
display: flex;
flex-direction: column;
border-radius: var(--radius);
overflow: hidden;
background: var(--card);
box-shadow: var(--card-shadow);
border: 1.5px solid var(--border);
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.page-mamadex-mama-profile .gallery3 .sdx-figure:hover {
transform: translateY(-0.1875rem);
box-shadow: var(--card-shadow-hover);
}
.page-mamadex-mama-profile .gallery3 .media-thumb {
background: none;
border: none;
padding: 0;
cursor: zoom-in;
display: block;
overflow: hidden;
width: 100%;
}
.page-mamadex-mama-profile .gallery3 .media-thumb img,
.page-mamadex-mama-profile .gallery3 img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
transition: transform 0.30s ease;
}
.page-mamadex-mama-profile .gallery3 .media-thumb:hover img {
transform: scale(1.03);
}
.page-mamadex-mama-profile .gallery3 .sdx-figure-caption {
font-size: var(--small);
color: var(--muted);
padding: 0.5rem 0.75rem 0.75rem;
line-height: 1.5;
text-align: left;
margin-top: 0;
}
/* Short video — surface treatment on the figure, not the button.
box-shadow on a button with overflow:hidden is clipped by the browser.
Figure is the correct surface carrier — matches .gallery3 .sdx-figure pattern.
margin-inline:auto centres the figure within the sdx-card-section. */
.page-mamadex-mama-profile .mama-video-figure {
display: block;
margin-top: 2rem;
margin-inline: auto;
width: 100%;
max-width: 28.75rem;
border-radius: var(--radius);
overflow: hidden;
background: var(--card);
box-shadow: var(--card-shadow);
border: 1.5px solid var(--border);
}
.page-mamadex-mama-profile .mama-video-figure .media-thumb {
width: 100%;
background: none;
border: none;
padding: 0;
cursor: zoom-in;
display: block;
}
.page-mamadex-mama-profile .mama-video-figure .media-thumb img {
width: 100%;
display: block;
border-radius: 0; /* figure clips — no double rounding */
}
/* Caption inside video figure — needs explicit padding since figure has overflow:hidden */
.page-mamadex-mama-profile .mama-video-figure .sdx-figure-caption {
padding: 0.5rem 0.75rem 0.75rem;
margin-top: 0;
}
/* ======================================================================================================
7) Buttons and CTAs
Canonical hero button: page overrides .btn-hero-primary background only.
.btn-hero-secondary: NO page overrides — fully canonical in global.css.
====================================================================================================== */
/* MamaDEX violet→depth gradient per v4.5.0 migration
RULE §8.3: gradient contains dark stop (#220f27 ≈ near-black). Text MUST be #ffffff. */
.page-mamadex-mama-profile .btn-hero-primary {
background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%);
color: #ffffff; /* REQUIRED: dark gradient stop — §8.3 recurring violation rule */
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.50),
0 2px 8px rgba(0, 0, 0, 0.35),
inset 0 0 0 2px rgba(255, 255, 255, 0.80); /* DOC-03 §4.1: 2px/0.80 mandatory */
}
.page-mamadex-mama-profile .btn-hero-primary:hover {
filter: brightness(1.08); /* DOC-03 §4.1 canonical hover */
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.60),
0 3px 10px rgba(0, 0, 0, 0.40),
inset 0 0 0 2px rgba(255, 255, 255, 0.80);
}
/* Inside card .sdx-btn-primary — MamaDEX violet gradient
RULE §8.3: dark stop present. color: #ffffff required. */
.page-mamadex-mama-profile .sdx-btn-primary {
background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%);
color: #ffffff; /* REQUIRED: dark gradient stop — §8.3 recurring violation rule */
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.30);
}
/* Scoped element cascade protection — HOWTO E2b / DOC-03 §8.3.1.
global.css a, a:visited { color: inherit } can override the global
.sdx-btn-primary { color: #ffffff } rule in visited-link states.
Mandatory when gradient button is an inside a card. */
.page-mamadex-mama-profile .card .sdx-btn-primary {
color: #ffffff; /* MANDATORY: cascade protection — E2b */
}
/* ======================================================================================================
8) Page modules
====================================================================================================== */
/* Evidence card — flex column so button is bottom-pinned regardless of content length.
HOWTO F7 hard rule: every .card with a CTA button MUST use flex column + margin-top: auto. */
.page-mamadex-mama-profile #section-evidence .card {
display: flex;
flex-direction: column;
}
.page-mamadex-mama-profile #section-evidence .card .sdx-btn-primary {
margin-top: auto;
align-self: flex-start;
}
/* ======================================================================================================
9) Media queries
====================================================================================================== */
/* none — hero responsive rules in mamadex-mama-profile-hero.css */
/* ======================================================================================================
10) Dark mode
====================================================================================================== */
/* none */