From f36ccf7bdcf825f3b9b23ec5277279523fc97e21 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Wed, 10 Sep 2025 16:16:08 +0200
Subject: [PATCH] Fix colors

---
 web/components/home/home.tsx               |  20 +-
 web/components/love-page.tsx               |   2 +-
 web/components/nav/love-bottom-nav-bar.tsx |   3 +-
 web/styles/globals.css                     | 330 +++++++++++----------
 web/tailwind.config.js                     |   2 +-
 5 files changed, 183 insertions(+), 174 deletions(-)

diff --git a/web/components/home/home.tsx b/web/components/home/home.tsx
index 6c304a95..323a968a 100644
--- a/web/components/home/home.tsx
+++ b/web/components/home/home.tsx
@@ -1,7 +1,6 @@
 import {useEffect} from "react";
 import {Col} from "web/components/layout/col";
-import {Button} from "web/components/buttons/button";
-import {signupRedirect} from "web/lib/util/signup";
+import {SignUpButton} from "web/components/nav/love-sidebar";
 
 export function AboutBox(props: {
   title: string
@@ -48,18 +47,15 @@ export function LoggedOutHome() {
   return (
     <>
       <Col className="mb-4 gap-2 lg:hidden">
-        <Button
-          className="flex-1 fixed top-4 left-1/2 transform -translate-x-1/2 w-full"
-          color="gradient"
+        <SignUpButton
+          className="mt-4 flex-1 fixed bottom-[55px] w-full left-0 right-0 z-10 mx-auto px-4"
           size="xl"
-          onClick={signupRedirect}
-        >
-          Sign up
-        </Button>
+          text="Sign up"
+        />
         {/*<SignUpAsMatchmaker className="flex-1"/>*/}
       </Col>
       <h1
-        className="pt-12 pb-2 text-7xl md:text-8xl xs:text-6xl font-extrabold max-w-4xl leading-tight xl:whitespace-nowrap md:whitespace-nowrap text-center">
+        className="pt-12 pb-2 text-7xl md:text-8xl xs:text-6xl font-extrabold leading-tight xl:whitespace-nowrap md:whitespace-nowrap text-center">
         Don't Swipe.<br/>
         <span id="typewriter"></span>
         <span id="cursor" className="animate-pulse">|</span>
@@ -67,9 +63,9 @@ export function LoggedOutHome() {
       <div className="py-8"></div>
       <h3
         className="text-2xl font-bold text-center">
-        A focused platform for real connections—built with purpose and speed.
+        Find people who share your values, not just your photos.
       </h3>
-      <div className="w-full bg-gray-50 dark:bg-gray-900 py-8 mt-20">
+      <div className="w-full bg-gray-50 dark:bg-gray-950 py-8 mt-20">
         <div className="max-w-6xl mx-auto px-4">
           <div className="grid md:grid-cols-3 gap-8 text-center">
             <AboutBox title="Radically Transparent" text="No algorithms. Every profile searchable."/>
diff --git a/web/components/love-page.tsx b/web/components/love-page.tsx
index e863bad6..2d5b02db 100644
--- a/web/components/love-page.tsx
+++ b/web/components/love-page.tsx
@@ -99,7 +99,7 @@ export function LovePage(props: {
 
 const Profiles = { name: 'Profiles', href: '/', icon: SolidHomeIcon };
 const ProfilesHome = { name: 'Profiles', href: '/', icon: HomeIcon };
-const faq = { name: 'FAQ', href: '/md/faq', icon: QuestionMarkCircleIcon };
+const faq = { name: 'FAQ', href: '/faq', icon: SolidQuestionIcon };
 const About = { name: 'About', href: '/about', icon: SolidQuestionIcon };
 const AboutQuestionMark = { name: 'About', href: '/about', icon: QuestionMarkCircleIcon };
 const Signin = { name: 'Sign in', href: '/signin', icon: UserCircleIcon };
diff --git a/web/components/nav/love-bottom-nav-bar.tsx b/web/components/nav/love-bottom-nav-bar.tsx
index 41bee5ba..daead855 100644
--- a/web/components/nav/love-bottom-nav-bar.tsx
+++ b/web/components/nav/love-bottom-nav-bar.tsx
@@ -149,8 +149,7 @@ function NavBarItem(props: {
   }
 
   const currentBasePath = '/' + (currentPage?.split('/')[1] ?? '')
-  const isCurrentPage =
-    item.href != null && currentBasePath === item.href.split('?')[0]
+  const isCurrentPage = currentBasePath === item.href.split('?')[0]
 
   return (
     <Link
diff --git a/web/styles/globals.css b/web/styles/globals.css
index b1c03812..b35f36b6 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -3,152 +3,161 @@
 @tailwind utilities;
 
 @layer base {
-  html {
-    -webkit-tap-highlight-color: transparent;
-  }
-  :root {
-      /* Text / Ink Grey Scale */
-      --color-ink-0: 255 255 255;       /* white */
-      --color-ink-50: 245 245 245;
-      --color-ink-100: 230 230 230;
-      --color-ink-200: 200 200 200;
-      --color-ink-300: 170 170 170;
-      --color-ink-400: 140 140 140;
-      --color-ink-500: 110 110 110;
-      --color-ink-600: 85 85 85;
-      --color-ink-700: 60 60 60;
-      --color-ink-800: 40 40 40;
-      --color-ink-900: 25 25 25;
-      --color-ink-950: 12 12 12;
-      --color-ink-1000: 0 0 0;         /* black */
+    body {
+        font-family: "Crimson Pro", Georgia, "Times New Roman", Times, serif;
+    }
 
-      /* Background / Canvas Grey Scale */
-      --color-canvas-0: 255 255 255;    /* white */
-      --color-canvas-50: 245 245 245;
-      --color-canvas-100: 230 230 230;
-      --color-canvas-200: 210 210 210;
-      --color-canvas-300: 190 190 190;
-      --color-canvas-400: 160 160 160;
-      --color-canvas-500: 130 130 130;
-      --color-canvas-600: 100 100 100;
-      --color-canvas-700: 75 75 75;
-      --color-canvas-800: 50 50 50;
-      --color-canvas-900: 30 30 30;
-      --color-canvas-950: 15 15 15;
-      --color-canvas-1000: 0 0 0;      /* black */
+    button, input, label {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    }
 
-      --color-primary-950: 23 37 84;       /* very dark navy */
-      --color-primary-900: 30 58 138;
-      --color-primary-800: 30 64 175;
-      --color-primary-700: 29 78 216;
-      --color-primary-600: 37 99 235;
-      --color-primary-500: 59 130 246;    /* standard blue */
-      --color-primary-400: 96 165 250;
-      --color-primary-300: 147 197 253;
-      --color-primary-200: 191 219 254;
-      --color-primary-100: 219 234 254;
-      --color-primary-50: 239 246 255;     /* very light blue */
+    html {
+        -webkit-tap-highlight-color: transparent;
+    }
 
-      --color-yes-0: 255 255 255;
-      --color-yes-50: 249 249 249;
-      --color-yes-100: 242 242 242;
-      --color-yes-200: 217 217 217;
-      --color-yes-300: 191 191 191;
-      --color-yes-400: 166 166 166;
-      --color-yes-500: 140 140 140;
-      --color-yes-600: 115 115 115;
-      --color-yes-700: 89 89 89;
-      --color-yes-800: 64 64 64;
-      --color-yes-900: 34 34 34;
-      --color-yes-950: 17 17 17;
-      --color-yes-1000: 0 0 0;
+    :root {
+        /* Text / Ink Grey Scale */
+        --color-ink-0: 255 255 255; /* white */
+        --color-ink-50: 245 245 245;
+        --color-ink-100: 230 230 230;
+        --color-ink-200: 200 200 200;
+        --color-ink-300: 170 170 170;
+        --color-ink-400: 140 140 140;
+        --color-ink-500: 110 110 110;
+        --color-ink-600: 85 85 85;
+        --color-ink-700: 60 60 60;
+        --color-ink-800: 40 40 40;
+        --color-ink-900: 25 25 25;
+        --color-ink-950: 12 12 12;
+        --color-ink-1000: 0 0 0; /* black */
 
-      --color-no-0: 255 255 255;
-      --color-no-50: 249 249 249;
-      --color-no-100: 242 242 242;
-      --color-no-200: 217 217 217;
-      --color-no-300: 191 191 191;
-      --color-no-400: 166 166 166;
-      --color-no-500: 140 140 140;
-      --color-no-600: 115 115 115;
-      --color-no-700: 89 89 89;
-      --color-no-800: 64 64 64;
-      --color-no-900: 34 34 34;
-      --color-no-950: 17 17 17;
-      --color-no-1000: 0 0 0;
+        /* Background / Canvas Grey Scale */
+        --color-canvas-0: 255 255 255; /* white */
+        --color-canvas-50: 245 245 245;
+        --color-canvas-100: 230 230 230;
+        --color-canvas-200: 210 210 210;
+        --color-canvas-300: 190 190 190;
+        --color-canvas-400: 160 160 160;
+        --color-canvas-500: 130 130 130;
+        --color-canvas-600: 100 100 100;
+        --color-canvas-700: 75 75 75;
+        --color-canvas-800: 50 50 50;
+        --color-canvas-900: 30 30 30;
+        --color-canvas-950: 15 15 15;
+        --color-canvas-1000: 0 0 0; /* black */
 
-  }
-  .dark {
-    color-scheme: dark;
+        --color-primary-950: 23 37 84; /* very dark navy */
+        --color-primary-900: 30 58 138;
+        --color-primary-800: 30 64 175;
+        --color-primary-700: 29 78 216;
+        --color-primary-600: 37 99 235;
+        --color-primary-500: 59 130 246; /* standard blue */
+        --color-primary-400: 96 165 250;
+        --color-primary-300: 147 197 253;
+        --color-primary-200: 191 219 254;
+        --color-primary-100: 219 234 254;
+        --color-primary-50: 239 246 255; /* very light blue */
 
-  --color-ink-1000: 255 255 255;  /* white */
-  --color-ink-950: 250 250 250;   /* #FAFAFA */
-  --color-ink-900: 242 242 242;   /* #F2F2F2 */
-  --color-ink-800: 217 217 217;   /* #D9D9D9 */
-  --color-ink-700: 191 191 191;   /* #BFBFBF */
-  --color-ink-600: 166 166 166;   /* #A6A6A6 */
-  --color-ink-500: 140 140 140;   /* #8C8C8C */
-  --color-ink-400: 115 115 115;   /* #737373 */
-  --color-ink-300: 89 89 89;      /* #595959 */
-  --color-ink-200: 64 64 64;      /* #404040 */
-  --color-ink-100: 34 34 34;      /* #222222 */
-  --color-ink-50: 17 17 17;       /* #111111 */
-  --color-ink-0: 0 0 0;           /* black */
+        --color-yes-0: 255 255 255;
+        --color-yes-50: 249 249 249;
+        --color-yes-100: 242 242 242;
+        --color-yes-200: 217 217 217;
+        --color-yes-300: 191 191 191;
+        --color-yes-400: 166 166 166;
+        --color-yes-500: 140 140 140;
+        --color-yes-600: 115 115 115;
+        --color-yes-700: 89 89 89;
+        --color-yes-800: 64 64 64;
+        --color-yes-900: 34 34 34;
+        --color-yes-950: 17 17 17;
+        --color-yes-1000: 0 0 0;
 
-      --color-canvas-0: 32 30 37;
-      --color-canvas-50: 22 20 25;
-      --color-canvas-100: 46 41 51;
+        --color-no-0: 255 255 255;
+        --color-no-50: 249 249 249;
+        --color-no-100: 242 242 242;
+        --color-no-200: 217 217 217;
+        --color-no-300: 191 191 191;
+        --color-no-400: 166 166 166;
+        --color-no-500: 140 140 140;
+        --color-no-600: 115 115 115;
+        --color-no-700: 89 89 89;
+        --color-no-800: 64 64 64;
+        --color-no-900: 34 34 34;
+        --color-no-950: 17 17 17;
+        --color-no-1000: 0 0 0;
 
-      --color-primary-950: 239 246 255;   /* very light blue */
-      --color-primary-900: 219 234 254;   /* light blue */
-      --color-primary-800: 191 219 254;
-      --color-primary-700: 147 197 253;
-      --color-primary-600: 96 165 250;
-      --color-primary-500: 59 130 246;    /* standard blue */
-      --color-primary-400: 37 99 235;
-      --color-primary-300: 29 78 216;
-      --color-primary-200: 30 64 175;
-      --color-primary-100: 30 58 138;
-      --color-primary-50: 23 37 84;       /* very dark navy */
+    }
+
+    .dark {
+        color-scheme: dark;
+
+        --color-ink-1000: 255 255 255; /* white */
+        --color-ink-950: 250 250 250; /* #FAFAFA */
+        --color-ink-900: 242 242 242; /* #F2F2F2 */
+        --color-ink-800: 217 217 217; /* #D9D9D9 */
+        --color-ink-700: 191 191 191; /* #BFBFBF */
+        --color-ink-600: 166 166 166; /* #A6A6A6 */
+        --color-ink-500: 140 140 140; /* #8C8C8C */
+        --color-ink-400: 115 115 115; /* #737373 */
+        --color-ink-300: 89 89 89; /* #595959 */
+        --color-ink-200: 64 64 64; /* #404040 */
+        --color-ink-100: 34 34 34; /* #222222 */
+        --color-ink-50: 17 17 17; /* #111111 */
+        --color-ink-0: 0 0 0; /* black */
+
+        --color-canvas-0: 32 30 37;
+        --color-canvas-50: 22 20 25;
+        --color-canvas-100: 46 41 51;
+
+        --color-primary-950: 239 246 255; /* very light blue */
+        --color-primary-900: 219 234 254; /* light blue */
+        --color-primary-800: 191 219 254;
+        --color-primary-700: 147 197 253;
+        --color-primary-600: 96 165 250;
+        --color-primary-500: 59 130 246; /* standard blue */
+        --color-primary-400: 37 99 235;
+        --color-primary-300: 29 78 216;
+        --color-primary-200: 30 64 175;
+        --color-primary-100: 30 58 138;
+        --color-primary-50: 23 37 84; /* very dark navy */
 
 
-      --color-no-950: 255 255 255;  /* white */
-      --color-no-900: 242 242 242;
-      --color-no-800: 217 217 217;
-      --color-no-700: 191 191 191;
-      --color-no-600: 166 166 166;
-      --color-no-500: 140 140 140;
-      --color-no-400: 115 115 115;
-      --color-no-300: 89 89 89;
-      --color-no-200: 64 64 64;
-      --color-no-100: 34 34 34;
-      --color-no-50: 17 17 17;
-      --color-no-0: 0 0 0;          /* black */
+        --color-no-950: 255 255 255; /* white */
+        --color-no-900: 242 242 242;
+        --color-no-800: 217 217 217;
+        --color-no-700: 191 191 191;
+        --color-no-600: 166 166 166;
+        --color-no-500: 140 140 140;
+        --color-no-400: 115 115 115;
+        --color-no-300: 89 89 89;
+        --color-no-200: 64 64 64;
+        --color-no-100: 34 34 34;
+        --color-no-50: 17 17 17;
+        --color-no-0: 0 0 0; /* black */
 
 
-      --color-yes-950: 255 255 255;  /* white */
-      --color-yes-900: 242 242 242;
-      --color-yes-800: 217 217 217;
-      --color-yes-700: 191 191 191;
-      --color-yes-600: 166 166 166;
-      --color-yes-500: 140 140 140;
-      --color-yes-400: 115 115 115;
-      --color-yes-300: 89 89 89;
-      --color-yes-200: 64 64 64;
-      --color-yes-100: 34 34 34;
-      --color-yes-50: 17 17 17;
-      --color-yes-0: 0 0 0;          /* black */
+        --color-yes-950: 255 255 255; /* white */
+        --color-yes-900: 242 242 242;
+        --color-yes-800: 217 217 217;
+        --color-yes-700: 191 191 191;
+        --color-yes-600: 166 166 166;
+        --color-yes-500: 140 140 140;
+        --color-yes-400: 115 115 115;
+        --color-yes-300: 89 89 89;
+        --color-yes-200: 64 64 64;
+        --color-yes-100: 34 34 34;
+        --color-yes-50: 17 17 17;
+        --color-yes-0: 0 0 0; /* black */
 
-  }
+    }
 }
 
 @font-face {
-  font-family: 'emoji';
-  src: local('AppleColorEmoji') local('Segoe UI Emoji'),
-    local('Noto Color Emoji');
-  /* from official unicode range for emoji: https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5B%3AEmoji%3DYes%3A%5D%0D%0A&abb=on&esc=on&g=&i= */
-  /* but include zero width joiner and variant block selector, like 🏳️‍🌈 */
-  unicode-range: U+200D, U+FE0?, U+203C, U+2049, U+2122, U+2139, U+2194-2199,
+    font-family: 'emoji';
+    src: local('AppleColorEmoji'), local('Segoe UI Emoji'), local('Noto Color Emoji');
+    /* from official unicode range for emoji: https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5B%3AEmoji%3DYes%3A%5D%0D%0A&abb=on&esc=on&g=&i= */
+    /* but include zero width joiner and variant block selector, like 🏳️‍🌈 */
+    unicode-range: U+200D, U+FE0?, U+203C, U+2049, U+2122, U+2139, U+2194-2199,
     U+21A9, U+21AA, U+231A, U+231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FA,
     U+24C2, U+25AA, U+25AB, U+25B6, U+25C0, U+25FB-25FE, U+2600-2604, U+260E,
     U+2611, U+2614, U+2615, U+2618, U+261D, U+2620, U+2622, U+2623, U+2626,
@@ -176,57 +185,56 @@
 }
 
 @font-face {
-  font-family: 'icomoon';
-  src: url('../public/fonts/icomoon.eot?v49ui9#iefix')
-      format('embedded-opentype'),
+    font-family: 'icomoon';
+    src: url('../public/fonts/icomoon.eot?v49ui9#iefix') format('embedded-opentype'),
     url('../public/fonts/icomoon.ttf?v49ui9') format('truetype'),
     url('../public/fonts/icomoon.woff?v49ui9') format('woff'),
     url('../public/fonts/icomoon.svg?v49ui9#icomoon') format('svg');
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
-  unicode-range: U+1E40;
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+    unicode-range: U+1E40;
 }
 
 [class^='icon-'],
 [class*=' icon-'] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'icomoon' !important;
-  speak: never;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'icomoon' !important;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
 
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .icon-mana_3:before {
-  content: '\1e40';
+    content: '\1e40';
 }
 
 /* For Webkit-inkd browsers (Chrome, Safari and Opera) */
 .scrollbar-hide::-webkit-scrollbar {
-  display: none;
+    display: none;
 }
 
 /* For IE, Edge and Firefox */
 .scrollbar-hide {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
 }
 
 text {
-  font-family: icomoon, var(--font-main), emoji, sans-serif;
+    font-family: icomoon, var(--font-main), emoji, sans-serif;
 }
 
 /* Style all headings globally */
 h1, h2, h3, h4, h5, h6 {
-    font-family: 'Inter', sans-serif; /* Clean modern font */
-    font-weight: 600;                 /* Semi-bold for clarity */
+    /*font-family: 'Inter', sans-serif; !* Clean modern font *!*/
+    font-weight: 600; /* Semi-bold for clarity */
     /*color: #111827;                   !* Near-black text for readability *!*/
     line-height: 1.25;
     margin-top: 1.5rem;
@@ -235,23 +243,28 @@ h1, h2, h3, h4, h5, h6 {
 
 /* Size scaling */
 h1 {
-    font-size: 2rem;  /* ~32px */
+    font-size: 2rem; /* ~32px */
 }
+
 h2 {
     font-size: 1.5rem; /* ~24px */
 }
+
 h3 {
     font-size: 1.25rem; /* ~20px */
 }
+
 h4 {
     font-size: 1.125rem; /* ~18px */
 }
+
 h5 {
-    font-size: 1rem;   /* ~16px */
+    font-size: 1rem; /* ~16px */
 }
+
 h6 {
     font-size: 0.875rem; /* ~14px */
-    color: #374151;      /* Slightly lighter for subheadings */
+    color: #374151; /* Slightly lighter for subheadings */
 }
 
 ul {
@@ -264,6 +277,7 @@ ul {
     color: cornflowerblue;
     text-decoration: none;
 }
+
 .dark .customlink a {
     color: rgb(var(--color-primary-700));
 }
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 4843b193..c7f17b4c 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -338,7 +338,7 @@ module.exports = {
           700: 'hsl(240, 20%, 30%)',
           800: 'hsl(240, 30%, 22%)',
           900: 'hsl(242, 45%, 15%)',
-          950: 'hsl(243, 69%, 10%)',
+          950: 'hsl(264,11%,9%)',
         },
         warning: '#F0D630',
         error: '#E70D3D',