From ad9c7350f420fdfe54599f8166ea58a2c7cd1302 Mon Sep 17 00:00:00 2001
From: Antigravity Agent <antigravity@gemini.google.com>
Date: Wed, 4 Feb 2026 21:09:02 +0100
Subject: [PATCH] feat(ui): implement alabaster light theme and masonry layout

---
 web/src/components/ArticleCard.tsx |  2 +-
 web/src/index.css                  | 37 +++++++++++++++++++-----------
 web/tailwind.config.js             | 10 ++++----
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/web/src/components/ArticleCard.tsx b/web/src/components/ArticleCard.tsx
index 1f72441..d7dcd7d 100644
--- a/web/src/components/ArticleCard.tsx
+++ b/web/src/components/ArticleCard.tsx
@@ -11,7 +11,7 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
     const timeToRead = Math.ceil((article.content?.length || 500) / 1000) + 1;
 
     return (
-        <article className="magazine-card group cursor-pointer" onClick={() => onClick(article)}>
+        <article className="magazine-card group cursor-pointer break-inside-avoid mb-8" onClick={() => onClick(article)}>
             {/* Image Placeholder with Gold Overlay */}
             <div className="aspect-[16/10] overflow-hidden rounded-xl bg-carbon-light relative mb-6">
                 <div className="absolute inset-0 bg-gradient-to-t from-carbon-dark/80 via-transparent to-transparent opacity-60 z-10"></div>
diff --git a/web/src/index.css b/web/src/index.css
index 7bac883..1f25de5 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -2,13 +2,13 @@
 @import "tailwindcss";
 
 @theme {
-  --color-carbon: #121212;
-  --color-carbon-light: #1e1e1e;
-  --color-carbon-dark: #0a0a0a;
+  --color-carbon: #F8F9FA;
+  --color-carbon-light: #FFFFFF;
+  --color-carbon-dark: #E9ECEF;
   --color-gold: #c5a059;
   --color-gold-bright: #e2c28d;
-  --color-paper-white: #f5f5f5;
-  --color-paper-muted: #888888;
+  --color-paper-white: #1A1A1A;
+  --color-paper-muted: #6B7280;
 
   --font-serif: "Playfair Display", serif;
   --font-sans: "Inter", system-ui, sans-serif;
@@ -22,10 +22,10 @@
 }
 
 @utility glass-panel {
-  background: rgba(30, 30, 30, 0.7);
+  background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
 @layer base {
@@ -33,10 +33,8 @@
     @apply bg-carbon text-paper-white font-sans antialiased selection:bg-gold/30;
     margin: 0;
     min-height: 100vh;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
-    background-size: 200px 200px;
-    background-repeat: repeat;
-    background-blend-mode: overlay;
+    /* Optional: Subtle texture for paper effect, or clean flat color */
+    background-color: var(--color-carbon);
   }
 
   h1,
@@ -72,11 +70,22 @@
 
 @layer components {
   .magazine-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 3rem;
+    column-count: 1;
+    column-gap: 2rem;
     padding: 2rem 0;
   }
+  
+  @media (min-width: 768px) {
+    .magazine-grid {
+      column-count: 2;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .magazine-grid {
+      column-count: 3;
+    }
+  }
 
   .magazine-card {
     @apply relative transition-all duration-500 ease-out;
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 00c1614..cf3f581 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -8,17 +8,17 @@ export default {
         extend: {
             colors: {
                 carbon: {
-                    DEFAULT: '#1a1a1a',
-                    light: '#262626',
-                    dark: '#121212',
+                    DEFAULT: '#F8F9FA', // Alabaster
+                    light: '#FFFFFF',   // White for cards
+                    dark: '#E9ECEF',    // Light gray for borders/inputs
                 },
                 gold: {
                     DEFAULT: '#d4af37',
                     glow: 'rgba(212, 175, 55, 0.4)',
                 },
                 paper: {
-                    white: '#e5e5e5',
-                    muted: '#a3a3a3',
+                    white: '#1A1A1A',   // Dark text
+                    muted: '#6B7280',   // Gray text
                 }
             },
             fontFamily: {