feat: update globals.css and page.tsx for light mode
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
22ad91a8ff
commit
c0c5caa4ff
|
|
@ -22,12 +22,17 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
background-color: #18212f;
|
||||
color: #f1f5f9;
|
||||
background-color: #f0f4f8;
|
||||
color: #1a202c;
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.dark body {
|
||||
background-color: #18212f;
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Primary button – orange, darkens on hover */
|
||||
.btn-primary {
|
||||
|
|
@ -42,10 +47,12 @@ body {
|
|||
/* Secondary button – outlined, fills subtly on hover */
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center rounded-xl
|
||||
border border-gray-600 text-slate-300 font-semibold
|
||||
border border-slate-300 text-slate-700 font-semibold
|
||||
transition-all duration-200
|
||||
hover:bg-white/5 hover:border-gray-400 hover:text-white
|
||||
active:scale-[0.98];
|
||||
hover:bg-slate-100 hover:border-slate-400 hover:text-slate-900
|
||||
active:scale-[0.98]
|
||||
dark:border-gray-600 dark:text-slate-300
|
||||
dark:hover:bg-white/5 dark:hover:border-gray-400 dark:hover:text-white;
|
||||
}
|
||||
|
||||
/* Small nav button */
|
||||
|
|
@ -68,10 +75,14 @@ body {
|
|||
|
||||
/* Dot matrix – default background pattern */
|
||||
.bg-grid {
|
||||
background-image: radial-gradient(rgba(249, 115, 22, 0.15) 1px, transparent 1px);
|
||||
background-image: radial-gradient(rgba(249, 115, 22, 0.06) 1px, transparent 1px);
|
||||
background-size: 28px 28px;
|
||||
}
|
||||
|
||||
.dark .bg-grid {
|
||||
background-image: radial-gradient(rgba(249, 115, 22, 0.15) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
/* Alt: subtle line grid */
|
||||
.bg-grid-lines {
|
||||
background-image: linear-gradient(rgba(249, 115, 22, 0.05) 1px, transparent 1px),
|
||||
|
|
@ -112,23 +123,23 @@ body {
|
|||
.legal-content h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #f1f5f9;
|
||||
color: #1a202c;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-top: 2rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid #2d3748;
|
||||
border-bottom: 1px solid #cbd5e0;
|
||||
}
|
||||
.legal-content h3 {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #fb923c;
|
||||
color: #ea6c00;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 0.4rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.legal-content p {
|
||||
color: #94a3b8;
|
||||
color: #4a5568;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.925rem;
|
||||
|
|
@ -139,7 +150,7 @@ body {
|
|||
margin: 0.75rem 0 1rem 0;
|
||||
}
|
||||
.legal-content ul li {
|
||||
color: #94a3b8;
|
||||
color: #4a5568;
|
||||
font-size: 0.925rem;
|
||||
line-height: 1.75;
|
||||
padding-left: 1.25rem;
|
||||
|
|
@ -157,19 +168,19 @@ body {
|
|||
background: #f97316;
|
||||
}
|
||||
.legal-content a {
|
||||
color: #60a5fa;
|
||||
color: #2563eb;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
.legal-content a:hover {
|
||||
color: #fb923c;
|
||||
color: #f97316;
|
||||
}
|
||||
.legal-content strong {
|
||||
color: #e2e8f0;
|
||||
color: #1a202c;
|
||||
font-weight: 600;
|
||||
}
|
||||
.legal-content .note {
|
||||
background: #1e2a3d;
|
||||
background: #e8eef4;
|
||||
border-left: 3px solid #f97316;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
|
|
@ -180,17 +191,49 @@ body {
|
|||
font-size: 0.875rem !important;
|
||||
}
|
||||
|
||||
/* Legal pages – dark mode overrides */
|
||||
.dark .legal-content h2 {
|
||||
color: #f1f5f9;
|
||||
border-bottom-color: #2d3748;
|
||||
}
|
||||
.dark .legal-content h3 {
|
||||
color: #fb923c;
|
||||
}
|
||||
.dark .legal-content p,
|
||||
.dark .legal-content ul li {
|
||||
color: #94a3b8;
|
||||
}
|
||||
.dark .legal-content a {
|
||||
color: #60a5fa;
|
||||
}
|
||||
.dark .legal-content a:hover {
|
||||
color: #fb923c;
|
||||
}
|
||||
.dark .legal-content strong {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
.dark .legal-content .note {
|
||||
background: #1e2a3d;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #18212f;
|
||||
background: #e8eef4;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2d3748;
|
||||
background: #94a3b8;
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-track {
|
||||
background: #18212f;
|
||||
}
|
||||
.dark ::-webkit-scrollbar-thumb {
|
||||
background: #2d3748;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import Footer from "@/components/Footer";
|
|||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="min-h-screen bg-[#18212f]">
|
||||
<main className="min-h-screen bg-[#f0f4f8] dark:bg-[#18212f]">
|
||||
<Header />
|
||||
<Hero />
|
||||
<TaglineBanner />
|
||||
|
|
|
|||
Loading…
Reference in New Issue