From 09fd59d5708bf9ebadc078b2980a490c85f73887 Mon Sep 17 00:00:00 2001
From: Ryan Malloy <ryan@supported.systems>
Date: Sat, 21 Feb 2026 15:28:08 -0700
Subject: [PATCH] Visual polish: card hover lift, gradient section dividers,
 editor spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cards (featured + gallery): hover adds -translate-y-1 + shadow-lg for
  subtle lift-off-surface effect
- Homepage sections: replace hard border-b with gradient-fade dividers
  that taper to transparent at edges
- Resistor button section: tighten vertical padding (py-10 → py-6)
- Notebook editor: cell spacing increased (space-y-0 → space-y-3),
  add-cell button slides up on hover instead of abrupt opacity flash,
  status bar gets more breathing room and lighter text
---
 .../src/components/FeaturedNotebooks.astro    |  4 +-
 frontend/src/components/NotebookCard.tsx      |  2 +-
 frontend/src/components/notebook/CellList.tsx |  4 +-
 .../components/notebook/NotebookEditor.tsx    |  2 +-
 frontend/src/pages/index.astro                | 12 +++---
 frontend/src/styles/homepage.css              | 43 +++++++++++++++++++
 6 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/FeaturedNotebooks.astro b/frontend/src/components/FeaturedNotebooks.astro
index 467c975..3286a4e 100644
--- a/frontend/src/components/FeaturedNotebooks.astro
+++ b/frontend/src/components/FeaturedNotebooks.astro
@@ -46,7 +46,9 @@ const engineColor: Record<string, { border: string; bg: string; text: string }>
           href={`/notebook/${nb.id}`}
           class:list={[
             'group block rounded-lg border bg-slate-900/50 overflow-hidden',
-            'hover:border-blue-500/40 hover:bg-slate-800/70 transition-all',
+            'hover:border-blue-500/40 hover:bg-slate-800/70',
+            'hover:-translate-y-1 hover:shadow-lg hover:shadow-black/25',
+            'transition-all duration-200',
             'border-slate-800',
           ]}
         >
