[codex] Merge service proof style into Radical Codes site

[Radical-Coder]

Summary

• revamp the Radical Codes home page around the service-site visual system: dark industrial palette, bold direct copy, proof-first positioning, and the AI rescue CTA as the primary path
• add fresh proof screenshots from AutoMarkets, MyGradHub, Radical Workflow, and internal AI workflow/dashboard surfaces
• address CodeRabbit review nits on workflow controls and visually-hidden CSS
• port the durable consolidation work from older PRs: robots, sitemap, manifest, canonical/social metadata, and JSON-LD schema adapted to the current two-page site
• move Vite to devDependencies, upgrade to Vite 8, add check, and add rewritten Vitest contract tests for the current site instead of the old [codex] Merged Radical Codes preview #9 page model

Verification

• npm test
• npm run check
• git diff --check
• JSON-LD parse check for both index.html and ai-app-rescue/index.html
• in-app Browser QA at http://127.0.0.1:4179/: desktop home render, proof-wall render, workflow button interaction, mobile menu interaction, /ai-app-rescue/ smoke load, manifest/sitemap serving, no console warnings/errors, no horizontal overflow

Consolidation notes

• This PR is now the intended survivor branch for the Radical Codes site revamp.
• PRs [codex] Add site sharing metadata #1-[codex] Merged Radical Codes preview #9 are superseded once this lands; their durable metadata/tooling pieces have been adapted here.
• PR CodeRabbit Generated Unit Tests: Add unit tests #13 should be closed after this lands; its generated tests targeted the older [codex] Merged Radical Codes preview #9 IA and have been replaced by current site contract tests here.

Summary by CodeRabbit

• New Features

  • Added a dedicated AI Rescue landing page with SEO-rich static content, proof video, best-fit grid, call-output checklist, risk-scan console, proof gallery, related work ledger, and booking CTAs.
  • Redesigned the main marketing/portfolio landing page with refreshed sections, updated CTAs, and an interactive workflow tab experience.
  • Added a mobile navigation menu with accessible open/close behavior (including keyboard support).

• Improvements

  • Introduced a new dark-themed, responsive stylesheet with consistent UI “card” styling and reduced-motion support.
  • Added SEO/metadata infrastructure: sitemap, robots rules, and a web app manifest.

• Tests / Quality

  • Added automated checks for HTML metadata, package configuration, and required public files.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: da82e01d-3e72-41f2-a741-52a45ab6c8ea

📥 Commits

Reviewing files that changed from the base of the PR and between 1f39d98 and 59bb866.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (10)

• ai-app-rescue/index.html
• index.html
• package.json
• public/robots.txt
• public/site.webmanifest
• public/sitemap.xml
• styles.css
• tests/html-metadata.test.js
• tests/package-json.test.js
• tests/public-files.test.js

✅ Files skipped from review due to trivial changes (4)

• public/robots.txt
• public/sitemap.xml
• tests/package-json.test.js
• public/site.webmanifest

🚧 Files skipped from review as they are similar to previous changes (3)

• ai-app-rescue/index.html
• styles.css
• index.html

---

📝 Walkthrough

Walkthrough

This PR introduces a comprehensive site redesign by extracting a shared dark-themed stylesheet, rebuilding the main landing page with new service sections and interactive workflow controls, and creating a new AI Rescue vertical landing page. The main site now routes CTAs to the new page. Vite is configured to output both pages as separate build artifacts. Test suites validate HTML metadata, package.json structure, and SEO discovery files.

Changes

Site redesign, dual-page build, shared styling, and comprehensive test coverage

