coryHawkvelt/gatehouse-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: UI Light Mode

Browse Source
This commit is contained in:
James Bhattarai
2026-03-23 22:20:52 +05:45
parent 7c68886e20
commit 7003bbf8c6
2 changed files with 50 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+44 -43
View File
@@ -11,72 +11,73 @@
@layer base {
:root {
/* Core palette - Deep slate with teal accent */
--background: 210 20% 98%;
--foreground: 222 47% 11%;
/* Core palette - Light blue-gray with teal accent */
--background: 216 22% 94%; /* cool blue-gray — cards lift clearly off this */
--foreground: 222 47% 9%; /* near-black navy */
--card: 0 0% 100%;
--card-foreground: 222 47% 11%;
--card: 0 0% 100%; /* pure white — 6% lightness gap over bg */
--card-foreground: 222 47% 9%;
--popover: 0 0% 100%;
--popover-foreground: 222 47% 11%;
--popover-foreground: 222 47% 9%;
/* Primary - Deep navy for trust */
--primary: 222 47% 20%;
--primary-foreground: 210 40% 98%;
/* Primary — teal, fully saturated, dark enough to read on white */
--primary: 173 65% 36%;
--primary-foreground: 0 0% 100%;
/* Secondary - Soft slate */
--secondary: 215 20% 95%;
--secondary-foreground: 222 47% 20%;
/* Secondary — cool blue-gray, clearly darker than bg */
--secondary: 216 20% 91%;
--secondary-foreground: 222 47% 18%;
/* Muted - Subtle backgrounds */
--muted: 215 20% 96%;
--muted-foreground: 215 16% 47%;
/* Muted — noticeably darker than secondary, used for section bg */
--muted: 216 18% 88%;
--muted-foreground: 222 18% 42%;
/* Accent - Teal for actions and highlights */
--accent: 173 58% 39%;
/* Accent — same teal as primary */
--accent: 173 65% 36%;
--accent-foreground: 0 0% 100%;
/* Semantic colors */
--destructive: 0 72% 51%;
/* Semantic */
--destructive: 0 72% 48%;
--destructive-foreground: 0 0% 100%;
--success: 152 69% 31%;
--success: 152 60% 30%;
--success-foreground: 0 0% 100%;
--warning: 38 92% 50%;
--warning: 38 90% 48%;
--warning-foreground: 0 0% 100%;
--info: 199 89% 48%;
--info: 199 80% 44%;
--info-foreground: 0 0% 100%;
/* UI elements */
--border: 214 32% 91%;
--input: 214 32% 91%;
--ring: 173 58% 39%;
/* UI chrome */
--border: 216 18% 84%; /* clearly visible on white card */
--input: 216 18% 92%;
--ring: 173 65% 36%;
--radius: 0.5rem;
/* Sidebar - Darker for visual hierarchy */
--sidebar-background: 222 47% 11%;
--sidebar-foreground: 215 20% 85%;
--sidebar-primary: 173 58% 45%;
/* Sidebar */
--sidebar-background: 222 30% 95%;
--sidebar-foreground: 222 47% 18%;
--sidebar-primary: 173 65% 36%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 222 40% 18%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 222 40% 20%;
--sidebar-ring: 173 58% 45%;
--sidebar-muted: 215 16% 55%;
--sidebar-accent: 216 20% 88%;
--sidebar-accent-foreground: 222 47% 9%;
--sidebar-border: 216 18% 84%;
--sidebar-ring: 173 65% 36%;
--sidebar-muted: 222 20% 48%;
/* Custom gradients and effects */
--gradient-brand: linear-gradient(135deg, hsl(222 47% 20%), hsl(222 47% 11%));
--gradient-accent: linear-gradient(135deg, hsl(173 58% 39%), hsl(173 58% 32%));
--gradient-subtle: linear-gradient(135deg, hsl(210 20% 98%), hsl(215 20% 96%));
/* Gradients */
--gradient-brand: linear-gradient(135deg, hsl(173 65% 36%), hsl(173 65% 28%));
--gradient-accent: linear-gradient(135deg, hsl(173 65% 36%), hsl(173 65% 28%));
--gradient-subtle: linear-gradient(135deg, hsl(216 28% 97%), hsl(216 18% 93%));
--shadow-sm: 0 1px 2px 0 hsl(222 47% 11% / 0.05);
--shadow-md: 0 4px 6px -1px hsl(222 47% 11% / 0.1), 0 2px 4px -2px hsl(222 47% 11% / 0.1);
--shadow-lg: 0 10px 15px -3px hsl(222 47% 11% / 0.1), 0 4px 6px -4px hsl(222 47% 11% / 0.1);
--shadow-card: 0 1px 3px 0 hsl(222 47% 11% / 0.06), 0 1px 2px -1px hsl(222 47% 11% / 0.06);
/* Shadows — stronger alpha so cards lift off the bg */
--shadow-sm: 0 1px 2px 0 hsl(222 47% 9% / 0.10);
--shadow-md: 0 4px 6px -1px hsl(222 47% 9% / 0.14), 0 2px 4px -2px hsl(222 47% 9% / 0.10);
--shadow-lg: 0 10px 15px -3px hsl(222 47% 9% / 0.14), 0 4px 6px -4px hsl(222 47% 9% / 0.10);
--shadow-card: 0 2px 6px 0 hsl(222 47% 9% / 0.10), 0 1px 2px -1px hsl(222 47% 9% / 0.08);
}
.dark {
src/pages/marketing/HomePage.tsx
+5 -8
View File
@@ -80,14 +80,11 @@ export default function HomePage() {
return (
<>
{/* Hero Section */}
<section className="relative overflow-hidden">
{/* Background gradient */}
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-accent/5 pointer-events-none" />
<section className="relative overflow-hidden bg-card">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
<div className="text-center max-w-4xl mx-auto">
{/* Badge */}
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-sm font-medium mb-6">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6 border border-primary/20">
<ShieldCheck className="h-4 w-4" />
Security-first identity platform
</div>
@@ -95,7 +92,7 @@ return (
{/* Headline */}
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-foreground mb-6">
Enterprise Authentication,
<span className="text-accent block mt-2">Without the Enterprise Complexity</span>
<span className="text-primary block mt-2">Without the Enterprise Complexity</span>
</h1>
{/* Subheadline */}
@@ -423,13 +420,13 @@ return (
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link to="/register">
<Button size="lg" variant="secondary" className="gap-2">
<Button size="lg" variant="secondary" className="gap-2 bg-white text-primary hover:bg-white/90 font-semibold">
Start Free Trial
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
<Link to="/pricing">
<Button size="lg" variant="outline" className="text-primary-foreground border-primary-foreground/30 hover:bg-primary-foreground/10">
<Button size="lg" className="bg-transparent border-2 border-white text-white hover:bg-white/15 font-semibold">
View Pricing
</Button>
</Link>