Preserve all GrowWithHR functionality in visual-first mobile design - #188
Preserve all GrowWithHR functionality in visual-first mobile design#188hrtechifyed wants to merge 34 commits into
Conversation
Enforce light-on-dark and dark-on-light readability across non-report product surfaces. Dedicated automated color-contrast browser audit passed across mobile, tablet, and desktop. The repository-wide CI remains blocked by pre-existing compliance review dates that became overdue on 2026-08-22; no legal/compliance data was changed as part of this UI fix.
Align GrowWithHR public surfaces with the HRTechify visual system while preserving the interactive Intelligence Core graph, report layouts, and existing footer structure. Automated mobile/tablet/desktop color-contrast audit passed. Repository-wide CI remains blocked only by the existing overdue compliance-review dates, which were not modified by this UI change.
Add persistent Mobile / Tablet and Laptop / Desktop presentation modes with footer phone/laptop controls. Preserve the interactive Intelligence Core graph, existing footer content, and all report layouts. Dedicated Playwright/Axe contrast and view-mode persistence checks passed across mobile, tablet and desktop. Repository-wide CI remains blocked only by the pre-existing overdue compliance review dates, which are intentionally unchanged.
…sual Visual-first mobile experience with progressive detail
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
growwithhr-version2 | 4d5a068 | Aug 22 2026, 06:55 PM |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 4d5a068487
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| .home-page .hero-footer{order:2!important;padding:2px 6px 10px!important;text-align:center!important} | ||
| .home-page .core-title{font-size:1rem!important;color:#fff!important;margin:0 0 4px!important} | ||
| .home-page .core-subtitle{font-size:.76rem!important;line-height:1.4!important;color:#fff!important;margin:0!important} | ||
| .home-page .hero-sidebar{order:3!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%!important} |
There was a problem hiding this comment.
On mobile, this display:grid never makes the interactive controls available: js/site-shell.js dynamically appends css/26-founder-redesign.css and css/33-final-mobile-palette.css after styles.css, and their more-specific selectors hide .hero-sidebar with display:none!important for both compact and wide modes. As a result, the Company DNA, Growth Stage, and Recommendation Basis buttons remain inaccessible; the restoration must override or remove those later hiding rules.
Useful? React with 👍 / 👎.
| .home-page .secondary-btn{background:transparent!important;color:#fff!important;border-color:#fff!important} | ||
|
|
||
| /* Keep all buyer triggers; make them swipeable instead of deleting them. */ | ||
| .home-page .buyer-value-strip{display:flex!important;overflow-x:auto!important;gap:8px!important;padding:3px 0 8px!important;scroll-snap-type:x proximity!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important} |
There was a problem hiding this comment.
The swipeable buyer triggers cannot appear in the normal homepage flow because renderSiteShell() calls removeHomepageTriggerStrip() in js/site-shell.js, which removes every .buyer-value-strip node before this CSS can affect it. Mobile users therefore still lose all five triggers; the DOM-removal step must be removed or bypassed rather than relying on display:flex.
Useful? React with 👍 / 👎.
|
|
||
| .home-page .how-grid,.home-page .buyer-outcome-grid,.home-page .compliance-engine-flow,.home-page .buyer-trust-grid,.home-page .buyer-authority-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important} | ||
| .home-page .how-card,.home-page .buyer-card,.home-page .engine-step,.home-page .buyer-authority-card{display:block!important;padding:18px!important;min-height:0!important;border-radius:14px!important} | ||
| .home-page .how-card p,.home-page .buyer-card p,.home-page .engine-step p,.home-page .buyer-authority-card p{display:block!important;overflow:visible!important;font-size:.86rem!important;line-height:1.48!important} |
There was a problem hiding this comment.
For the default mode selected on mobile and tablet, the later-loaded css/33-final-mobile-palette.css applies higher-specificity display:none!important rules to the hero description, section introductions, card paragraphs, difference list, founder/product-boundary copy, summary text, and focus note. Consequently these new display:block declarations do not preserve the detailed content for mobile users; the compact-mode hiding rules in that final stylesheet must also be updated.
Useful? React with 👍 / 👎.
1 participant
Replaces the destructive mobile mockup adaptation with a non-destructive presentation-only layer. The complete main homepage markup, Intelligence Core graph, controls, buyer triggers, What You Get, current product questions, traceability flow, trust content, founder ownership, product boundaries, CTAs and footer all remain present and functional. Mobile changes only hierarchy, density and presentation. Desktop and report layouts are untouched.