About: deeper, alternating dark-mode section backgrounds
Replaces the previous near-uniform dark surfaces (#0e1218 / #11151c) with genuinely dark, alternating tones plus a subtle world-map texture on two sections, so the page reads as an editorial document in dark mode the same way it does in light mode. Section background mapping (dark mode) Section Was Now ----------------------- ---------- ------------ Hero #0a0c14 #0a0c14 (unchanged) Three steps #11151c #0a0c14 + texture Two ways to get paid #0e1218 #13181f + texture Frequently asked #11151c #0a0c14 Pick the side #0e1218 #13181f The two alternating tones (#0a0c14 / #13181f) preserve the cream/white rhythm from light mode. Sections 2 and 3 gain a dark-only world-map background image at 5-6% opacity (the same texture used in the hero) so they don't read as flat slabs. The texture is gated behind 'hidden dark:block' so it has zero impact on the light-mode rendering. Card surface lifted bg-[#1a1f29] → bg-[#1c2230] across StepCard, RailCard, GuideCard, the FAQ accordion card-row (reference mode), the FAQ card variant, and the FAQ tab pill. Hover-state for the tab pill follows from #222937 to #252b3a. Net effect: cards now sit ~12 lightness above the deepest section background and ~6 above the lifted one, keeping clear elevation against both tones.
This commit is contained in:
mkfain
@@ -136,7 +136,7 @@ export function HelpFAQSection({
|
||||
'rounded-full px-4 py-2 text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
|
||||
active
|
||||
? 'bg-primary text-primary-foreground shadow-sm'
|
||||
: 'bg-white dark:bg-[#1a1f29] text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:bg-gray-50 dark:hover:bg-[#222937]',
|
||||
: 'bg-white dark:bg-[#1c2230] text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:bg-gray-50 dark:hover:bg-[#252b3a]',
|
||||
)}
|
||||
aria-pressed={active}
|
||||
>
|
||||
@@ -220,7 +220,7 @@ function FAQAccordionItem({
|
||||
return (
|
||||
<AccordionItem
|
||||
value={item.id}
|
||||
className="group relative border-b-0 rounded-lg bg-white dark:bg-[#1a1f29] border border-gray-200 dark:border-white/10 shadow-sm mb-3 overflow-hidden transition-colors hover:border-primary/40 data-[state=open]:border-primary/50 data-[state=open]:shadow-md"
|
||||
className="group relative border-b-0 rounded-lg bg-white dark:bg-[#1c2230] border border-gray-200 dark:border-white/10 shadow-sm mb-3 overflow-hidden transition-colors hover:border-primary/40 data-[state=open]:border-primary/50 data-[state=open]:shadow-md"
|
||||
>
|
||||
{/* Left accent rule: orange when open, transparent otherwise */}
|
||||
<span
|
||||
@@ -260,7 +260,7 @@ function FAQAccordionItem({
|
||||
*/
|
||||
function FAQCard({ item }: { item: FAQItem }) {
|
||||
return (
|
||||
<div className="mb-6 break-inside-avoid rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#1a1f29] shadow-sm">
|
||||
<div className="mb-6 break-inside-avoid rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#1c2230] shadow-sm">
|
||||
<Accordion type="single" collapsible>
|
||||
<AccordionItem value={item.id} className="border-b-0">
|
||||
<AccordionTrigger className="text-left font-display font-semibold text-gray-900 dark:text-white text-lg leading-snug hover:no-underline px-5 py-4 gap-3">
|
||||
|
||||
+31
-11
@@ -246,11 +246,21 @@ export function AboutPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── 2. How it works, in three steps (light cream / dark slate) ──── */}
|
||||
{/* ── 2. How it works, in three steps (light cream / dark navy) ──── */}
|
||||
<section
|
||||
id="how-it-works"
|
||||
className="relative bg-[#faf8f4] dark:bg-[#11151c] py-20 md:py-28 overflow-hidden"
|
||||
className="relative bg-[#faf8f4] dark:bg-[#0a0c14] py-20 md:py-28 overflow-hidden"
|
||||
>
|
||||
{/* Subtle world-map texture in dark mode only */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="hidden dark:block absolute inset-0 opacity-[0.06] pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: "url('/about/world-map-bg.png')",
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
/>
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<SectionHeader
|
||||
eyebrow="How it works"
|
||||
@@ -284,8 +294,18 @@ export function AboutPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── 3. Two ways to get paid (white / dark slate) ────────────────── */}
|
||||
<section className="relative bg-white dark:bg-[#0e1218] py-20 md:py-28 overflow-hidden">
|
||||
{/* ── 3. Two ways to get paid (white / dark navy variant) ─────────── */}
|
||||
<section className="relative bg-white dark:bg-[#13181f] py-20 md:py-28 overflow-hidden">
|
||||
{/* Subtle world-map texture in dark mode only */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="hidden dark:block absolute inset-0 opacity-[0.05] pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: "url('/about/world-map-bg.png')",
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
/>
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<SectionHeader
|
||||
eyebrow="Bitcoin · One QR, two options"
|
||||
@@ -406,10 +426,10 @@ export function AboutPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── 4. Need help? FAQ (cream / dark slate, integrated as three chapters) ───── */}
|
||||
{/* ── 4. Need help? FAQ (cream / dark navy, integrated as three chapters) ───── */}
|
||||
<section
|
||||
id="faq"
|
||||
className="bg-[#f5f1eb] dark:bg-[#11151c] py-20 md:py-28 scroll-mt-16"
|
||||
className="bg-[#f5f1eb] dark:bg-[#0a0c14] py-20 md:py-28 scroll-mt-16"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<SectionHeader
|
||||
@@ -432,8 +452,8 @@ export function AboutPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── 5. Pick the side you're on (white / dark slate) ─────────────── */}
|
||||
<section className="bg-white dark:bg-[#0e1218] py-20 md:py-28">
|
||||
{/* ── 5. Pick the side you're on (white / dark navy variant) ────────── */}
|
||||
<section className="bg-white dark:bg-[#13181f] py-20 md:py-28">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<SectionHeader
|
||||
eyebrow="Guides"
|
||||
@@ -659,7 +679,7 @@ interface StepCardProps {
|
||||
|
||||
function StepCard({ number, image, imageAlt, title, body }: StepCardProps) {
|
||||
return (
|
||||
<div className="relative bg-white dark:bg-[#1a1f29] rounded-2xl overflow-hidden border border-gray-200 dark:border-white/10 shadow-sm transition-all duration-300 motion-safe:hover:-translate-y-1 hover:shadow-md dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
|
||||
<div className="relative bg-white dark:bg-[#1c2230] rounded-2xl overflow-hidden border border-gray-200 dark:border-white/10 shadow-sm transition-all duration-300 motion-safe:hover:-translate-y-1 hover:shadow-md dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.4)]">
|
||||
<div className="aspect-[4/3] bg-[#0a0c14] relative overflow-hidden">
|
||||
<img
|
||||
src={image}
|
||||
@@ -722,7 +742,7 @@ function RailCard({
|
||||
accent === 'orange' ? 'text-emerald-600' : 'text-indigo-600';
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#1a1f29] shadow-sm overflow-hidden flex flex-col">
|
||||
<div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#1c2230] shadow-sm overflow-hidden flex flex-col">
|
||||
{/* Gradient header strip */}
|
||||
<div className={cn('bg-gradient-to-r px-6 py-5 text-white', headerGradient)}>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
@@ -821,7 +841,7 @@ function GuideCard({
|
||||
return (
|
||||
<Link
|
||||
to={to}
|
||||
className="group rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#1a1f29] shadow-sm overflow-hidden flex flex-col transition-all duration-300 motion-safe:hover:-translate-y-1 hover:shadow-xl dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.4)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
|
||||
className="group rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#1c2230] shadow-sm overflow-hidden flex flex-col transition-all duration-300 motion-safe:hover:-translate-y-1 hover:shadow-xl dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.4)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
|
||||
>
|
||||
{/* Image header */}
|
||||
<div className="aspect-[16/9] bg-gray-100 dark:bg-[#0a0c14] relative overflow-hidden">
|
||||
|
||||
Reference in New Issue
Block a user