Skip to content

style(landing-page): improve dotted background visibility with transp… #1187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Aditya30ag wants to merge 1 commit into
base: main
Choose a base branch
from
Open

style(landing-page): improve dotted background visibility with transp… #1187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions landing-page/src/Pages/Landing page/Home1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ const ShuffleHero = () => {
};

return (
<section className="w-full px-8 py-12 grid grid-cols-1 md:grid-cols-2 items-center gap-8 max-w-6xl mx-auto bg-white dark:bg-black transition-colors duration-300">
<>
<div className="dotted-background" />
<section className="w-full px-8 py-12 grid grid-cols-1 md:grid-cols-2 items-center gap-8 max-w-6xl mx-auto bg-transparent dark:bg-transparent transition-colors duration-300 relative z-10">
<div className="font-['Inter',_sans-serif]">
<motion.span
initial={{ opacity: 0, y: 10 }}
Expand Down Expand Up @@ -74,7 +76,8 @@ const ShuffleHero = () => {
</div>
</div>
<ShuffleGrid />
</section>
</section>
</>
);
};

Expand Down
16 changes: 16 additions & 0 deletions landing-page/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,22 @@
@apply bg-background text-foreground;
}

/* Dotted Background */
.dotted-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

White dots are invisible in light mode.

rgba(255, 255, 255, 0.3) renders white dots on top of the light-mode body background (--background: 0 0% 100%), making them completely invisible. The dotted effect only works in dark mode. For light mode, a dark dot color is needed.

🎨 Proposed fix — differentiate light vs dark mode dot colors 
  .dotted-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
-   background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
+   background-image: radial-gradient(circle, rgba(0, 0, 0, 0.15) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: -1;
  }

  .dark .dotted-background {
-   background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
+   background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  }
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@landing-page/src/index.css` at line 83, The radial-gradient uses a fixed
white dot color (rgba(255,255,255,0.3)) which is invisible on the light-mode
background; change the dot color to a CSS custom property (e.g., --dot-color)
and update the radial-gradient call (the background-image rule) to use
var(--dot-color) instead of the hardcoded rgba; then define --dot-color for
light and dark themes (or via prefers-color-scheme / [data-theme="dark"]) so
light mode uses a semi-transparent dark dot (e.g., a low-alpha black) and dark
mode keeps a light dot.

background-size: 20px 20px;
z-index: -1;
}

.dark .dotted-background {
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
}

/* Starry Background */
.starry-background {
position: fixed;
Expand Down