From ec8d719d414bd36d129a6d5085693708cb6147cf Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 26 Sep 2025 23:52:58 +0300
Subject: [PATCH] style(website): improve card title / content contrast

---
 apps/website2/src/components/Card.tsx |  7 ++++---
 apps/website2/src/style.css           | 17 ++++++++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/website2/src/components/Card.tsx b/apps/website2/src/components/Card.tsx
index e2c249cdf..f33c0e083 100644
--- a/apps/website2/src/components/Card.tsx
+++ b/apps/website2/src/components/Card.tsx
@@ -10,10 +10,11 @@ export default function Card({ title, children, imageUrl }: CardProps) {
     return (
         <div className="card">
             {imageUrl && <img class="image" src={imageUrl} />}
-            <p>
-                <span class="text-big">{title}</span><br />
+
+            <div className="card-content">
+                <h3>{title}</h3>
                 {children}
-            </p>
+            </div>
         </div>
     )
 }
diff --git a/apps/website2/src/style.css b/apps/website2/src/style.css
index 7174d01db..2b706d586 100644
--- a/apps/website2/src/style.css
+++ b/apps/website2/src/style.css
@@ -1,6 +1,7 @@
 :root {
     --background-color: #fff;
     --foreground-color: black;
+    --muted-color: #353535;
     --card-background-color: white;
     --card-box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
     --header-background-color: rgba(255, 255, 255, 0.75);
@@ -13,6 +14,7 @@
     :root {
         --foreground-color: #fff;
         --background-color: #0a0e14;
+        --muted-color: #cacaca;
         --header-background-color: rgba(0, 0, 0, 0.75);
         --card-background-color: #ffffff12;
         --card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
@@ -71,11 +73,20 @@ footer {
     overflow: hidden;
 }
 
-.card p {
+.card-content {
     margin: 0;
     padding: 1em;
+    color: var(--muted-color);
 }
 
-span.text-big {
-    font-size: 1.25em;
+.card h3 {
+    font-size: 1.1rem;
+    font-weight: 300;
+    margin: 0;
+    color: var(--foreground-color);
 }
+
+.card > .image {
+    height: 200px;
+    object-fit: cover;
+}
\ No newline at end of file