fix: show hero text on mobile by overriding scroll-driven opacity

[simonheimlicher]

Summary

• On mobile (< 768px), the hero scroll container has height: auto (shorter than viewport)
• Framer Motion's scrollYProgress reports ~1 since the container fits within the viewport
• This causes textFade = 0, making eyebrow, description, Roots/Branches/Leaves, and CTA invisible
• Fix: opacity: 1 !important on .hero-text-col > * in the mobile media query, since mobile doesn't use the scroll animation anyway

Test plan

• 400x690 — all hero content now visible (eyebrow, headline, description, features, CTA)
• 375x812 — same, all content visible
• Desktop 768px+ — scroll animation still works (CSS rule scoped to max-width: 767px)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
outcomeengineering	Ready	Preview, Comment	Feb 26, 2026 2:23am

[gemini-code-assist]

Summary of Changes

Hello @simonheimlicher, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a critical display bug on mobile devices where the hero section's text content was not visible. The problem stemmed from an interaction with Framer Motion's scroll-driven opacity animation, which incorrectly calculated opacity as zero on mobile due to the shorter scroll container. The fix ensures that the hero text is always visible on mobile by applying a targeted CSS override, while preserving the scroll animation functionality on desktop.

Highlights

• Mobile Hero Text Visibility Fix: Resolved an issue where hero text content (eyebrow, description, features, CTA) was invisible on mobile devices (< 768px) due to an incorrect opacity calculation by Framer Motion's scrollYProgress.
• CSS Opacity Override: Implemented a targeted CSS rule opacity: 1 !important for .hero-text-col > * within a mobile media query to ensure hero content is always visible on smaller screens, without affecting desktop scroll animations.

Changelog

• src/app/globals.css
  • Added a CSS rule to override Framer Motion's inline opacity for hero text elements on mobile.

Activity

• No specific activity has been recorded for this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request aims to fix an issue on mobile where hero text is invisible due to a scroll-driven animation. While the approach of overriding the opacity is correct, the current implementation applies this change globally, which would break the animation on desktop. I've added a critical review comment with a code suggestion to scope the CSS rule to mobile viewports using a media query, aligning the code with the intent described in the pull request.

[gemini-code-assist]

The PR description mentions that this override should only apply on mobile (e.g., max-width: 767px), but the CSS is currently being applied globally. This will break the scroll-driven opacity animation on desktop. To fix this, the rule should be wrapped in a media query.

  /* Override Framer Motion inline opacity — on mobile the scroll container is
     shorter than the viewport so scrollYProgress≈1 and textFade=0 */
  @media (max-width: 767px) {
    .hero-text-col > * {
      opacity: 1 !important;
    }
  }