Layer / File(s)	Summary
Build config, package setup, and discovery files vite.config.js, package.json, public/robots.txt, public/sitemap.xml, public/site.webmanifest	Vite config extended to build both index.html and ai-app-rescue/index.html as separate Rollup entry points using resolve(__dirname, ...) path resolution. Package.json updated with check script (chains npm run build and npm audit --audit-level=high), test script (vitest run), and restructured dependencies (vite and vitest moved to devDependencies, Node engine constraint added: `^20.19.0
Shared stylesheet with design system and responsive layout styles.css	New 1416-line stylesheet introduces dark color scheme CSS variables, global element resets, accessibility utilities (.sr-only), and shared component patterns used by both landing pages. Implements sticky header with brand/navigation/CTA button styling; responsive hero section with grid layout and decorative accents; service/diagnostic card grids with featured variants; console/review overlay panels; process track and interactive workflow demo controls; pricing table with package rows; fit assessment panels (good/bad variants); contact callout with gradients; and site footer. Includes responsive breakpoints for tablet (max-width: 1120px), mobile (max-width: 880px), and small mobile (max-width: 560px), plus motion-preference support (prefers-reduced-motion: reduce disables animations and smooth scrolling).
Main site redesign with new sections and interactive controls index.html	Head updated to link shared styles.css, refreshed metadata/Open Graph/Twitter tags, added JSON-LD structured data, and manifest reference. Header rebuilt with "AI Rescue" nav link; both header CTA and hero primary "Start" button now route to /ai-app-rescue/. Page content reorganized with: diagnostic headline ("You probably do not need a chatbot."), three-column service cards ("Three ways I help"), proof showcase grid with recent work screenshots (AutoMarkets, MyGradHub, Radical Workflow, internal projects), interactive process track with "Example lanes" workflow tab controls that update demo copy via [data-workflow] click handlers and a workflows mapping, pricing/package grid, fit assessment panels (Good Fit / Not a Fit), contact callout with composed mailto, and refreshed footer. Client-side JavaScript manages mobile menu (toggle aria-expanded, hidden state, Escape key handler, close-on-link-click) and workflow tab switching (update multiple [data-*] targets).
AI Rescue vertical landing page with embedded styling and content ai-app-rescue/index.html	New standalone vertical landing page. Head includes Open Graph/Twitter metadata for social sharing, canonical URL, author/manifest references, and font preloads. Embedded ~800-line dark-themed stylesheet includes design tokens, component styling (hero, cards, console, tables, CTAs), and responsive media queries. Body contains sticky header with brand wordmark, anchor navigation, and external Upwork booking CTA; hero section with headline/lede/video proof block with poster and captions; six sequential content sections: Best Fit (4-card scenario grid), Call Output (3-step BEFORE/DURING/AFTER protocol with deliverables), Risk Scan (console-style triage panel with launch-risk rows and severity pills), Proof Surface (2-card image gallery with captions), Related Work (ledger-style table with project entries and mixed internal/external links), and Book CTA (Upwork booking + email contact options); footer with brand tagline, contact links, and copyright.
Test suites for HTML metadata, package.json, and SEO discovery files tests/html-metadata.test.js, tests/package-json.test.js, tests/public-files.test.js	Three Vitest test suites added to validate site structure. html-metadata.test.js includes helpers to extract meta/link values (attribute-order-agnostic), parse JSON-LD, and verify image files exist in public/. Tests validate home page metadata (canonical/manifest/author, Open Graph/Twitter images with dimensions/alt, JSON-LD graph, aria-pressed role usage) and AI Rescue page metadata (canonical/manifest/author, image metadata, JSON-LD Service/WebPage fields). package-json.test.js asserts script strings, confirms no runtime dependencies, verifies vite ^8.* and vitest in devDependencies, and validates engines.node range. public-files.test.js verifies robots.txt content, sitemap.xml structure and dates, and site.webmanifest JSON fields.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~28 minutes

Poem

🐇 A stylesheet hops free, shared and bright,
Dark tokens and cards in responsive delight!
The main site transforms with workflows that click,
AI Rescue lands pristine with embedded tricks—
Tests guard the gates with metadata might! 📋✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: merging the service proof styling system into the Radical Codes site, which aligns with the primary objective of the PR redesign.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/ai-app-rescue-page

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

index.html (1)

373-380: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

Complete ARIA tab behavior or remove tab roles.

You’re declaring a tablist/tab pattern, but interaction is click-only. Add arrow-key navigation + roving tabindex + panel association (aria-controls/aria-labelledby), or switch to plain buttons without tab roles to avoid misleading assistive tech.

Also applies to: 546-562

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@index.html` around lines 373 - 380, The workflow-controls div and its tab
buttons are declaring ARIA tab roles but lack the complete tab pattern
implementation. Either implement the full ARIA tab behavior by adding JavaScript
to handle arrow-key navigation between the buttons, implementing roving tabindex
to manage focus, and adding aria-controls attributes on the tab buttons to
associate them with their corresponding workflow-demo panels, or alternatively
remove the role="tablist" from the workflow-controls container and role="tab"
from each button element and treat them as standard buttons with aria-selected
attributes if keyboard navigation is not needed.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@styles.css`:
- Line 56: The text-rendering property value `optimizeLegibility` uses mixed
case which violates stylelint's keyword-case rule requiring all CSS keywords to
be lowercase. Change `optimizeLegibility` to `optimizelegibility` to comply with
the linting rule. Additionally, ensure that the `currentColor` keyword mentioned
in the comment (appearing at line 382) is also normalized to lowercase
`currentcolor` for consistency across the stylesheet.
- Line 127: The clip property with rect(0, 0, 0, 0) is deprecated and will cause
future breakage. Replace the deprecated clip: rect(0, 0, 0, 0); declaration with
clip-path: inset(100%); to achieve the same visually-hidden effect. You can
optionally keep the clip property as a fallback for older browsers, but
clip-path should be the primary approach used in the assistive-utility styles.

---

Nitpick comments:
In `@index.html`:
- Around line 373-380: The workflow-controls div and its tab buttons are
declaring ARIA tab roles but lack the complete tab pattern implementation.
Either implement the full ARIA tab behavior by adding JavaScript to handle
arrow-key navigation between the buttons, implementing roving tabindex to manage
focus, and adding aria-controls attributes on the tab buttons to associate them
with their corresponding workflow-demo panels, or alternatively remove the
role="tablist" from the workflow-controls container and role="tab" from each
button element and treat them as standard buttons with aria-selected attributes
if keyboard navigation is not needed.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a69c8eaf-414d-4586-9ec3-980a4ef5a5df

📥 Commits

Reviewing files that changed from the base of the PR and between a6f62a4 and 1f39d98.

⛔ Files ignored due to path filters (6)

• public/assets/service-proof/automarkets-live-home.png is excluded by !**/*.png
• public/assets/service-proof/internal-ai-admin-dashboard.png is excluded by !**/*.png
• public/assets/service-proof/internal-ai-workflow-output.png is excluded by !**/*.png
• public/assets/service-proof/mygradhub-live-mvp.png is excluded by !**/*.png
• public/assets/service-proof/radical-workflow-local.png is excluded by !**/*.png
• public/assets/service-site/reviewable-workflow-command-center.png is excluded by !**/*.png

📒 Files selected for processing (2)

• index.html
• styles.css