|
| 1 | +# BUILD_PR_HEADER_INTRO_OVERLAY_COLLAPSED_HEADER_RESTYLE |
| 2 | + |
| 3 | +## Purpose |
| 4 | +Restyle the shared header/intro presentation so the Header and Intro sit on top of the hero image, while preserving the existing style-system architecture and excluding `page-shell` from this change. |
| 5 | + |
| 6 | +## Scope |
| 7 | +- Move the shared Header and Intro visual block on top of the image |
| 8 | +- Remove the background behind the overlaid Header and Intro block |
| 9 | +- Set overlay foreground color to `#ed9700` |
| 10 | +- When collapsed, set header background color to `#7a00df` |
| 11 | +- Remove corner rounding from the header container |
| 12 | +- Exclude `page-shell` selectors and layout rules from this PR |
| 13 | + |
| 14 | +## Non-Goals |
| 15 | +- No `page-shell` edits |
| 16 | +- No tool-shell changes |
| 17 | +- No navigation/content restructuring |
| 18 | +- No new JS behavior unless a tiny class/state hook is required to apply the collapsed style already driven by existing collapse behavior |
| 19 | +- No repo-wide style cleanup beyond the selectors directly responsible for this slice |
| 20 | + |
| 21 | +## Implementation Targets |
| 22 | +- Shared theme CSS under `src/engine/theme/` |
| 23 | +- Shared header/intro markup hooks only if required to support the overlay styling cleanly |
| 24 | +- Existing collapse state hook only if already present; otherwise use the smallest possible additive hook |
| 25 | + |
| 26 | +## Required Visual Outcome |
| 27 | +1. The Header and Intro render visually on top of the image |
| 28 | +2. The overlaid Header and Intro have no background fill |
| 29 | +3. Overlay foreground/text/accent color uses `#ed9700` |
| 30 | +4. In collapsed state, the header background becomes `#7a00df` |
| 31 | +5. Header corners are square (no border radius) |
| 32 | +6. `page-shell` remains untouched |
| 33 | + |
| 34 | +## Constraints |
| 35 | +- No embedded `<style>` in HTML |
| 36 | +- No inline `style=""` in HTML |
| 37 | +- No JS-generated style strings |
| 38 | +- Keep the change additive and page-by-page within the shared theme system |
| 39 | +- Preserve existing header/image behavior unless required by the overlay treatment |
| 40 | + |
| 41 | +## Suggested Files To Touch |
| 42 | +- `src/engine/theme/main.css` |
| 43 | +- `src/engine/theme/header.css` |
| 44 | +- Any one shared intro/header partial or minimal loader hook only if necessary |
| 45 | +- Roadmap file: status-only update if there is an existing matching style item for this work |
| 46 | + |
| 47 | +## Acceptance Criteria |
| 48 | +- Header and Intro overlay the image on the targeted shared entry pages |
| 49 | +- Overlay background is transparent/none |
| 50 | +- Overlay foreground color is `#ed9700` |
| 51 | +- Collapsed header background is `#7a00df` |
| 52 | +- Header border radius is removed |
| 53 | +- No `page-shell` selectors are modified |
| 54 | +- No layout regressions on the targeted pages |
| 55 | +- No horizontal overflow introduced |
| 56 | +- Existing collapse behavior still works |
| 57 | + |
| 58 | +## UAT Checklist |
| 59 | +- Open each targeted shared entry page and verify Header + Intro are drawn over the image |
| 60 | +- Verify there is no background panel behind the overlaid content |
| 61 | +- Verify overlay foreground elements read as `#ed9700` |
| 62 | +- Collapse the header/intro region and verify collapsed header background is `#7a00df` |
| 63 | +- Verify header has square corners in both expanded and collapsed states |
| 64 | +- Verify pages using `page-shell` do not change because `page-shell` was excluded |
| 65 | +- Verify no console errors |
| 66 | + |
| 67 | +## Codex Notes |
| 68 | +- Keep this to one PR purpose only |
| 69 | +- Use the smallest selector changes that achieve the requested visual result |
| 70 | +- Do not widen this into a broader theme cleanup |
| 71 | +- If a selector currently couples header/intro overlay behavior to `page-shell`, decouple only the minimum necessary portion without changing `page-shell` rules themselves |
0 commit comments