/* Project-detail family (DECISION-003, WP-E2,
docs/WORKPACK_DECISION003_ALL_SUBPAGES.md Sections 1.2/1.3/2/3/4).
Restyles the real, currently-live CMS content shared by all 14 Project
keys (uvweb, freya2, chronobim, wormwood, cerberus, demeter, ermes, nero,
gpt-box, nutheia, deltaprism, seismic-nexus, rna-structure,
unreal-engine) onto this project's --hr-* tokens / Barlow Condensed +
Barlow type / glass-panel system, built on static/css/site_redesign.css's
shared header/nav/connector-logo rules (that file's own selector lists
needed extending with these 14 body classes too - see its WP-E2 addendum
comment - otherwise the --hr-* custom properties referenced below would
be undefined on these pages). This file is ONLY ever linked from
templates/pages/project_detail.html's own tag (see that
template's block extra_css), so it never loads on any page outside the
14 keys it targets - the class-vocabulary selectors below do not need to
be globally unique the way a sitewide file's would.
Every selector here targets real class names already baked into
PageContent.content_html for these 14 pages (confirmed via full `curl`
of all 14 live routes, not the 2 samples in the workpack doc alone -
all 14 share the identical section skeleton: back-link, h1.gradient-text,
.project-category, description+image row, tech-badges/feature-list row,
results-container row. None of the 14 broke the pattern.) -
static/css/style_for_project_showcase.css documents this same
pre-redesign vocabulary (mined for class names only, per the workpack's
Section 2 finding - its own color values are legacy and NOT reused
here). templates/pages/project_detail.html renders that content
completely unchanged via {{ render_page_content(page.key) | safe }} -
nothing here relies on any template-side markup change.
--- No hr-hero-wrap/hr-veins wrapper element ---
static/css/products_redesign.css and static/css/about_redesign.css both
wrap a real, template-owned hero SECTION in a dedicated `.hr-hero-wrap` >
`.hr-veins` pair. These 14 pages have no equivalent - the "hero" is just
a bare back-link + h1 + category-badge sitting directly inside CMS blob
content with no wrapping element of its own to attach a veins-glow
layer to (same reason the workpack doc gives for using About's
`.ar-title-glass` *technique* rather than About's literal markup). Root
fix used instead: `.hr-page` itself (already `position:relative;
overflow:hidden`, see below) gets a `::before` pseudo-element for the
ambient violet/teal glow, absolutely positioned and height-limited to
the top of the page, `z-index: -1` so it never needs the real content to
carry its own z-index/position to stay above it (a plain, non-positioned
in-flow block descendant always paints above a negative-z-index sibling
pseudo-element, per the CSS stacking spec - no extra selector needed on
render_page_content's own output for this to be correct).
--- Header glass panel without a wrapping element ---
The real h1 (`
...`) already uses its own
`background` for the sitewide `.gradient-text` clip-to-text gradient
trick (static/css/style.css) - exactly the same conflict
about_redesign.css's own header comment describes for its `.ar-page-
title`. About solves it with a separate wrapping `.ar-title-glass` div,
but that requires editing static Jinja markup About owns directly; here
the h1 comes from a CMS blob this ticket must render byte-identical, so
no wrapping div can be inserted. Fixed the same way
static/css/products_redesign.css fixes it for its own h2s without a
wrapper: the h1 itself gets `position: relative; z-index: 0;
display: inline-block`, and a `::before` pseudo-element (`z-index: -1`,
so it only sinks below its own local stacking context, not the whole
page) supplies the glass panel background/blur/border behind the text.
--- Preserving each page's own inline category-color