Align the homepage and events with the adopted CMP visual system

[alexeygrigorev]

Parent umbrella: #129

Depends on #128, which restores and protects the exact copied CMP course composition that this slice uses as its visual reference. This issue is implementation-ready once #128 is merged.

Product outcome

Make the first public vertical slice—/, its non-redirecting /unified/ alias, /events, and /events/<slug>—read unmistakably as the same product as the adopted Course Management Platform (CMP), without changing what the pages say or do. The shared shell, typography, colors, spacing rhythm, headings, divided rows, controls, responsive behavior, dark mode, and accessibility treatment come from CMP; this slice must not invent another public-site theme.

This slice also closes the structural escape hatch that could silently restore the obsolete standalone public shell: all rendered pages continue to resolve base.html from the adopted CMP directory, and the unused project-level templates/base.html / core/site.css design is removed or otherwise proven unable to render.

Normative authority and visual provenance

• _docs/PROCESS.md
• _docs/specs/01-platform-architecture.md: one Django deployment and Django-template presentation
• _docs/specs/03-github-content-and-people.md: GitHub-owned public content, safe rendered HTML, and event/person relationships
• _docs/specs/05-events-registration-email.md: event lifecycle and public behavior; design must not change event ownership or registration behavior
• _docs/specs/10-verification-strategy.md: focused Django/browser/accessibility checks and inspected evidence
• _docs/adoption/course-platform/README.md and integration-patches.md: pinned source and explicit-overlay rules
• Exact visual source: DataTalksClub/course-management-platform@98a235283904b4ef9ad29e196298540756cf1bcc, not a moving branch, remembered screenshot, or later public-site experiment.

Reference files at that commit:

• templates/base.html, source SHA-256 f51666391e33aec905f43312215bfd82094bfb0088414594f40bcbdfc21560b8, for shell/header/footer/content width, typography, theme control, and account navigation composition;
• courses/static/courses.css, source SHA-256 282ed7b15df2502a8d4c2e9cd45ef1f8e92771835243d3cbc590f78db9ed5f8f, for the token and component implementation;
• courses/templates/courses/course_list.html and _course_list_card.html for hero, section-heading, divided-row, metadata, action, empty, and responsive patterns;
• courses/templates/courses/course.html for a representative detail-page hierarchy.

The website’s adopted course_platform_templates/base.html and courses/static/courses.css include documented DTC integration overlays. Their current target hashes are evidence in integration-patched-files.tsv, not a new design authority. #125, #126, and later accepted overlays extend the pinned CMP system rather than superseding it.

CMP token and component contract

Use the existing CMP implementation rather than restating lookalike literal values in a new stylesheet:

• Typography: Inter, then CMP’s system sans fallback; normal tracking; the restrained CMP catalogue scale (hero up to md:text-5xl, section headings text-2xl/md:text-3xl, body text-base/md:text-lg) unless semantic content proves a narrower existing CMP pattern.
• Color: --page-bg, --surface-bg, --surface-muted, --border-muted, --text-primary, --text-heading, --text-muted, --link-color, --link-hover, input/status tokens, and --focus-ring; dark mode changes these tokens on body.dark-mode.
• Shell: the CMP app-content-shell (56rem) and the recorded wider header-navigation integration only; the base uses px-4/md:px-8 and py-5/md:py-10.
• Composition: semantic headings and landmarks; restrained sections separated by app-border; full-width app-divide rows for discovery lists; app-heading, app-text, app-muted, and app-link for text roles. Cards/panels are used only where CMP uses a real bounded object, form, alert, or grouped detail—not as a default marketing grid.
• Controls: existing primer-button variants, CMP form controls, badges, alerts, breadcrumbs, pagination, user menu, and theme control. No parallel .button, .card, .hero, color palette, radius scale, or shadow language.
• Interaction: server-rendered links and forms work without JavaScript; JavaScript only enhances the CMP shell. Dark mode, reduced motion, keyboard focus, touch targets, and reflow are shared behaviors rather than page-specific patches.

First prefer existing CMP classes and readable template partials. If a missing primitive is genuinely required, make it token-backed and narrowly reusable in the adopted integration layer, document its rationale, and add a contract test. Do not add public.css, inline style blocks, raw page-specific color values, or a second reset/framework.

