/*
V7-HEADER
File: reporters-reporter-profile.css
Path: /assets/css/reporters/reporters-reporter-profile.css
Version: v3.17.4
Issued: 2026-04-03
Author: Buktika Webdesk (Binka)
Owner: Buktika — Binka
Purpose: Single dynamic reporter profile page. PIL-04 v1.0.0 + DOC-02 + DOC-03 + ai.md.
Light mode first. Dark via [data-theme="dark"]. 10-section scaffold.
Modelled after teams/teams-member-profile.css v1.0.0.
PIL: BKT-PIL-04 Reporters v1.0.0
Colour Map: v3.5.0
Design System: v4.0.0
Umbrella: v1.1.0
ISO Reference: ISO 27001, ISO 9241-110
Source Naming Standard: Buktika v7.1 (ISO Aligned)
License: © Buktika, 2026. All rights reserved.
ChangeLog:
v3.17.3 (2026-04-03): Profile subheading parity with Teams.
C1: Dark-mode overrides for .bio-body h3 and .approach-card h3 now use var(--fg)
instead of mama-amber so Reporters and Teams profile subheadings share one
structural colour rule.
v3.17.2 (2026-04-03): Dark profile media surface tuning.
C1: Portrait panel, gallery figures, and video figure no longer carry a separate
dark card fill. Media now sits on the shared dark section surface.
C2: Added explicit dark shadows to portrait panel, gallery figures, and video figure
so the media still reads as elevated rather than flat against the background.
v3.17.1 (2026-04-03): Dark profile biography tuning.
C1: .bio-panel removed from dark card-surface group so the biography text column
sits on the same dark section surface as its parent .sdx-card-section.
C2: .bio-body h3 was temporarily moved to mama-amber in dark mode.
Superseded by v3.17.3, which restores structural-heading parity via var(--fg).
v3.17.0 (2026-03-23): Video figure added.
C1: .reporter-video-figure rules added in section 8.
Figure is the surface carrier — overflow:hidden clips child border-radius.
shadow on figure, not on button child (same logic as portrait-panel).
No border — consistent with gallery3 .sdx-figure which also has no border.
Mirrors mamadex-mama-profile.css .mama-video-figure geometry.
max-width: 460px centres the figure within the sdx-card-section.
C2: Dark mode block updated — .reporter-video-figure added alongside portrait-panel.
v3.16.0 (2026-03-20): Portrait shadow fix. Shadow moved from .portrait-img to
.portrait-panel — overflow:hidden on the panel clips any box-shadow on child
elements. Shadow on the panel itself is unclipped. Matches mamadex pattern.
v3.0.0 (2026-03-19): Full compliance rebuild from scratch. 25 violations resolved.
C1: All --page-* tokens bound to canonical tokens — no hardcoded hex for token values
C2: Light mode defined first. Dark via [data-theme="dark"] — ai.md HARD RULE
C3: [data-theme="dark"] block added — ai.md HARD RULE
C4: Full 10-token contract met per _page-template.css §1
C5: --page-splash added per PIL-04 §2 (reporters-orange canonical name)
C6: Vignette: rgba(245,176,20,0.20) per PIL-04 §3 (amber-derived, not olive/black)
C7: Button text: #ffffff per PIL-04 §5.1 (red-earth is a dark stop)
C8: !important removed throughout
C9: All px values converted to rem except explicit hero-height exceptions
C10: All selectors scoped under .page-reporters-reporter-profile per DOC-02 §2.2
C11: 10-section scaffold followed per _page-template.css
C12: --hero-image absent by design — set at runtime by JS (same pattern as
teams-member-profile.css). EXCEPTION documented.
v2.1.0 (2026-02-23): Prior compliance pass — archived.
*/
/* 0) depends on: global.css, themes.css, partials/header.css (via includes.js),
partials/footer.css, partials/media-lightbox.css */
/* ======================================================================================================
1) Page variable binding
PIL-04 §2 full token set. --page-bg #f7f4ed: PIL-04 §2 documented exception. No token.
--page-dark-base #0f0c08 / --page-dark-surface #1c160f: PIL-04 §2 documented exceptions.
No tokens map to these values — they are savanna night tones, distinct from living-tower dark.
--page-splash: PIL-04 §2 canonical name for reporters-orange. Bound alongside --page-accent
for compatibility with global.css rules that consume --page-accent.
--hero-image: absent by design. Set at runtime by reporters-reporter-profile.js via
document.body.style.setProperty("--hero", url(...)) on body. global.css .hero-wrap
consumes background-image: var(--hero). EXCEPTION: no token — per-reporter photography.
====================================================================================================== */
.page-reporters-reporter-profile {
--page-bg: #f7f4ed; /* PIL-04 §2 EXCEPTION — no token */
--page-primary: var(--sdx-color-mama-amber); /* #f5b014 savanna gold */
--page-secondary: var(--sdx-color-mama-amber); /* #f5b014 — DOC-01 §4 HARD RULE: tagline always amber */
--page-accent: var(--sdx-color-reporters-orange); /* #d94328 — global.css compat */
--page-splash: var(--sdx-color-reporters-orange); /* #d94328 PIL-04 §2 canonical name */
--page-depth: var(--sdx-color-stem-olive); /* #464820 */
--page-dark-base: #0f0c08; /* PIL-04 §2 EXCEPTION — savanna night. No token. */
--page-dark-surface: #1c160f; /* PIL-04 §2 EXCEPTION — raised warm dark. No token. */
/* EXCEPTION: --hero-image absent. Set at runtime by JS — see header note. */
--hero-vignette-from: rgba(245, 176, 20, 0.20); /* PIL-04 §3 — amber-derived. Max 0.25. */
--hero-vignette-to: rgba(245, 176, 20, 0);
background: var(--page-bg);
color: var(--fg);
}
/* ======================================================================================================
2) Base page surfaces
====================================================================================================== */
.page-reporters-reporter-profile main {
padding-bottom: 3.5rem;
}
/* ======================================================================================================
3) Hero
PIL-04 §3: bottom vignette only. rgba(245,176,20,0.20) amber-derived. Fade at 32%.
No colour overlay. The golden light is the palette (PIL-04 §3 special rule).
Hero image set at runtime by JS — EXCEPTION documented in §1.
Height: clamp px permitted per DOC-02 §5.3 for fixed photographic frames.
====================================================================================================== */
.page-reporters-reporter-profile .hero-wrap {
min-height: clamp(400px, 56vw, 900px); /* px inside clamp — fixed photographic frame, DOC-02 §5.3 */
position: relative;
isolation: isolate;
background-image: var(--hero); /* set at runtime by JS */
background-size: cover;
background-position: center 35%;
}
.page-reporters-reporter-profile .hero-wrap::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
to top,
var(--hero-vignette-from) 0%,
var(--hero-vignette-to) 32%
);
}
.page-reporters-reporter-profile .hero {
position: relative;
z-index: 1;
display: flex;
align-items: flex-end;
justify-content: center;
min-height: clamp(400px, 56vw, 900px); /* px inside clamp — DOC-02 §5.3 */
padding: 3rem 1.5rem;
}
.page-reporters-reporter-profile .hero-grid {
width: min(1160px, 92vw); /* px inside min() — container max, DOC-02 §5.3 */
margin-inline: auto;
}
.page-reporters-reporter-profile .hero-body {
max-width: 48rem;
text-align: center;
margin: 0 auto;
}
.page-reporters-reporter-profile .hero .headline {
margin: 0 0 0.5rem;
font-family: var(--headline-font);
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 700;
color: #ffffff; /* EXCEPTION: permanent — hero text always white over photography. global.css v3.3.0 */
text-shadow:
0 4px 20px rgba(0, 0, 0, 0.85),
0 2px 8px rgba(0, 0, 0, 0.70),
0 1px 3px rgba(0, 0, 0, 0.50);
}
/* .tagline and .hero .intro are owned by global.css.
Role renders via .tagline (amber, text-shadow, clamp size).
Slogan renders via .hero .intro (#ffffff, text-shadow). No page override needed. */
/* Hero CTA row */
.page-reporters-reporter-profile .hero-cta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
@media (max-width: 33.75rem) { /* 540px */
.page-reporters-reporter-profile .hero-cta {
flex-direction: column;
align-items: center;
}
}
/* ======================================================================================================
4) Typography overrides
====================================================================================================== */
/* none — DOC-02 §4.1.4 HARD RULE: page CSS MUST NOT override colour on .sdx-card-section > h2.
global.css v3.16.0 delivers var(--page-primary) underline automatically via border-bottom. */
/* ======================================================================================================
5) Sections and alternation
DS v4.0.0 — .sdx-card-section canonical. Alternating tint pattern retired.
====================================================================================================== */
/* none — global.css handles .sdx-card-section */
/* ======================================================================================================
6) Cards and tiles
====================================================================================================== */
/* Portrait + bio: two-column grid. Portrait left, bio right. */
.page-reporters-reporter-profile .portrait-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: 2rem;
align-items: start;
}
@media (max-width: 48rem) {
.page-reporters-reporter-profile .portrait-grid {
grid-template-columns: 1fr;
}
}
/* Portrait panel — image fills the panel flush. Shadow on panel, not image.
overflow:hidden clips child shadows — shadow must live on the panel itself. */
.page-reporters-reporter-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); /* matches mamadex-mama-profile.css portrait shadow */
}
.page-reporters-reporter-profile .portrait-img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: center top;
display: block;
border-radius: 0; /* panel's own border-radius clips it — no double rounding */
}
/* Bio panel — plain surface, no border-left, no card chrome */
.page-reporters-reporter-profile .bio-panel {
display: flex;
flex-direction: column;
}
.page-reporters-reporter-profile .bio-body {
font-size: var(--body); /* 1rem = 16px canonical — DOC-02 §5 scale token */
line-height: 1.75;
color: var(--fg);
flex: 1;
}
.page-reporters-reporter-profile .bio-body p {
margin: 0 0 1.5rem; /* 1.5rem white estate between paragraphs */
}
.page-reporters-reporter-profile .bio-body p:last-child {
margin-bottom: 0;
}
/* H3 subheadings inside biography HTML (e.g. "What She Creates", "Heart and Message")
Use --h3 scale token. Top margin creates clear visual separation from preceding text.
Colour: var(--sdx-color-green-deep) — structural subheading, not a CTA. --page-secondary is amber (tagline). */
.page-reporters-reporter-profile .bio-body h3 {
font-family: var(--headline-font);
font-size: var(--h3); /* 1.25rem = 20px canonical */
font-weight: 700;
color: var(--sdx-color-green-deep); /* structural subheading — not a CTA, not amber */
margin: 2rem 0 0.625rem;
line-height: 1.25;
}
/* Slogan — italic, amber left border, bottom-pinned via flex column */
.page-reporters-reporter-profile .reporter-slogan {
font-style: italic;
font-size: 1.0625rem;
color: var(--sdx-color-green-deep);
border-left: 3px solid var(--page-primary);
padding-left: 0.875rem;
margin: 1rem 0 0;
line-height: 1.5;
}
/* Consent note */
.page-reporters-reporter-profile .consent {
font-style: italic;
font-size: var(--small);
color: var(--muted);
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
/* Work samples gallery — 3 col */
.page-reporters-reporter-profile .gallery3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
margin-top: 2rem;
}
@media (max-width: 48rem) {
.page-reporters-reporter-profile .gallery3 {
grid-template-columns: 1fr;
}
}
/* Gallery figures — artwork images only. No card chrome, no border-left.
.sdx-figure provides the wrapper. Image fills flush. Caption below. */
.page-reporters-reporter-profile .gallery3 .sdx-figure {
display: flex;
flex-direction: column;
border-radius: var(--radius);
overflow: hidden;
background: var(--card);
box-shadow: var(--card-shadow);
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.page-reporters-reporter-profile .gallery3 .sdx-figure:hover {
transform: translateY(-0.1875rem);
box-shadow: var(--card-shadow-hover);
}
.page-reporters-reporter-profile .gallery3 .media-thumb {
background: none;
border: none;
padding: 0;
cursor: pointer;
display: block;
overflow: hidden;
width: 100%;
}
.page-reporters-reporter-profile .gallery3 .media-thumb img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
transition: transform 0.30s ease;
}
.page-reporters-reporter-profile .gallery3 .media-thumb:hover img {
transform: scale(1.03);
}
.page-reporters-reporter-profile .gallery3 .sdx-figure-caption {
font-size: var(--small);
color: var(--muted);
margin-top: 0;
padding: 0.5rem 0.75rem 0.75rem;
line-height: 1.5;
text-align: left;
}
/* Approach / Tags grid */
.page-reporters-reporter-profile .approach-grid {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
.page-reporters-reporter-profile .approach-card {
background: var(--card);
border-radius: var(--radius);
border-left: 4px solid var(--page-primary);
padding: 1.25rem 1.5rem;
box-shadow: var(--card-shadow);
}
.page-reporters-reporter-profile .approach-card h3 {
font-size: var(--h3); /* 1.25rem canonical — DOC-02 §5 HARD RULE: use scale tokens */
font-weight: 600;
color: var(--sdx-color-green-deep); /* structural subheading — not a CTA, not amber */
margin: 0 0 0.5rem;
}
.page-reporters-reporter-profile .approach-card p {
font-size: var(--body); /* 1rem canonical — DOC-02 §5 HARD RULE: use scale tokens */
line-height: 1.7;
color: var(--muted);
margin: 0;
}
/* Channels grid — mirrors .reporters-audience-grid */
.page-reporters-reporter-profile .channels-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
/* Channel card — mirrors .reporters-audience-card geometry */
.page-reporters-reporter-profile .channel-card {
background: var(--card);
border-radius: var(--radius);
border-left: 4px solid var(--page-depth); /* stem-olive #464820 — calm, earthy, not orange */
box-shadow: var(--card-shadow);
padding: 1.5rem;
display: flex;
flex-direction: column;
transition: transform 0.30s ease, box-shadow 0.30s ease;
text-align: left;
align-items: flex-start;
}
.page-reporters-reporter-profile .channel-card:hover {
transform: translateY(-0.1875rem);
box-shadow: var(--card-shadow-hover);
}
/* Icon + name row — mirrors .reporters-audience-card-top */
.page-reporters-reporter-profile .channel-card-top {
display: flex;
align-items: center;
gap: 0.875rem;
margin-bottom: 0.875rem;
}
.page-reporters-reporter-profile .channel-icon {
width: 2rem;
height: 2rem;
flex-shrink: 0;
color: var(--fg);
}
.page-reporters-reporter-profile .channel-card h3 {
font-size: var(--h3);
font-weight: 600;
color: var(--fg);
margin: 0;
line-height: 1.3;
}
/* Platform URL — secondary, receded */
.page-reporters-reporter-profile .channel-platform {
font-size: var(--small);
color: var(--muted);
margin: 0 0 1.5rem;
display: block;
flex: 1;
}
/* CTA button — reporters-orange gradient, bottom-pinned via flex column.
Mirrors .reporters-audience-cta-reporters exactly. */
.page-reporters-reporter-profile .btn-channel {
display: inline-block;
font-size: var(--body);
font-weight: 600;
text-decoration: none;
padding: 0.5rem 1.25rem;
border-radius: 0.375rem;
border: none;
background: linear-gradient(145deg, var(--page-primary) 0%, var(--page-splash) 100%);
color: #ffffff; /* EXCEPTION: PIL-04 §5.1 — dark gradient stop */
box-shadow: 0 4px 14px rgba(245, 176, 20, 0.24);
transition: filter 0.28s ease;
align-self: flex-start;
margin-top: auto;
}
.page-reporters-reporter-profile .btn-channel:hover {
filter: brightness(1.08);
color: #ffffff;
}
/* ======================================================================================================
7) Buttons and CTAs
PIL-04 §5.1: gradient amber → red-earth 145deg.
Text: #ffffff — MANDATORY. red-earth (#d94328) is a dark stop — 4.6:1 ✅ AA.
At amber start: 1.89:1 — large text rule applies. Min font-size 1.166rem non-bold per PIL-04 §5.1.
EXCEPTION: #ffffff permanent on dark gradient stops per PIL-04 §5.1 and DOC-03 §8.3.
====================================================================================================== */
/* Hero primary button */
.page-reporters-reporter-profile .btn-hero-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.875rem 2rem;
font-size: 1.166rem; /* PIL-04 §5.1 — WCAG large text minimum at amber gradient start */
font-weight: 600;
text-decoration: none;
border-radius: 0.375rem;
background: linear-gradient(145deg, var(--page-primary) 0%, var(--page-splash) 100%);
color: #ffffff; /* EXCEPTION: PIL-04 §5.1 — dark gradient stop. Large text rule applies. */
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.50),
0 2px 8px rgba(0, 0, 0, 0.35),
inset 0 0 0 1px rgba(255, 255, 255, 0.25); /* PIL-04 §5.2 inset ring */
transition: box-shadow 0.25s ease, filter 0.25s ease;
}
.page-reporters-reporter-profile .btn-hero-primary:hover {
filter: brightness(1.06);
color: #ffffff; /* REQUIRED: prevents global :hover coral catchall */
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.60),
0 3px 10px rgba(0, 0, 0, 0.40),
inset 0 0 0 1px rgba(255, 255, 255, 0.30);
}
.page-reporters-reporter-profile .btn-hero-primary:focus-visible {
outline: 2px solid var(--page-primary);
outline-offset: 3px;
}
/* Hero secondary button — ghost white over photography */
.page-reporters-reporter-profile .btn-hero-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.875rem 2rem;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
border-radius: 0.375rem;
background: transparent;
color: #ffffff; /* EXCEPTION: permanent — ghost over photography */
border: 1.5px solid rgba(255, 255, 255, 0.60);
transition: background 0.25s ease, border-color 0.25s ease;
}
.page-reporters-reporter-profile .btn-hero-secondary:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.85);
color: #ffffff; /* REQUIRED: prevents global :hover coral catchall */
}
.page-reporters-reporter-profile .btn-hero-secondary:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.75);
outline-offset: 3px;
}
/* CTA band primary button — follows page gradient */
.page-reporters-reporter-profile .sdx-cta-band .sdx-btn-primary {
background: linear-gradient(145deg, var(--page-primary) 0%, var(--page-splash) 100%);
color: #ffffff; /* EXCEPTION: PIL-04 §5.1 — dark gradient stop */
font-size: 1.166rem; /* PIL-04 §5.1 — WCAG large text minimum */
box-shadow: 0 4px 16px rgba(245, 176, 20, 0.28);
}
.page-reporters-reporter-profile .sdx-cta-band .sdx-btn-primary:hover {
filter: brightness(1.06);
color: #ffffff; /* REQUIRED: prevents global :hover coral catchall */
}
[data-theme="dark"] .page-reporters-reporter-profile .section-not-found .sdx-btn-primary {
color: var(--sdx-color-slate-dark);
}
/* ======================================================================================================
8) Page modules
====================================================================================================== */
/* Not-found section */
.page-reporters-reporter-profile .section-not-found p {
color: var(--muted);
margin-bottom: 1.5rem;
}
/* Short video — figure is the surface carrier.
overflow:hidden on figure clips child border-radius — shadow must live on figure.
No border — consistent with gallery3 .sdx-figure (no border on reporters page).
max-width: 460px centres the figure. Matches mamadex-mama-profile.css geometry.
Mirrors mamadex-mama-profile.css .mama-video-figure v3.7.0. */
.page-reporters-reporter-profile .reporter-video-figure {
display: block;
margin-top: 2rem;
margin-inline: auto;
width: 100%;
max-width: 460px; /* px inside max-width — fixed display frame, DOC-02 §5.3 */
border-radius: var(--radius);
overflow: hidden;
background: var(--card);
box-shadow: var(--card-shadow);
}
.page-reporters-reporter-profile .reporter-video-figure .media-thumb {
width: 100%;
background: none;
border: none;
padding: 0;
cursor: pointer;
display: block;
}
.page-reporters-reporter-profile .reporter-video-figure .media-thumb img {
width: 100%;
display: block;
border-radius: 0; /* figure clips — no double rounding */
}
/* Caption inside video figure — explicit padding since figure has overflow:hidden */
.page-reporters-reporter-profile .reporter-video-figure .sdx-figure-caption {
font-size: var(--small);
color: var(--muted);
padding: 0.5rem 0.75rem 0.75rem;
margin-top: 0;
line-height: 1.5;
}
/* Lightbox — layout owned by media-lightbox.css v2.2.0.
HTML structure matches mamadex-mama-profile.html working pattern.
No page-level overrides required. */
/* ======================================================================================================
9) Media queries
Mobile breakpoints declared inline above where relevant.
====================================================================================================== */
@media (max-width: 48rem) {
.page-reporters-reporter-profile .hero-wrap,
.page-reporters-reporter-profile .hero {
min-height: 26rem;
}
.page-reporters-reporter-profile .hero {
align-items: center;
padding: 2rem 1.25rem;
}
}
@media (max-width: 30rem) {
.page-reporters-reporter-profile .channels-grid {
grid-template-columns: 1fr;
}
}
/* ======================================================================================================
10) Dark mode
[data-theme="dark"] only. Never prefers-color-scheme. ai.md HARD RULE.
PIL-04 §8 dark surface tokens (exceptions documented in §1).
====================================================================================================== */
[data-theme="dark"] .page-reporters-reporter-profile {
background: var(--page-dark-base);
color: var(--fg);
}
/* none — dark mode h2 colour override removed. DOC-02 §4.1.4 HARD RULE. */
/* Portrait card, bio card, and video figure */
[data-theme="dark"] .page-reporters-reporter-profile .portrait-panel,
[data-theme="dark"] .page-reporters-reporter-profile .approach-card,
[data-theme="dark"] .page-reporters-reporter-profile .channel-card {
background: var(--card);
}
[data-theme="dark"] .page-reporters-reporter-profile .portrait-panel,
[data-theme="dark"] .page-reporters-reporter-profile .gallery3 .sdx-figure,
[data-theme="dark"] .page-reporters-reporter-profile .reporter-video-figure {
background: transparent;
box-shadow:
0 1rem 2.5rem rgba(0, 0, 0, 0.34),
0 0.25rem 0.75rem rgba(0, 0, 0, 0.22);
}
[data-theme="dark"] .page-reporters-reporter-profile .bio-panel {
background: transparent;
}
[data-theme="dark"] .page-reporters-reporter-profile .bio-body h3,
[data-theme="dark"] .page-reporters-reporter-profile .approach-card h3 {
color: var(--fg);
}
[data-theme="dark"] .page-reporters-reporter-profile .reporter-slogan {
color: var(--sdx-color-mama-amber);
}
[data-theme="dark"] .page-reporters-reporter-profile .consent {
border-top-color: var(--border);
}
/* PIL-04 §9: forbidden in dark mode — berry purple or warm indigo */
/* No --sdx-color-purple-deep or indigo tokens appear in this file. Rule satisfied. */