diff --git a/frontend/src/components/NotebookCard.tsx b/frontend/src/components/NotebookCard.tsx
index 40bbb7d..84b354c 100644
--- a/frontend/src/components/NotebookCard.tsx
+++ b/frontend/src/components/NotebookCard.tsx
@@ -30,7 +30,7 @@ export function NotebookCard({ notebook }: NotebookCardProps) {
   return (
     <a
       href={`/notebook/${encodeURIComponent(id)}`}
-      className="group block rounded-lg border border-slate-800 bg-slate-900/50 overflow-hidden hover:border-blue-500/40 hover:bg-slate-800/70 transition-all"
+      className="group block rounded-lg border border-slate-800 bg-slate-900/50 overflow-hidden hover:border-blue-500/40 hover:bg-slate-800/70 hover:-translate-y-1 hover:shadow-lg hover:shadow-black/25 transition-all duration-200"
     >
       {schematic_svg ? (
         <div
diff --git a/frontend/src/components/notebook/CellList.tsx b/frontend/src/components/notebook/CellList.tsx
index 824641b..acc97a1 100644
--- a/frontend/src/components/notebook/CellList.tsx
+++ b/frontend/src/components/notebook/CellList.tsx
@@ -30,7 +30,7 @@ function AddCellButton({ afterId }: { afterId?: string }) {
   ];
 
   return (
-    <div className="flex justify-center py-1 opacity-0 hover:opacity-100 focus-within:opacity-100 transition-opacity">
+    <div className="flex justify-center py-2 opacity-0 -translate-y-1 hover:opacity-100 hover:translate-y-0 focus-within:opacity-100 focus-within:translate-y-0 transition-all duration-200 ease-out">
       <Dropdown
         trigger={
           <Button variant="ghost" size="sm" className="text-slate-600 hover:text-slate-400">
@@ -61,7 +61,7 @@ export function CellList() {
   }
 
   return (
-    <div className="space-y-0">
+    <div className="space-y-3">
       {cells.map((cell, index) => {
         const isFirst = index === 0;
         const isLast = index === cells.length - 1;
diff --git a/frontend/src/components/notebook/NotebookEditor.tsx b/frontend/src/components/notebook/NotebookEditor.tsx
index ffe03cf..0167660 100644
--- a/frontend/src/components/notebook/NotebookEditor.tsx
+++ b/frontend/src/components/notebook/NotebookEditor.tsx
@@ -90,7 +90,7 @@ export default function NotebookEditor({ notebookId }: NotebookEditorProps) {
       </main>
 
       {/* Status bar at bottom */}
-      <footer className="border-t border-slate-800 bg-slate-950 px-4 py-1.5 text-[11px] text-slate-600 flex items-center gap-4">
+      <footer className="border-t border-slate-800/60 bg-slate-950 px-4 py-2.5 text-[11px] text-slate-500 flex items-center gap-4">
         <span>
           {notebook.cells.length} cell
           {notebook.cells.length !== 1 ? 's' : ''}
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index 37aefa7..17f5d76 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -27,7 +27,7 @@ try {
   </style>
 
   <!-- Hero: Split layout — text left, animated scope visual right -->
-  <section class="hero-graticule border-b border-slate-800/60">
+  <section class="hero-graticule section-fade">
     <div class="relative max-w-6xl mx-auto px-6 pt-16 pb-20">
       <div class="grid md:grid-cols-2 gap-12 items-center">
 
@@ -68,13 +68,13 @@ try {
   </section>
 
   <!-- Pipeline: Write → Simulate → Visualize -->
-  <section class="border-b border-slate-800/60">
+  <section class="section-fade">
     <PipelineStrip />
   </section>
 
   <!-- Resistor Color Code Reference link -->
-  <section class="border-b border-slate-800/60">
-    <div class="max-w-6xl mx-auto px-6 py-10 flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
+  <section class="section-fade">
+    <div class="max-w-6xl mx-auto px-6 py-6 flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
       <a href="/reference/resistor-colors"
          class="inline-flex items-center gap-4 px-5 py-3 rounded-lg border border-slate-700
                 hover:border-slate-500 hover:bg-slate-800/40 transition-colors group">
@@ -107,7 +107,7 @@ try {
   </section>
 
   <!-- Featured Notebooks -->
-  <section class="border-b border-slate-800/60">
+  <section class="section-fade">
     <FeaturedNotebooks />
   </section>
 
@@ -127,7 +127,7 @@ try {
   </section>
 
   <!-- Footer CTA -->
-  <footer class="border-t border-slate-800/60">
+  <footer class="section-fade-top">
     <div class="max-w-6xl mx-auto px-6 py-16 text-center">
       <h2 class="text-2xl font-bold text-slate-100 mb-2">Start with a blank notebook</h2>
       <p class="text-sm text-slate-400 mb-6">Write a SPICE netlist, run it, see results in seconds.</p>
diff --git a/frontend/src/styles/homepage.css b/frontend/src/styles/homepage.css
index 9bedb79..d329b1e 100644
--- a/frontend/src/styles/homepage.css
+++ b/frontend/src/styles/homepage.css
@@ -20,6 +20,49 @@
   pointer-events: none;
 }
 
+/* Soft gradient section divider — replaces hard border-b lines */
+.section-fade {
+  border-bottom: none;
+  position: relative;
+}
+
+.section-fade::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 5%;
+  right: 5%;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(51, 65, 85, 0.5) 25%,
+    rgba(51, 65, 85, 0.5) 75%,
+    transparent
+  );
+}
+
+/* Top-edge variant for footer */
+.section-fade-top {
+  position: relative;
+}
+
+.section-fade-top::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 5%;
+  right: 5%;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(51, 65, 85, 0.5) 25%,
+    rgba(51, 65, 85, 0.5) 75%,
+    transparent
+  );
+}
+
 /* Horizontal scrollable filter pills */
 .filter-pills {
   scrollbar-width: none;