Confirmed current rendering audit

website/settings/base.py searches templates in this order: course_platform_templates/, project templates/, then app templates. Therefore:

• templates/core/home.html, every templates/public/*.html page, and every templates/review/*.html page reach course_platform_templates/base.html through core/base.html;
• adopted account/course pages extend that same CMP base directly;
• custom templates/studio/*.html reaches it through studio/base.html;
• copied Studio Courses reaches it through studio_courses/base.html.

The homepage and events already use many CMP tokens and utilities, so this work is a controlled alignment, not a wholesale rewrite. The material divergence is structural duplication: the unused lower-precedence templates/base.html loads core/site.css, whose independent #0b5fff palette, large marketing hero, card grids, .button controls, header/footer, and orange focus treatment form a competing design language. core/studio.css is another custom composition but is deferred to the custom-Studio child; this slice must not globally restyle Studio.

Scoped implementation

1. Capture deterministic before evidence for home and events and compare it with pages rendered from the exact pinned CMP source, using the reference files above rather than subjective memory.
2. Align templates/core/home.html, templates/public/events.html, templates/public/_event.html, templates/public/_event_meta.html, and templates/public/event_detail.html where the audit shows drift. Reuse the existing event partial so homepage and event discovery cannot diverge.
3. Keep one restrained CMP catalogue-style hero and section rhythm. Homepage and event collections use semantic full-width divided rows; event detail uses the CMP detail hierarchy and existing controls. Do not introduce a marketing card grid.
4. Prove every page in scope resolves the adopted base and adopted CSS. Remove the dormant project shell/stylesheet if the usage audit confirms they are unreachable; otherwise convert the remaining consumer explicitly and then remove them. Add a fail-closed origin/reference contract so a second visual base or stylesheet cannot silently return.
5. Preserve readable, indented, non-minified Django templates and a useful no-JavaScript rendering.
6. Add focused Django/template-source/browser coverage for the exact route, content, SEO, responsive, theme, and visual-system contracts below.

Required non-overlap

• Restore the copied CMP design on course-facing pages #128 owns copied course composition and the 25 protected courses/templates/** logical names. Do not edit a copied course page, copy public experiments into it, or weaken its no-shadow test. This issue may cite those pages as references only.
• Add DTC legal footer, legal pages, and analytics preferences #125 owns legal routes/copy, analytics consent, the compact legal footer, and the GitHub footer icon’s no-underline rule. Do not implement, rearrange, or restyle that footer scope here. Rebase on its accepted shell if it lands first.
• Remove pointer-click orange outlines from header controls #126 owns pointer-versus-keyboard focus modality and the shared :focus-visible correction. Do not edit core/static/core/accessibility.css or create page-specific focus overrides. Reuse its accepted design-system focus behavior if it lands first.
• Populate internal event pages and replace Luma registration CTAs #127 owns event-description/Luma migration, internal event registration routes and CTAs, source data, and event management behavior. Do not add/remove registration destinations, import content, change event routes, or invent event data here. This design slice must remain correct before and after Populate internal event pages and replace Luma registration CTAs #127.
• Import historical registration totals safely and show aggregate event counts #112 owns aggregate historical registration totals. Preserve the count and revision marker on event detail without using it as a visual redesign pretext.
• Do not change models, migrations, views, context shape, jobs, permissions, content records, static asset providers, deployment, or production state.

#125/#126 are coordination boundaries, not interface dependencies: this issue must not duplicate their work. If their accepted candidates change shared-shell output before implementation begins, start from the merged result and keep their focused contracts green.

Acceptance criteria

• /, /unified/, /events, and a representative /events/<slug> render through course_platform_templates/base.html, load the adopted courses.css, and contain no reference to the obsolete standalone core/site.css design.
• No live project-level base.html, stylesheet, selector, inline style block, or higher-precedence template can silently replace the CMP shell/tokens for pages in scope; a fail-closed repository/template-origin contract catches regression.
• The homepage retains its established title, H1, community subtitle, one featured course plus Browse-all path, real event/podcast/book/article previews, and every current internal/external destination. /unified/ remains a non-redirecting equivalent with its existing canonical behavior.
• /events retains the event-type explanation, calendar guidance, stable upcoming/past ordering, truthful empty states, internal event links, speaker links, dates/times/types, and current canonical/SEO metadata.
• /events/<slug> retains title, type/time, aggregate registration count when present, speakers, current safe links, breadcrumb, canonical/SEO/JSON-LD behavior, and all empty/optional-field branches. No Populate internal event pages and replace Luma registration CTAs #127 registration/content behavior is preempted.
• Visual hierarchy uses the CMP shell, font stack, tokens, restrained heading scale, spacing rhythm, divided rows, link roles, buttons, borders, radii, and shadows. There is no competing palette, oversized marketing composition, default card grid, or new CSS framework.
• Light and dark mode both use CMP tokens with legible text, borders, links, controls, icons, hover/current states, empty states, and event metadata; switching and persistence behavior do not regress.
• Keyboard order, skip link, visible keyboard focus, pointer focus behavior from Remove pointer-click orange outlines from header controls #126 when merged, semantic landmarks/headings/lists, accessible icon treatment, external-link labels, 44×44 mobile targets where applicable, reduced motion, and 200% zoom/reflow remain usable.
• At 1440×900 and 390×844 there is no horizontal overflow, clipping, overlap, unexpected card/grid collapse, missing local font/icon/style asset, console/page/request error, debug page, or error page. Content remains useful with JavaScript disabled.
• Templates remain readable, line-broken Django/HTML. URLs, redirects, status codes, content values/order, canonical/robots/OG/Twitter/JSON-LD/sitemap contracts, cache policy, and functionality are unchanged.
• Focused Django/template/adoption tests and make test-playwright-core pass, along with applicable uv-backed lint, format, type, migration-drift, Django, content/SEO/link, and CMP provenance checks.
• [HUMAN] The product owner compares the final home/events evidence with the exact pinned CMP reference and accepts the typography, density, hierarchy, row treatment, responsive composition, and dark-mode result as one design family. Automated similarity alone cannot satisfy this criterion.

Browser and screenshot scenarios

Use deterministic synthetic public records and no PII. Store all evidence below .tmp/screenshots/issue-<number>/, record the exact pinned CMP commit/reference paths, and open every image during independent testing.

1. Capture / and /events at 1440×900 and 390×844 in both light and dark mode (eight primary screenshots).
2. Capture one representative event detail with speakers, safe external links, and aggregate registration total at desktop and mobile in light mode; exercise dark mode in browser assertions.
3. Exercise /unified/ for structural/content/canonical equivalence without duplicating screenshots unless it differs.
4. Exercise homepage/event empty and optional-field states, keyboard traversal, pointer activation, theme switching/persistence, 200% zoom/reflow, 320 px overflow, reduced motion, JavaScript-disabled usefulness, and local asset/network/console failures.
5. Compare against deterministic screenshots rendered from the exact pinned CMP source catalogue/detail patterns. Record allowed DTC shell/content differences explicitly; “looks similar” is not a verdict.

Process handoff

Implement from current main after #128 is merged, in an isolated worktree. The engineer implements and tests without committing. A separate tester freezes the candidate, runs the focused and core gates, captures and reads the browser evidence, and reports every criterion. Product management then evaluates the visitor experience and the [HUMAN] owner criterion. Commit with Closes #<this issue> and Refs #129 only after both gates; merge locally without a pull request. Do not close #129 until every planned surface family is accepted.

[alexeygrigorev]

Grooming Complete

Verdict: fully groomed P0 first vertical slice, blocked only by the true visual-baseline dependency #128. needs grooming was never applied because this child was created directly from the researched #129 umbrella with complete scope and gates.

PM audit and handoff

• /, /unified/, /events, and /events/<slug> already inherit course_platform_templates/base.html through core/base.html; this is controlled composition alignment, not a new shell build.
• The exact authority is CMP commit 98a235283904b4ef9ad29e196298540756cf1bcc, with source base hash f5166639... and source CSS hash 282ed7b1.... Catalogue/list/detail reference templates are named in the issue.
• The material structural risk is the dormant lower-precedence templates/base.html + core/site.css pair, which carries a competing palette, marketing card/grid system, buttons, header/footer, and orange focus. This slice removes or fail-closes that fallback while keeping the recorded CMP/DTC integration shell.
• Homepage and event index/detail are one coherent slice because they share the event-row partial. The issue preserves all content, route, SEO, event, aggregate-count, and no-JavaScript behavior.
• Add DTC legal footer, legal pages, and analytics preferences #125 exclusively owns footer/legal/consent, Remove pointer-click orange outlines from header controls #126 focus modality, Restore the copied CMP design on course-facing pages #128 copied course composition/no-shadow, Populate internal event pages and replace Luma registration CTAs #127 event content/registration, and Import historical registration totals safely and show aggregate event counts #112 aggregate counts. None is duplicated here.
• Required evidence is explicit: deterministic CMP reference, eight primary home/events desktop/mobile/light/dark screenshots, representative event-detail evidence, keyboard/pointer/theme/zoom/320 px/no-JS/error checks, independent inspection, and named [HUMAN] owner design acceptance.

No code, repository file, worktree, commit, push, deployment, or production state was changed. Implement only after #128 merges, then follow the independent tester and PM/owner gates in _docs/PROCESS.md.

[alexeygrigorev]

Engineering handoff — uncommitted exact-main candidate

Implemented the groomed #130 presentation slice on exact authoritative main 4cad269d576217679ac6c9ce02286e7939d8b043 in the isolated worktree .tmp/website-130-home-events-cmp.

Visitor outcome

• /, nonredirecting /unified/, /events, and the representative internal event detail now use one restrained CMP catalog/detail hierarchy: the pinned typography scale, app-content-shell rhythm, existing token classes, divided full-width rows, Primer actions, and the adopted light/dark surface.
• The homepage featured cohort and event rows no longer become a second action column. Existing title, subtitle, three homepage destinations, one featured course, Browse all courses, real content previews, event order, icons, date/time/speaker links, calendar link, internal detail links, optional registration total, resources, canonical metadata, and JSON-LD remain intact.
• Event detail now renders the existing breadcrumb contract visibly and uses the CMP detail heading/rule hierarchy.
• The dormant competing templates/base.html and core/static/core/site.css are removed. Default runtime resolution fails closed to course_platform_templates/base.html; stale accessibility/version/static-response/readability registries now name only live surfaces.
• No new CSS, palette, reset, framework, inline style/script, model, migration, view, context, route, content record, event registration action, count behavior, API, Studio mutation, course template, footer/legal control, focus-modality rule, or deployment state was added or changed. Add DTC legal footer, legal pages, and analytics preferences #125, Remove pointer-click orange outlines from header controls #126, Populate internal event pages and replace Luma registration CTAs #127/Ship reviewed event descriptions without public Luma CTAs #131, Import historical registration totals safely and show aggregate event counts #112, and Restore the copied CMP design on course-facing pages #128 remain separate. In particular, current Luma action content is deliberately unchanged here because Ship reviewed event descriptions without public Luma CTAs #131 owns its safe removal.

Pinned CMP attribution and anti-shadow proof

Clean reference checkout: DataTalksClub/course-management-platform@98a235283904b4ef9ad29e196298540756cf1bcc.

• pinned templates/base.html: f51666391e33aec905f43312215bfd82094bfb0088414594f40bcbdfc21560b8
• pinned courses/static/courses.css: 282ed7b15df2502a8d4c2e9cd45ef1f8e92771835243d3cbc590f78db9ed5f8f
• unchanged adopted base overlay: fb5337edbc27ff8b5fc447371216a921157aff88625d35675038db03b58dc744
• unchanged adopted CSS overlay: cfd34e734a4be3110ab508d4a88b16d032c54fededdea784259ba9bc5b8a6d76
• uv run python scripts/verify_course_platform_adoption.py: 768 copied files and 4 target-owned compatibility shims verified.
• Runtime get_template("base.html").origin.name resolves to the adopted course-platform base; repository tests reject restoration of either competing fallback file and bind adopted destinations to their current reviewed overlay ledger entries plus the fixed source hashes.

Automated verification on this exact candidate

• Focused Django composition/readability/source set: 14 passed.
• Dedicated Align the homepage and events with the adopted CMP visual system #130 Playwright matrix: 6 passed.
• make test-core: 770 passed.
• make test-content: 96 passed.
• make check-links: 7 passed.
• make check-seo: 76 passed.
• make test-playwright-core: 102 passed, 26 deselected, with no console/network/teardown failure.
• make lint format-check typecheck django-check migrations-check: pass; 432 files formatted, 332 typed files, management OpenAPI/parity current, no model drift.
• git diff --check: pass.

Browser and visual evidence

Fresh evidence is under .tmp/screenshots/issue-130/ only:

• before: home/events/detail at desktop/mobile in light/dark plus /unified/ equivalence;
• after: home/events/detail at 1440×900 and 390×844 in light/dark, /unified/ equivalence, desktop/mobile empty/optional/404 states, 320px reflow, 200% zoom, reduced motion, theme persistence, keyboard skip/focus, local-only assets, and mobile no-JavaScript rendering;
• CMP attribution JSON and before/after contact sheets.

I opened and inspected all 27 after PNGs plus the complete before/after comparison. They show real pages, the intended restrained hierarchy, visible breadcrumb, distinct event-type icons, coherent light/dark surfaces, useful no-JS HTML, and no debug/404 leakage outside the deliberate 404 evidence, clipping, or horizontal overflow. Sorted SHA-256 serialization of the 27 after PNG paths is 7a46db50dc954529990e4dcca1cccdcc2eb714f8eb7d6eada394cb283dd6090d; attribution JSON is afaf23f883d1bdbc049c295cbbfdc887bda472fbd76053f7ad44f9338f716041.

Frozen candidate identity

Exact UTF-8 serialization below, including the final newline, hashes to 48e05f5684f5c8494c81eec51984b3c3206506ec75c19914f0e6fb607d6faf2b:

base	4cad269d576217679ac6c9ce02286e7939d8b043
file	100644	70c06f710aca41c1a72f173d96169dcd6b63a7f1e669cf815d844c03ebb376df	accounts/tests/test_single_identity.py
file	100644	be76158864fdf23259eb9727b31c92b424c5ff8a4895d45f7688bbe8739af201	conftest.py
file	100644	d76afc0792ff67dbcd3a9a503f1224669e22025aeac0b0ebcd82f8a7935280c9	core/accessibility_registry.py
deleted	73836924c779171f061560bda519d9187aa6c84259cbd05ff41ec4b47f567958	core/static/core/site.css
file	100644	07aa28d4b918cea55d6cafeb3f2aaaddb5e1e4929bd0501acb7e6ecb9b220f0e	core/tests/test_development_seo.py
file	100644	6f8712b143b6abbe6c67e92360f88f87ce1d7857ef02667d928d4d2b85e85690	core/tests/test_home_events_cmp_composition.py
file	100644	d42b2a24bc489d591e465afef3dc714070ad06a949d817d9283a66ecef6fcd6e	core/tests/test_version_surfaces.py
file	100644	79e1ad83e72c627986249ed53db03516e324d96f58eecebbab2c8311542d9283	playwright_tests/test_home_events_design_parity.py
deleted	791745c6bc42ec748954824c9fea12aed2f689e6d4a91049488251a14ffe5497	templates/base.html
file	100644	93fcb9237994300283970fb5449ef768a7ca527458da09596075bc958c7e01a1	templates/core/home.html
file	100644	99b4aac9a499736cdb015cb9b10a1603e4a05168606b9b9a2647cf9457634771	templates/public/_event.html
file	100644	2d4047410dfb480ec6dc7886da6f896d94b1ef3ba55ecd9c1dd243da315fb081	templates/public/_event_meta.html
file	100644	d33078e420d0835bd2000b470532d18f3d44d0d4c7288a4e9e41049cabc102e9	templates/public/event_detail.html
file	100644	287490cc8335edc35f60f31c3fccf022b9efaffba3f42a2dffc5adb3d160f4f1	templates/public/events.html

HEAD, local origin/main, and remote refs/heads/main were all still exact 4cad269d576217679ac6c9ce02286e7939d8b043 at freeze time. The candidate is uncommitted and unpushed for the independent tester and PM stages.

[HUMAN] Owner visual acceptance remains a separate required criterion after independent QA; engineering does not self-accept it.