From b8ea228471dd1da6ef113f513c8ecc357ff93359 Mon Sep 17 00:00:00 2001
From: Lalitya31 <lalityadodla@gmail.com>
Date: Sun, 17 May 2026 19:10:26 +0530
Subject: [PATCH 1/9] tone down colors on landing page

---
 static/style.css | 39 ++++++++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/static/style.css b/static/style.css
index 837c450d..aeade463 100644
--- a/static/style.css
+++ b/static/style.css
@@ -20,6 +20,13 @@
   --purple-600: #7c3aed;
   --purple-100: #f3f0ff;
 
+  /* Hero and surface softening */
+  --hero-indigo-deep: #131a4b;
+  --hero-indigo-mid: #1e2860;
+  --hero-violet-muted: #4b426d;
+  --surface-soft: #f6f7fb;
+  --surface-soft-alt: #f1f3f9;
+
   --yellow-400: #fbbf24;
   --yellow-300: #fcd34d;
   --yellow-100: #fef9e7;
@@ -229,18 +236,29 @@ ul, ol { list-style: none; }
 .hero {
   position: relative;
   overflow: hidden;
-  background: linear-gradient(140deg, var(--indigo-900) 0%, var(--indigo-800) 40%, var(--purple-700) 100%);
+  background: linear-gradient(155deg, var(--hero-indigo-deep) 0%, var(--hero-indigo-mid) 52%, var(--hero-violet-muted) 100%);
   padding: 130px 32px 90px;
   min-height: 92vh;
   display: flex;
   align-items: center;
 }
 
+.hero::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 130px;
+  background: linear-gradient(180deg, rgba(18, 24, 66, 0) 0%, rgba(241, 243, 249, 0.92) 78%, var(--surface-soft) 100%);
+  pointer-events: none;
+}
+
 /* Subtle dot-grid overlay */
 .hero-bg-grid {
   position: absolute;
   inset: 0;
-  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
+  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
   background-size: 28px 28px;
   pointer-events: none;
 }
@@ -441,26 +459,29 @@ ul, ol { list-style: none; }
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
-  filter: blur(90px);
-  opacity: 0.25;
+  filter: blur(110px);
+  opacity: 0.16;
 }
 .hero-blob-1 {
   width: 560px; height: 560px;
-  background: var(--purple-600);
+  background: #5a4f81;
   top: -180px; right: -180px;
 }
 .hero-blob-2 {
   width: 360px; height: 360px;
-  background: var(--indigo-500);
+  background: #4b5f96;
   bottom: -80px; left: -100px;
 }
 
 /* ---- Skill Strip ------------------------------------------ */
 .skill-strip {
-  background: var(--gray-50);
-  border-top: 1px solid var(--border);
+  background: linear-gradient(180deg, var(--surface-soft-alt) 0%, var(--surface-soft) 62%, #f8f9fc 100%);
+  border-top: none;
   border-bottom: 1px solid var(--border);
   padding: 18px 32px;
+  margin-top: -22px;
+  position: relative;
+  z-index: 3;
 }
 .skill-strip-inner {
   max-width: 1140px;
@@ -500,7 +521,7 @@ ul, ol { list-style: none; }
 /* ---- How It Works ----------------------------------------- */
 .how-section {
   padding: 96px 0;
-  background: var(--white);
+  background: var(--surface-soft);
   text-align: center;
 }
 

From 9b12a76954aef4419c52953d88e5063e75e1857a Mon Sep 17 00:00:00 2001
From: Lalitya31 <lalityadodla@gmail.com>
Date: Sun, 17 May 2026 19:18:11 +0530
Subject: [PATCH 2/9] reduce pill shapes used by ai

---
 static/style.css | 52 +++++++++++++++++++++++++-----------------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/static/style.css b/static/style.css
index aeade463..3232028e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -112,7 +112,7 @@ ul, ol { list-style: none; }
   text-transform: uppercase;
   color: var(--indigo-600);
   background: var(--indigo-100);
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
   padding: 4px 14px;
   margin-bottom: 16px;
 }
@@ -182,7 +182,7 @@ ul, ol { list-style: none; }
   font-weight: 600;
   color: rgba(255,255,255,0.85);
   border: 1.5px solid rgba(255,255,255,0.28);
-  border-radius: var(--r-full);
+  border-radius: var(--r-sm);
   padding: 7px 18px;
   transition: background var(--t), border-color var(--t);
 }
@@ -289,7 +289,7 @@ ul, ol { list-style: none; }
   color: rgba(255,255,255,0.75);
   border: 1px solid rgba(255,255,255,0.2);
   background: rgba(255,255,255,0.07);
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
   padding: 6px 16px;
   margin-bottom: 24px;
 }
@@ -359,14 +359,14 @@ ul, ol { list-style: none; }
   font-family: var(--font-display);
   font-size: 0.95rem;
   font-weight: 700;
-  border-radius: var(--r-full);
-  box-shadow: 0 4px 20px rgba(251, 191, 36, 0.4);
+  border-radius: var(--r-md);
+  box-shadow: 0 8px 32px rgba(251, 191, 36, 0.35), inset 0 1px 0 rgba(255,255,255,0.5);
   transition: background var(--t), transform var(--t), box-shadow var(--t);
 }
 .btn-hero-primary:hover {
   background: var(--yellow-300);
   transform: translateY(-2px);
-  box-shadow: 0 6px 28px rgba(251, 191, 36, 0.5);
+  box-shadow: 0 12px 40px rgba(251, 191, 36, 0.45), inset 0 1px 0 rgba(255,255,255,0.6);
   text-decoration: none;
 }
 
@@ -375,16 +375,17 @@ ul, ol { list-style: none; }
   align-items: center;
   gap: 8px;
   padding: 14px 28px;
-  background: rgba(255,255,255,0.1);
-  border: 1.5px solid rgba(255,255,255,0.25);
+  background: rgba(255,255,255,0.08);
+  border: 1.5px solid rgba(255,255,255,0.3);
   color: var(--white);
   font-family: var(--font-display);
   font-size: 0.95rem;
   font-weight: 600;
-  border-radius: var(--r-full);
-  transition: background var(--t);
+  border-radius: var(--r-md);
+  box-shadow: 0 8px 28px rgba(255,255,255,0.1);
+  transition: background var(--t), box-shadow var(--t);
 }
-.btn-hero-ghost:hover { background: rgba(255,255,255,0.18); text-decoration: none; }
+.btn-hero-ghost:hover { background: rgba(255,255,255,0.14); box-shadow: 0 12px 36px rgba(255,255,255,0.16); text-decoration: none; }
 
 /* Visual column (code preview cards) */
 .hero-visual {
@@ -555,7 +556,7 @@ ul, ol { list-style: none; }
   background: var(--indigo-100);
   display: inline-block;
   padding: 4px 12px;
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
   margin-bottom: 20px;
 }
 
@@ -640,7 +641,7 @@ ul, ol { list-style: none; }
   border: 1.5px solid var(--indigo-200, #c7d2fe);
   background: rgba(255,255,255,0.6);
   padding: 7px 16px;
-  border-radius: var(--r-full);
+  border-radius: var(--r-sm);
   transition: background var(--t), border-color var(--t);
 }
 .feature-card-link:hover {
@@ -726,7 +727,7 @@ label {
   color: var(--indigo-700);
   background: var(--indigo-100);
   border: 1px solid rgba(79, 110, 247, 0.2);
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
   padding: 3px 10px 3px 12px;
 }
 .skill-chip-remove {
@@ -831,7 +832,7 @@ label {
   color: var(--gray-600);
   background: var(--white);
   border: 1.5px solid var(--gray-300);
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
   padding: 5px 14px;
   cursor: pointer;
   transition: background var(--t), border-color var(--t), color var(--t);
@@ -970,7 +971,7 @@ select:focus {
   background: var(--indigo-100);
   color: var(--indigo-700);
   border: 1.5px solid rgba(79, 110, 247, 0.25);
-  border-radius: var(--r-full);
+  border-radius: var(--r-sm);
   font-family: var(--font-body);
   font-size: 0.9rem;
   font-weight: 600;
@@ -1028,7 +1029,7 @@ select:focus {
   font-size: 0.74rem;
   font-weight: 600;
   padding: 3px 11px;
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
 }
 .project-tag--skill        { background: var(--indigo-100); color: var(--indigo-700); }
 .project-tag--time         { background: var(--gray-100);   color: var(--gray-600);  }
@@ -1093,13 +1094,14 @@ select:focus {
   font-family: var(--font-display);
   font-size: 1rem;
   font-weight: 700;
-  border-radius: var(--r-full);
-  box-shadow: 0 6px 24px rgba(251, 191, 36, 0.45);
-  transition: background var(--t), transform var(--t);
+  border-radius: var(--r-md);
+  box-shadow: 0 10px 36px rgba(251, 191, 36, 0.4), inset 0 1px 0 rgba(255,255,255,0.5);
+  transition: background var(--t), transform var(--t), box-shadow var(--t);
 }
 .btn-cta:hover {
   background: var(--yellow-300);
   transform: translateY(-2px);
+  box-shadow: 0 14px 44px rgba(251, 191, 36, 0.5), inset 0 1px 0 rgba(255,255,255,0.6);
   text-decoration: none;
 }
 
@@ -1208,7 +1210,7 @@ select:focus {
   letter-spacing: 0.04em;
   text-transform: uppercase;
   padding: 4px 13px;
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
 }
 .detail-tag--level    { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
 .detail-tag--interest { background: rgba(6, 182, 212, 0.18); color: #a7f3f9; }
@@ -1369,7 +1371,7 @@ select:focus {
   color: var(--indigo-600);
   background: var(--indigo-100);
   padding: 2px 10px;
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
   letter-spacing: 0.04em;
   margin-bottom: 6px;
 }
@@ -1427,7 +1429,7 @@ select:focus {
   background: var(--gray-100);
   border: 1px solid var(--border);
   padding: 4px 12px;
-  border-radius: var(--r-full);
+  border-radius: var(--r-xs);
 }
 .stats-list { display: flex; flex-direction: column; gap: 12px; }
 .stats-list li { display: flex; align-items: center; justify-content: space-between; font-size: 0.88rem; }
@@ -1509,7 +1511,7 @@ select:focus {
   color: var(--yellow-400);
   padding: 5px 14px;
   border: 1px solid rgba(251,191,36,0.3);
-  border-radius: var(--r-full);
+  border-radius: var(--r-sm);
   transition: background var(--t);
 }
 .code-panel-download:hover { background: rgba(251,191,36,0.1); text-decoration: none; }
@@ -1567,7 +1569,7 @@ select:focus {
   font-size: 0.88rem;
   font-weight: 600;
   padding: 10px 20px;
-  border-radius: var(--r-full);
+  border-radius: var(--r-sm);
   box-shadow: 0 6px 24px rgba(16, 185, 129, 0.45);
   z-index: 500;
   opacity: 0;

From d75328b498fe4700c5cdfa03b33e45ebfa261c07 Mon Sep 17 00:00:00 2001
From: Lalitya31 <lalityadodla@gmail.com>
Date: Sun, 17 May 2026 19:20:10 +0530
Subject: [PATCH 3/9] neon separator for navbar and hero section

---
 static/style.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/static/style.css b/static/style.css
index 3232028e..f4b1e049 100644
--- a/static/style.css
+++ b/static/style.css
@@ -143,7 +143,8 @@ ul, ol { list-style: none; }
   background: rgba(10, 15, 100, 0.88);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  border-bottom: 1px solid rgba(255,255,255,0.06);
+  border-bottom: 2px solid rgba(255,255,255,0.15);
+  box-shadow: 0 4px 16px rgba(255,255,255,0.08);
   transition: background var(--t);
 }
 

From 466840fa1149a584452f953ca6053a24e2aea183 Mon Sep 17 00:00:00 2001
From: Lalitya31 <lalityadodla@gmail.com>
Date: Sun, 17 May 2026 19:28:47 +0530
Subject: [PATCH 4/9] normalize white cards to muted grey to improvise visual
 hierarchy

---
 static/style.css | 158 +++++++++++++++++++++++++++--------------------
 1 file changed, 90 insertions(+), 68 deletions(-)

diff --git a/static/style.css b/static/style.css
index f4b1e049..e58c3bb0 100644
--- a/static/style.css
+++ b/static/style.css
@@ -401,22 +401,26 @@ ul, ol { list-style: none; }
   display: flex;
   align-items: center;
   gap: 14px;
-  background: rgba(255,255,255,0.95);
+  background: rgba(255,255,255,0.07);
+  border: 1px solid rgba(255,255,255,0.12);
   border-radius: var(--r-md);
-  padding: 14px 18px;
-  box-shadow: var(--shadow-lg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  padding: 16px 20px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
 }
 .hvc-icon {
   width: 40px; height: 40px;
   border-radius: var(--r-sm);
   display: flex; align-items: center; justify-content: center;
   flex-shrink: 0;
+  background: rgba(255,255,255,0.1);
 }
-.hvc-icon--blue { background: var(--indigo-100); color: var(--indigo-600); }
-.hvc-icon--green { background: var(--green-100); color: var(--green-500); }
+.hvc-icon--blue { color: var(--indigo-300); }
+.hvc-icon--green { color: var(--green-400); }
 .hvc-text { display: flex; flex-direction: column; gap: 2px; }
-.hvc-title { font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; color: var(--gray-900); }
-.hvc-sub   { font-size: 0.77rem; color: var(--gray-500); }
+.hvc-title { font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; color: rgba(255,255,255,0.9); }
+.hvc-sub   { font-size: 0.77rem; color: rgba(255,255,255,0.6); }
 
 /* Code preview card */
 .hero-visual-main {
@@ -538,15 +542,17 @@ ul, ol { list-style: none; }
 .step-card {
   flex: 1;
   max-width: 300px;
-  background: var(--white);
-  border: 1.5px solid var(--border);
-  border-radius: var(--r-md);
-  padding: 36px 28px;
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: var(--r-sm);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  padding: 32px 24px;
   text-align: left;
-  box-shadow: var(--shadow-sm);
+  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
   transition: box-shadow var(--t), transform var(--t);
 }
-.step-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
+.step-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
 
 .step-num {
   font-family: var(--font-display);
@@ -565,10 +571,10 @@ ul, ol { list-style: none; }
   font-family: var(--font-display);
   font-size: 1.05rem;
   font-weight: 700;
-  color: var(--text-heading);
+  color: rgba(255,255,255,0.9);
   margin-bottom: 10px;
 }
-.step-card p { font-size: 0.9rem; color: var(--text-body); line-height: 1.65; }
+.step-card p { font-size: 0.9rem; color: rgba(255,255,255,0.65); line-height: 1.65; }
 
 .step-connector {
   color: var(--gray-300);
@@ -654,7 +660,7 @@ ul, ol { list-style: none; }
 /* ---- Form Section ----------------------------------------- */
 .form-section {
   padding: 96px 0;
-  background: var(--white);
+  background: #0f1114;
   text-align: center;
 }
 
@@ -664,11 +670,13 @@ ul, ol { list-style: none; }
 }
 
 .form-card {
-  background: var(--white);
-  border: 1.5px solid var(--border);
-  border-radius: var(--r-xl);
-  padding: 44px 44px 40px;
-  box-shadow: var(--shadow-lg);
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: var(--r-lg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  padding: 40px 40px 36px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
   text-align: left;
 }
 
@@ -685,7 +693,7 @@ label {
   display: block;
   font-size: 0.84rem;
   font-weight: 600;
-  color: var(--gray-700);
+  color: rgba(255,255,255,0.8);
   margin-bottom: 8px;
   letter-spacing: 0.01em;
 }
@@ -693,9 +701,9 @@ label {
 /* Skill input wrap */
 .skill-input-wrap {
   position: relative;
-  border: 1.5px solid var(--border);
+  border: 1px solid rgba(255,255,255,0.1);
   border-radius: var(--r-sm);
-  background: var(--gray-50);
+  background: rgba(255,255,255,0.03);
   min-height: 48px;
   padding: 6px 10px;
   display: flex;
@@ -703,12 +711,12 @@ label {
   align-items: center;
   gap: 6px;
   cursor: text;
-  transition: border-color var(--t), box-shadow var(--t);
+  transition: border-color var(--t), box-shadow var(--t), background var(--t);
 }
 .skill-input-wrap:focus-within {
-  border-color: var(--indigo-500);
-  box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.12);
-  background: var(--white);
+  border-color: var(--indigo-400);
+  box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.2);
+  background: rgba(255,255,255,0.06);
 }
 
 /* An added skill chip inside the wrap */
@@ -755,12 +763,15 @@ label {
   box-shadow: none;
   font-family: var(--font-body);
   font-size: 0.93rem;
-  color: var(--gray-900);
+  color: rgba(255,255,255,0.85);
 }
 .skill-input-wrap input[type="text"]:focus {
   outline: none;
   box-shadow: none;
 }
+.skill-input-wrap input[type="text"]::placeholder {
+  color: rgba(255,255,255,0.4);
+}
 
 /*suggestions dropdown*/
 .skills-suggestions {
@@ -861,40 +872,43 @@ label {
 select, input[type="text"]:not(.skill-input-wrap input) {
   width: 100%;
   padding: 11px 14px;
-  border: 1.5px solid var(--border);
+  border: 1px solid rgba(255,255,255,0.1);
   border-radius: var(--r-xs);
   font-family: var(--font-body);
   font-size: 0.93rem;
-  color: var(--gray-900);
-  background: var(--gray-50);
+  color: rgba(255,255,255,0.85);
+  background: rgba(255,255,255,0.03);
   appearance: none;
   -webkit-appearance: none;
   transition: border-color var(--t), box-shadow var(--t);
 }
+select::placeholder, input[type="text"]:not(.skill-input-wrap input)::placeholder {
+  color: rgba(255,255,255,0.4);
+}
 select:focus {
   outline: none;
-  border-color: var(--indigo-500);
-  box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.12);
-  background: var(--white);
+  border-color: var(--indigo-400);
+  box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.2);
+  background: rgba(255,255,255,0.06);
 }
 
 /* Form hints and error messages */
 .form-hint {
   display: block;
   font-size: 0.77rem;
-  color: var(--gray-400);
+  color: rgba(255,255,255,0.45);
   margin-top: 5px;
 }
 .form-error-msg {
   font-size: 0.81rem;
-  color: var(--red-500);
+  color: #fca5a5;
   margin-top: 5px;
   min-height: 18px;
   font-weight: 500;
 }
 .form-error-general {
   font-size: 0.84rem;
-  color: var(--red-500);
+  color: #fca5a5;
   margin-bottom: 12px;
   min-height: 20px;
   font-weight: 500;
@@ -992,32 +1006,34 @@ select:focus {
 
 /* Project card */
 .project-card {
-  background: var(--white);
-  border: 1.5px solid var(--border);
-  border-radius: var(--r-lg);
-  padding: 30px 28px;
-  box-shadow: var(--shadow-sm);
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.07);
+  border-radius: var(--r-md);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  padding: 28px 26px;
+  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
   display: flex;
   flex-direction: column;
   gap: 16px;
   transition: box-shadow var(--t), transform var(--t), border-color var(--t);
 }
 .project-card:hover {
-  box-shadow: var(--shadow-lg);
-  transform: translateY(-5px);
-  border-color: rgba(79, 110, 247, 0.3);
+  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
+  transform: translateY(-4px);
+  border-color: rgba(255,255,255,0.15);
 }
 
 .project-card-title {
   font-family: var(--font-display);
   font-size: 1.08rem;
   font-weight: 700;
-  color: var(--text-heading);
+  color: rgba(255,255,255,0.9);
 }
 .project-card-desc {
   font-size: 0.88rem;
-  color: var(--text-body);
-  line-height: 1.7;
+  color: rgba(255,255,255,0.65);
+  line-height: 1.72;
   flex: 1;
 }
 
@@ -1285,11 +1301,13 @@ select:focus {
 }
 
 .detail-section {
-  background: var(--white);
-  border: 1px solid var(--border);
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.07);
   border-radius: var(--r-md);
-  padding: 36px;
-  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  padding: 32px;
+  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
   margin-bottom: 24px;
 }
 .detail-section-header {
@@ -1310,11 +1328,11 @@ select:focus {
   font-family: var(--font-display);
   font-size: 1.1rem;
   font-weight: 700;
-  color: var(--text-heading);
+  color: rgba(255,255,255,0.9);
 }
 .detail-section-sub {
   font-size: 0.87rem;
-  color: var(--text-body);
+  color: rgba(255,255,255,0.6);
   margin-bottom: 28px;
   margin-top: -14px;
 }
@@ -1402,22 +1420,26 @@ select:focus {
 /* Sidebar */
 .detail-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 84px; }
 .sidebar-card {
-  background: var(--white);
-  border: 1px solid var(--border);
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.07);
   border-radius: var(--r-md);
-  padding: 24px;
-  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  padding: 22px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
 }
 .sidebar-card--code {
-  background: linear-gradient(135deg, var(--indigo-50) 0%, var(--purple-100) 100%);
-  border-color: rgba(79, 110, 247, 0.18);
+  background: rgba(79, 110, 247, 0.08);
+  border-color: rgba(79, 110, 247, 0.15);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
 }
 .sidebar-card-title {
   display: flex; align-items: center; gap: 8px;
   font-family: var(--font-display);
   font-size: 0.82rem;
   font-weight: 700;
-  color: var(--text-heading);
+  color: rgba(255,255,255,0.85);
   margin-bottom: 16px;
   text-transform: uppercase;
   letter-spacing: 0.07em;
@@ -1426,20 +1448,20 @@ select:focus {
 .tech-tag {
   font-size: 0.8rem;
   font-weight: 500;
-  color: var(--gray-700);
-  background: var(--gray-100);
-  border: 1px solid var(--border);
+  color: rgba(255,255,255,0.7);
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.1);
   padding: 4px 12px;
   border-radius: var(--r-xs);
 }
 .stats-list { display: flex; flex-direction: column; gap: 12px; }
 .stats-list li { display: flex; align-items: center; justify-content: space-between; font-size: 0.88rem; }
-.stats-label { color: var(--text-body); }
-.stats-value { font-weight: 600; color: var(--text-heading); font-size: 0.85rem; }
+.stats-label { color: rgba(255,255,255,0.6); }
+.stats-value { font-weight: 600; color: rgba(255,255,255,0.85); font-size: 0.85rem; }
 .stats-value--beginner     { color: #065f46; }
 .stats-value--intermediate { color: #78350f; }
 .stats-value--advanced     { color: #7f1d1d; }
-.sidebar-card-desc { font-size: 0.85rem; color: var(--text-body); line-height: 1.65; margin-bottom: 16px; }
+.sidebar-card-desc { font-size: 0.85rem; color: rgba(255,255,255,0.65); line-height: 1.65; margin-bottom: 16px; }
 .sidebar-code-actions { display: flex; gap: 10px; }
 .btn-view-code-sm {
   flex: 1;

From 33ab2da5b66fecb3249803208f6464c5baaaa9c0 Mon Sep 17 00:00:00 2001
From: Lalitya31 <lalityadodla@gmail.com>
Date: Sun, 17 May 2026 19:30:20 +0530
Subject: [PATCH 5/9] increase whitespace between elements

---
 static/style.css | 50 ++++++++++++++++++++++++------------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/static/style.css b/static/style.css
index e58c3bb0..7165f08c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -402,12 +402,12 @@ ul, ol { list-style: none; }
   align-items: center;
   gap: 14px;
   background: rgba(255,255,255,0.07);
-  border: 1px solid rgba(255,255,255,0.12);
+  border: 1px solid rgba(255,255,255,0.08);
   border-radius: var(--r-md);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  padding: 16px 20px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+  padding: 14px 16px;
+  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
 }
 .hvc-icon {
   width: 40px; height: 40px;
@@ -535,7 +535,7 @@ ul, ol { list-style: none; }
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0;
+  gap: 20px;
   margin-top: 16px;
 }
 
@@ -543,16 +543,16 @@ ul, ol { list-style: none; }
   flex: 1;
   max-width: 300px;
   background: rgba(255,255,255,0.05);
-  border: 1px solid rgba(255,255,255,0.08);
+  border: 1px solid rgba(255,255,255,0.05);
   border-radius: var(--r-sm);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
-  padding: 32px 24px;
+  padding: 28px 22px;
   text-align: left;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
   transition: box-shadow var(--t), transform var(--t);
 }
-.step-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
+.step-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); transform: translateY(-1px); }
 
 .step-num {
   font-family: var(--font-display);
@@ -593,7 +593,7 @@ ul, ol { list-style: none; }
 .features-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
+  gap: 28px;
   text-align: left;
   margin-top: 16px;
 }
@@ -671,12 +671,12 @@ ul, ol { list-style: none; }
 
 .form-card {
   background: rgba(255,255,255,0.05);
-  border: 1px solid rgba(255,255,255,0.08);
+  border: 1px solid rgba(255,255,255,0.05);
   border-radius: var(--r-lg);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
-  padding: 40px 40px 36px;
-  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
+  padding: 36px 36px 32px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
   text-align: left;
 }
 
@@ -999,7 +999,7 @@ select:focus {
 .results-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 26px;
+  gap: 30px;
   text-align: left;
   margin-top: 16px;
 }
@@ -1007,21 +1007,21 @@ select:focus {
 /* Project card */
 .project-card {
   background: rgba(255,255,255,0.04);
-  border: 1px solid rgba(255,255,255,0.07);
+  border: 1px solid rgba(255,255,255,0.05);
   border-radius: var(--r-md);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
-  padding: 28px 26px;
-  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
+  padding: 26px 24px;
+  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
   display: flex;
   flex-direction: column;
   gap: 16px;
   transition: box-shadow var(--t), transform var(--t), border-color var(--t);
 }
 .project-card:hover {
-  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
-  transform: translateY(-4px);
-  border-color: rgba(255,255,255,0.15);
+  box-shadow: 0 3px 14px rgba(0,0,0,0.1);
+  transform: translateY(-2px);
+  border-color: rgba(255,255,255,0.1);
 }
 
 .project-card-title {
@@ -1302,12 +1302,12 @@ select:focus {
 
 .detail-section {
   background: rgba(255,255,255,0.04);
-  border: 1px solid rgba(255,255,255,0.07);
+  border: 1px solid rgba(255,255,255,0.05);
   border-radius: var(--r-md);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
-  padding: 32px;
-  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
+  padding: 30px;
+  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
   margin-bottom: 24px;
 }
 .detail-section-header {
@@ -1421,12 +1421,12 @@ select:focus {
 .detail-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 84px; }
 .sidebar-card {
   background: rgba(255,255,255,0.04);
-  border: 1px solid rgba(255,255,255,0.07);
+  border: 1px solid rgba(255,255,255,0.05);
   border-radius: var(--r-md);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
-  padding: 22px;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+  padding: 20px;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
 }
 .sidebar-card--code {
   background: rgba(79, 110, 247, 0.08);

From 64984066f4e820cc2057458537554d6d58b6c95f Mon Sep 17 00:00:00 2001
From: Lalitya31 <lalityadodla@gmail.com>
Date: Sun, 17 May 2026 19:55:07 +0530
Subject: [PATCH 6/9] uniform background colors (remove unstable white and keep
 all blue hues as in original)

---
 static/style.css | 190 +++++++++++++++++++++++++++++++----------------
 1 file changed, 125 insertions(+), 65 deletions(-)

diff --git a/static/style.css b/static/style.css
index 7165f08c..e8642be9 100644
--- a/static/style.css
+++ b/static/style.css
@@ -26,6 +26,16 @@
   --hero-violet-muted: #4b426d;
   --surface-soft: #f6f7fb;
   --surface-soft-alt: #f1f3f9;
+  --page-bg: #27306f;
+  --page-bg-soft: #303b82;
+  --surface-muted: rgba(255,255,255,0.055);
+  --surface-muted-strong: rgba(255,255,255,0.085);
+  --border-muted: rgba(255,255,255,0.12);
+  --border-muted-soft: rgba(255,255,255,0.075);
+  --neon-line: rgba(126, 231, 255, 0.42);
+  --neon-line-pink: rgba(236, 72, 153, 0.24);
+  --neon-line-gold: rgba(252, 211, 77, 0.18);
+  --neon-glow: rgba(126, 231, 255, 0.12);
 
   --yellow-400: #fbbf24;
   --yellow-300: #fcd34d;
@@ -87,8 +97,13 @@
 html { scroll-behavior: smooth; }
 body {
   font-family: var(--font-body);
-  color: var(--gray-700);
-  background: var(--white);
+  color: rgba(255,255,255,0.72);
+  background: var(--page-bg);
+  background-image:
+    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 38%),
+    radial-gradient(circle at 18% 0%, rgba(126, 231, 255, 0.08), transparent 34%),
+    radial-gradient(circle at 86% 12%, rgba(236, 72, 153, 0.07), transparent 30%);
+  background-attachment: fixed;
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
 }
@@ -97,6 +112,23 @@ a { color: var(--indigo-500); text-decoration: none; }
 a:hover { text-decoration: underline; }
 ul, ol { list-style: none; }
 
+:is(.skill-strip, .how-section, .features-section, .form-section, .results-section, .cta-section, .footer, .detail-hero, .detail-body) {
+  position: relative;
+}
+
+:is(.skill-strip, .how-section, .features-section, .form-section, .results-section, .cta-section, .footer, .detail-hero, .detail-body)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: max(32px, calc((100% - 1140px) / 2 + 32px));
+  right: max(32px, calc((100% - 1140px) / 2 + 32px));
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--neon-line-pink), var(--neon-line), var(--neon-line-gold), transparent);
+  box-shadow: 0 0 18px var(--neon-glow);
+  z-index: 1;
+  pointer-events: none;
+}
+
 /* ---- Shared utilities -------------------------------------- */
 .container {
   max-width: 1140px;
@@ -110,8 +142,9 @@ ul, ol { list-style: none; }
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--indigo-600);
-  background: var(--indigo-100);
+  color: rgba(255,255,255,0.78);
+  background: var(--surface-muted-strong);
+  border: 1px solid var(--border-muted);
   border-radius: var(--r-xs);
   padding: 4px 14px;
   margin-bottom: 16px;
@@ -121,7 +154,7 @@ ul, ol { list-style: none; }
   font-family: var(--font-display);
   font-size: clamp(1.75rem, 3.5vw, 2.5rem);
   font-weight: 800;
-  color: var(--text-heading);
+  color: var(--white);
   letter-spacing: -0.035em;
   line-height: 1.15;
   margin-bottom: 12px;
@@ -129,7 +162,7 @@ ul, ol { list-style: none; }
 
 .section-sub {
   font-size: 1.02rem;
-  color: var(--text-body);
+  color: rgba(255,255,255,0.62);
   max-width: 540px;
   margin: 0 auto 56px;
   line-height: 1.75;
@@ -237,7 +270,7 @@ ul, ol { list-style: none; }
 .hero {
   position: relative;
   overflow: hidden;
-  background: linear-gradient(155deg, var(--hero-indigo-deep) 0%, var(--hero-indigo-mid) 52%, var(--hero-violet-muted) 100%);
+  background: var(--page-bg);
   padding: 130px 32px 90px;
   min-height: 92vh;
   display: flex;
@@ -251,7 +284,7 @@ ul, ol { list-style: none; }
   right: 0;
   bottom: 0;
   height: 130px;
-  background: linear-gradient(180deg, rgba(18, 24, 66, 0) 0%, rgba(241, 243, 249, 0.92) 78%, var(--surface-soft) 100%);
+  background: linear-gradient(180deg, rgba(39, 48, 111, 0) 0%, var(--page-bg) 100%);
   pointer-events: none;
 }
 
@@ -481,9 +514,9 @@ ul, ol { list-style: none; }
 
 /* ---- Skill Strip ------------------------------------------ */
 .skill-strip {
-  background: linear-gradient(180deg, var(--surface-soft-alt) 0%, var(--surface-soft) 62%, #f8f9fc 100%);
+  background: var(--page-bg);
   border-top: none;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-muted-soft);
   padding: 18px 32px;
   margin-top: -22px;
   position: relative;
@@ -500,7 +533,7 @@ ul, ol { list-style: none; }
 .skill-strip-label {
   font-size: 0.8rem;
   font-weight: 600;
-  color: var(--gray-500);
+  color: rgba(255,255,255,0.46);
   letter-spacing: 0.04em;
   text-transform: uppercase;
   white-space: nowrap;
@@ -514,21 +547,22 @@ ul, ol { list-style: none; }
 .ss-item {
   font-size: 0.88rem;
   font-weight: 600;
-  color: var(--gray-700);
+  color: rgba(255,255,255,0.72);
   padding: 0 16px;
 }
 .ss-sep {
   width: 1px;
   height: 16px;
-  background: var(--gray-300);
+  background: var(--border-muted);
   flex-shrink: 0;
 }
 
 /* ---- How It Works ----------------------------------------- */
 .how-section {
   padding: 96px 0;
-  background: var(--surface-soft);
+  background: var(--page-bg);
   text-align: center;
+  border-top: 1px solid var(--border-muted-soft);
 }
 
 .steps-grid {
@@ -542,8 +576,8 @@ ul, ol { list-style: none; }
 .step-card {
   flex: 1;
   max-width: 300px;
-  background: rgba(255,255,255,0.05);
-  border: 1px solid rgba(255,255,255,0.05);
+  background: var(--surface-muted);
+  border: 1px solid var(--border-muted-soft);
   border-radius: var(--r-sm);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
@@ -577,7 +611,7 @@ ul, ol { list-style: none; }
 .step-card p { font-size: 0.9rem; color: rgba(255,255,255,0.65); line-height: 1.65; }
 
 .step-connector {
-  color: var(--gray-300);
+  color: rgba(255,255,255,0.24);
   padding: 0 8px;
   flex-shrink: 0;
   margin-bottom: 20px;
@@ -586,8 +620,9 @@ ul, ol { list-style: none; }
 /* ---- Features Section ------------------------------------- */
 .features-section {
   padding: 96px 0;
-  background: var(--gray-50);
+  background: var(--page-bg);
   text-align: center;
+  border-top: 1px solid var(--border-muted-soft);
 }
 
 .features-grid {
@@ -600,6 +635,8 @@ ul, ol { list-style: none; }
 
 /* Feature cards with distinct colour backgrounds (Eduvo style) */
 .feature-card {
+  background: var(--surface-muted);
+  border: 1px solid var(--border-muted-soft);
   border-radius: var(--r-lg);
   padding: 38px 32px;
   position: relative;
@@ -608,13 +645,14 @@ ul, ol { list-style: none; }
 }
 .feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
 
-.feature-card--pink   { background: var(--pink-100); }
-.feature-card--yellow { background: var(--yellow-100); }
-.feature-card--purple { background: var(--purple-100); }
+.feature-card--pink,
+.feature-card--yellow,
+.feature-card--purple { background: var(--surface-muted); }
 
 .feature-card-icon {
   width: 52px; height: 52px;
-  background: rgba(255,255,255,0.7);
+  background: rgba(255,255,255,0.08);
+  border: 1px solid var(--border-muted-soft);
   border-radius: var(--r-sm);
   display: flex; align-items: center; justify-content: center;
   margin-bottom: 22px;
@@ -628,12 +666,12 @@ ul, ol { list-style: none; }
   font-family: var(--font-display);
   font-size: 1.08rem;
   font-weight: 700;
-  color: var(--text-heading);
+  color: rgba(255,255,255,0.9);
   margin-bottom: 12px;
 }
 .feature-card p {
   font-size: 0.91rem;
-  color: var(--gray-600);
+  color: rgba(255,255,255,0.64);
   line-height: 1.7;
   margin-bottom: 22px;
 }
@@ -644,24 +682,25 @@ ul, ol { list-style: none; }
   gap: 6px;
   font-size: 0.84rem;
   font-weight: 700;
-  color: var(--indigo-700);
-  border: 1.5px solid var(--indigo-200, #c7d2fe);
-  background: rgba(255,255,255,0.6);
+  color: rgba(255,255,255,0.82);
+  border: 1.5px solid var(--border-muted);
+  background: rgba(255,255,255,0.06);
   padding: 7px 16px;
   border-radius: var(--r-sm);
   transition: background var(--t), border-color var(--t);
 }
 .feature-card-link:hover {
-  background: var(--white);
-  border-color: var(--indigo-500);
+  background: rgba(255,255,255,0.1);
+  border-color: rgba(255,255,255,0.18);
   text-decoration: none;
 }
 
 /* ---- Form Section ----------------------------------------- */
 .form-section {
   padding: 96px 0;
-  background: #0f1114;
+  background: var(--page-bg);
   text-align: center;
+  border-top: 1px solid var(--border-muted-soft);
 }
 
 .form-card-outer {
@@ -670,8 +709,8 @@ ul, ol { list-style: none; }
 }
 
 .form-card {
-  background: rgba(255,255,255,0.05);
-  border: 1px solid rgba(255,255,255,0.05);
+  background: var(--surface-muted);
+  border: 1px solid var(--border-muted-soft);
   border-radius: var(--r-lg);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
@@ -941,13 +980,14 @@ select:focus {
 /* ---- Results Section -------------------------------------- */
 .results-section {
   padding: 80px 0 108px;
-  background: var(--indigo-50);
+  background: var(--page-bg);
   text-align: center;
+  border-top: 1px solid var(--border-muted-soft);
 }
 
 .loading-box {
   padding: 56px 0;
-  color: var(--text-body);
+  color: rgba(255,255,255,0.64);
 }
 .loading-dots {
   display: flex;
@@ -977,10 +1017,10 @@ select:focus {
   font-family: var(--font-display);
   font-size: 1.3rem;
   font-weight: 700;
-  color: var(--text-heading);
+  color: rgba(255,255,255,0.9);
   margin-bottom: 10px;
 }
-.empty-state p { color: var(--text-body); margin-bottom: 24px; }
+.empty-state p { color: rgba(255,255,255,0.64); margin-bottom: 24px; }
 .btn-try-again {
   padding: 11px 24px;
   background: var(--indigo-100);
@@ -1006,8 +1046,8 @@ select:focus {
 
 /* Project card */
 .project-card {
-  background: rgba(255,255,255,0.04);
-  border: 1px solid rgba(255,255,255,0.05);
+  background: var(--surface-muted);
+  border: 1px solid var(--border-muted-soft);
   border-radius: var(--r-md);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
@@ -1056,15 +1096,15 @@ select:focus {
 
 .project-card-footer {
   padding-top: 8px;
-  border-top: 1px solid var(--gray-100);
+  border-top: 1px solid var(--border-muted-soft);
 }
 .btn-details {
   display: block;
   width: 100%;
   padding: 11px 18px;
   background: transparent;
-  border: 1.5px solid var(--indigo-500);
-  color: var(--indigo-600);
+  border: 1.5px solid var(--border-muted);
+  color: rgba(255,255,255,0.82);
   border-radius: var(--r-xs);
   font-family: var(--font-body);
   font-size: 0.88rem;
@@ -1075,7 +1115,7 @@ select:focus {
   text-decoration: none;
 }
 .btn-details:hover {
-  background: var(--indigo-600);
+  background: rgba(255,255,255,0.1);
   color: var(--white);
   text-decoration: none;
 }
@@ -1083,9 +1123,23 @@ select:focus {
 /* ---- CTA Banner ------------------------------------------- */
 .cta-section {
   padding: 96px 32px;
-  background: linear-gradient(135deg, var(--indigo-800) 0%, var(--purple-700) 100%);
-  text-align: center;
+  background: var(--page-bg);
+  border-top: 1px solid var(--border-muted-soft);
+  position: relative;
+}
+.cta-section::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
+  z-index: 0;
+  pointer-events: none;
 }
+.cta-section > * {
+  position: relative;
+  z-index: 2;
+}
+.cta-inner { text-align: center; }
 .cta-inner h2 {
   font-family: var(--font-display);
   font-size: clamp(2rem, 4vw, 3rem);
@@ -1094,12 +1148,14 @@ select:focus {
   letter-spacing: -0.04em;
   line-height: 1.2;
   margin-bottom: 14px;
+  text-align: center;
 }
 .cta-accent { color: var(--yellow-300); }
 .cta-inner p {
   font-size: 1.05rem;
   color: rgba(255,255,255,0.72);
   margin-bottom: 36px;
+  text-align: center;
 }
 .btn-cta {
   display: inline-flex;
@@ -1124,7 +1180,7 @@ select:focus {
 
 /* ---- Footer ----------------------------------------------- */
 .footer {
-  background: var(--indigo-900);
+  background: var(--page-bg);
   padding: 64px 32px 0;
 }
 .footer-inner {
@@ -1179,10 +1235,10 @@ select:focus {
 .footer-bottom-links a:hover { color: rgba(255,255,255,0.7); text-decoration: none; }
 
 /* ---- Detail Page ------------------------------------------ */
-.detail-page { background: var(--gray-50); }
+.detail-page { background: var(--page-bg); }
 
 .detail-hero {
-  background: linear-gradient(135deg, var(--indigo-900) 0%, var(--indigo-800) 50%, var(--purple-700) 100%);
+  background: var(--page-bg);
   padding: 108px 0 60px;
   position: relative;
   overflow: hidden;
@@ -1292,7 +1348,11 @@ select:focus {
 .btn-view-code:hover { background: rgba(255,255,255,0.16); }
 
 /* Detail body */
-.detail-body { padding: 56px 0 96px; }
+.detail-body {
+  padding: 56px 0 96px;
+  background: var(--page-bg);
+  border-top: 1px solid var(--border-muted-soft);
+}
 .detail-grid {
   display: grid;
   grid-template-columns: 1fr 310px;
@@ -1301,8 +1361,8 @@ select:focus {
 }
 
 .detail-section {
-  background: rgba(255,255,255,0.04);
-  border: 1px solid rgba(255,255,255,0.05);
+  background: var(--surface-muted);
+  border: 1px solid var(--border-muted-soft);
   border-radius: var(--r-md);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
@@ -1344,7 +1404,7 @@ select:focus {
   align-items: flex-start;
   gap: 12px;
   font-size: 0.92rem;
-  color: var(--text-body);
+  color: rgba(255,255,255,0.66);
   line-height: 1.65;
 }
 .feature-check {
@@ -1378,7 +1438,7 @@ select:focus {
 .roadmap-line {
   flex: 1;
   width: 2px;
-  background: var(--border);
+  background: var(--border-muted);
   margin: 4px 0;
 }
 .roadmap-step:last-child .roadmap-line { display: none; }
@@ -1394,7 +1454,7 @@ select:focus {
   letter-spacing: 0.04em;
   margin-bottom: 6px;
 }
-.roadmap-step-text { font-size: 0.92rem; color: var(--text-body); line-height: 1.65; }
+.roadmap-step-text { font-size: 0.92rem; color: rgba(255,255,255,0.66); line-height: 1.65; }
 
 /* Resources list */
 .resource-list { display: flex; flex-direction: column; gap: 10px; }
@@ -1404,24 +1464,24 @@ select:focus {
   align-items: center;
   gap: 8px;
   font-size: 0.9rem;
-  color: var(--indigo-600);
+  color: rgba(255,255,255,0.78);
   font-weight: 500;
   padding: 9px 14px;
-  background: var(--gray-50);
-  border: 1px solid var(--border);
+  background: rgba(255,255,255,0.04);
+  border: 1px solid var(--border-muted-soft);
   border-radius: var(--r-xs);
   width: 100%;
   transition: background var(--t), border-color var(--t);
 }
-.resource-link:hover { background: var(--indigo-100); border-color: rgba(79, 110, 247, 0.3); text-decoration: none; }
+.resource-link:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); text-decoration: none; }
 .resource-link span { flex: 1; }
-.resource-plain { font-size: 0.9rem; color: var(--text-body); padding: 8px 0; }
+.resource-plain { font-size: 0.9rem; color: rgba(255,255,255,0.66); padding: 8px 0; }
 
 /* Sidebar */
 .detail-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 84px; }
 .sidebar-card {
-  background: rgba(255,255,255,0.04);
-  border: 1px solid rgba(255,255,255,0.05);
+  background: var(--surface-muted);
+  border: 1px solid var(--border-muted-soft);
   border-radius: var(--r-md);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
@@ -1458,9 +1518,9 @@ select:focus {
 .stats-list li { display: flex; align-items: center; justify-content: space-between; font-size: 0.88rem; }
 .stats-label { color: rgba(255,255,255,0.6); }
 .stats-value { font-weight: 600; color: rgba(255,255,255,0.85); font-size: 0.85rem; }
-.stats-value--beginner     { color: #065f46; }
-.stats-value--intermediate { color: #78350f; }
-.stats-value--advanced     { color: #7f1d1d; }
+.stats-value--beginner     { color: #86efac; }
+.stats-value--intermediate { color: #fde68a; }
+.stats-value--advanced     { color: #fca5a5; }
 .sidebar-card-desc { font-size: 0.85rem; color: rgba(255,255,255,0.65); line-height: 1.65; margin-bottom: 16px; }
 .sidebar-code-actions { display: flex; gap: 10px; }
 .btn-view-code-sm {
@@ -1635,10 +1695,10 @@ select:focus {
   font-family: var(--font-display);
   font-size: 1.5rem;
   font-weight: 700;
-  color: var(--text-heading);
+  color: rgba(255,255,255,0.9);
   margin-bottom: 12px;
 }
-.error-page-inner p { color: var(--text-body); margin-bottom: 32px; }
+.error-page-inner p { color: rgba(255,255,255,0.64); margin-bottom: 32px; }
 
 /* Primary button (used in error pages) */
 .btn-primary {

From 93574baf04f9fe3c8f63076649869c24050a4eb3 Mon Sep 17 00:00:00 2001
From: Lalitya31 <lalityadodla@gmail.com>
Date: Sun, 17 May 2026 20:01:57 +0530
Subject: [PATCH 7/9] fix generic project path section

---
 static/style.css     | 113 +++++++++++++++++++++++++++++++------------
 templates/index.html |   6 ---
 2 files changed, 83 insertions(+), 36 deletions(-)

diff --git a/static/style.css b/static/style.css
index e8642be9..a31e225c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -566,57 +566,99 @@ ul, ol { list-style: none; }
 }
 
 .steps-grid {
-  display: flex;
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   align-items: center;
-  justify-content: center;
-  gap: 20px;
-  margin-top: 16px;
+  gap: 28px;
+  margin-top: 20px;
+}
+
+.steps-grid::before {
+  content: "";
+  position: absolute;
+  left: 15%;
+  right: 15%;
+  top: 34px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(126, 231, 255, 0.18), rgba(236, 72, 153, 0.16), rgba(252, 211, 77, 0.2), transparent);
+  box-shadow: 0 0 14px rgba(126, 231, 255, 0.08);
+  pointer-events: none;
+}
+
+.steps-grid::after {
+  content: "";
+  position: absolute;
+  left: 49.8%;
+  top: 34px;
+  width: 1px;
+  height: 42px;
+  background: linear-gradient(180deg, rgba(126, 231, 255, 0.2), transparent);
+  opacity: 0.45;
+  pointer-events: none;
 }
 
 .step-card {
-  flex: 1;
-  max-width: 300px;
+  position: relative;
+  z-index: 1;
   background: var(--surface-muted);
   border: 1px solid var(--border-muted-soft);
   border-radius: var(--r-sm);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
-  padding: 28px 22px;
+  padding: 24px 22px;
   text-align: left;
   box-shadow: 0 1px 6px rgba(0,0,0,0.04);
-  transition: box-shadow var(--t), transform var(--t);
+  transition: border-color var(--t), background var(--t), box-shadow var(--t), transform var(--t);
+}
+.step-card:nth-child(2) {
+  background: rgba(255,255,255,0.065);
+}
+.step-card:last-child {
+  background: rgba(255,255,255,0.078);
+  border-color: rgba(126, 231, 255, 0.28);
+  box-shadow: 0 0 0 1px rgba(126, 231, 255, 0.03), 0 10px 30px rgba(18, 24, 64, 0.18);
+}
+.step-card:hover {
+  border-color: rgba(126, 231, 255, 0.22);
+  box-shadow: 0 2px 14px rgba(0,0,0,0.1);
+  transform: translateY(-1px);
 }
-.step-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); transform: translateY(-1px); }
 
 .step-num {
-  font-family: var(--font-display);
-  font-size: 0.75rem;
-  font-weight: 800;
-  letter-spacing: 0.06em;
-  color: var(--indigo-600);
-  background: var(--indigo-100);
-  display: inline-block;
-  padding: 4px 12px;
-  border-radius: var(--r-xs);
-  margin-bottom: 20px;
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  color: rgba(255,255,255,0.5);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 18px;
+  text-transform: uppercase;
+}
+.step-num::after {
+  content: "";
+  width: 34px;
+  height: 1px;
+  background: rgba(126, 231, 255, 0.22);
+}
+.step-card:last-child .step-num {
+  color: rgba(199, 243, 255, 0.82);
+}
+.step-card:last-child .step-num::after {
+  background: rgba(126, 231, 255, 0.48);
 }
 
 .step-card h3 {
   font-family: var(--font-display);
-  font-size: 1.05rem;
+  font-size: 1.02rem;
   font-weight: 700;
   color: rgba(255,255,255,0.9);
   margin-bottom: 10px;
 }
 .step-card p { font-size: 0.9rem; color: rgba(255,255,255,0.65); line-height: 1.65; }
 
-.step-connector {
-  color: rgba(255,255,255,0.24);
-  padding: 0 8px;
-  flex-shrink: 0;
-  margin-bottom: 20px;
-}
-
 /* ---- Features Section ------------------------------------- */
 .features-section {
   padding: 96px 0;
@@ -1730,9 +1772,20 @@ select:focus {
 
 @media (max-width: 860px) {
   .features-grid { grid-template-columns: 1fr; }
-  .steps-grid { flex-direction: column; align-items: stretch; }
-  .step-connector { display: none; }
-  .step-card { max-width: 100%; }
+  .steps-grid {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+  .steps-grid::before {
+    left: 28px;
+    right: auto;
+    top: 34px;
+    bottom: 34px;
+    width: 1px;
+    height: auto;
+    background: linear-gradient(180deg, transparent, rgba(126, 231, 255, 0.2), rgba(252, 211, 77, 0.18), transparent);
+  }
+  .steps-grid::after { display: none; }
 }
 
 @media (max-width: 640px) {
diff --git a/templates/index.html b/templates/index.html
index ea7dd5e0..1dc3d204 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -174,17 +174,11 @@ <h2 class="section-title">From Your Skills to Your<br>Next Project in Minutes</h
           <h3>Enter Your Skills</h3>
           <p>Type your programming skills or click quick-select chips. Add as many as you like.</p>
         </div>
-        <div class="step-connector">
-          <svg width="32" height="16" viewBox="0 0 32 16"><path d="M0 8 H28 M22 2 L30 8 L22 14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
-        </div>
         <div class="step-card">
           <div class="step-num">02</div>
           <h3>Set Your Preferences</h3>
           <p>Select your experience level, area of interest, and how much time you can commit.</p>
         </div>
-        <div class="step-connector">
-          <svg width="32" height="16" viewBox="0 0 32 16"><path d="M0 8 H28 M22 2 L30 8 L22 14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
-        </div>
         <div class="step-card">
           <div class="step-num">03</div>
           <h3>Get Matched Projects</h3>

From fad3e309ea399ef843c7d89c6c9a3f3e359a2a3d Mon Sep 17 00:00:00 2001
From: Lalitya31 <lalityadodla@gmail.com>
Date: Sun, 17 May 2026 20:05:46 +0530
Subject: [PATCH 8/9] use terminal like design for feature introduction

---
 static/style.css     | 117 +++++++++++++++++++++++++++++--------------
 templates/index.html |  39 ++++++++++-----
 2 files changed, 107 insertions(+), 49 deletions(-)

diff --git a/static/style.css b/static/style.css
index a31e225c..0154c3c7 100644
--- a/static/style.css
+++ b/static/style.css
@@ -675,65 +675,108 @@ ul, ol { list-style: none; }
   margin-top: 16px;
 }
 
-/* Feature cards with distinct colour backgrounds (Eduvo style) */
 .feature-card {
-  background: var(--surface-muted);
-  border: 1px solid var(--border-muted-soft);
-  border-radius: var(--r-lg);
-  padding: 38px 32px;
+  background: rgba(16, 22, 58, 0.26);
+  border: 1px solid rgba(255,255,255,0.095);
+  border-radius: var(--r-sm);
+  padding: 18px;
   position: relative;
   overflow: hidden;
-  transition: transform var(--t), box-shadow var(--t);
+  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
+}
+.feature-card:hover {
+  background: rgba(16, 22, 58, 0.32);
+  border-color: rgba(126, 231, 255, 0.18);
+  transform: translateY(-2px);
+  box-shadow: 0 14px 34px rgba(18, 24, 64, 0.18);
 }
-.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
 
 .feature-card--pink,
-.feature-card--yellow,
-.feature-card--purple { background: var(--surface-muted); }
+.feature-card--yellow { background: rgba(16, 22, 58, 0.26); }
+.feature-card--purple {
+  background: rgba(16, 22, 58, 0.34);
+  border-color: rgba(126, 231, 255, 0.22);
+}
 
-.feature-card-icon {
-  width: 52px; height: 52px;
-  background: rgba(255,255,255,0.08);
-  border: 1px solid var(--border-muted-soft);
-  border-radius: var(--r-sm);
-  display: flex; align-items: center; justify-content: center;
-  margin-bottom: 22px;
-  box-shadow: var(--shadow-xs);
+.feature-terminal-bar {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 36px;
+  margin: -4px -4px 20px;
+  padding: 8px 12px;
+  background: rgba(6, 12, 32, 0.24);
+  border: 1px solid rgba(255,255,255,0.075);
+  border-radius: var(--r-xs);
+}
+.ft-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  opacity: 0.72;
+}
+.ft-dot--red { background: #fca5a5; }
+.ft-dot--amber { background: #fcd34d; }
+.ft-dot--green { background: #86efac; }
+.ft-command {
+  margin-left: 6px;
+  font-family: var(--font-mono);
+  font-size: 0.76rem;
+  font-weight: 500;
+  color: rgba(218, 241, 255, 0.78);
+  letter-spacing: 0.01em;
+}
+.feature-meta,
+.feature-status {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  color: rgba(252, 211, 77, 0.74);
+  margin-bottom: 10px;
+}
+.feature-status {
+  color: rgba(134, 239, 172, 0.78);
+  margin: 0 0 18px;
 }
-.feature-card--pink   .feature-card-icon { color: var(--pink-500); }
-.feature-card--yellow .feature-card-icon { color: var(--orange-500); }
-.feature-card--purple .feature-card-icon { color: var(--purple-600); }
 
 .feature-card h3 {
-  font-family: var(--font-display);
-  font-size: 1.08rem;
-  font-weight: 700;
-  color: rgba(255,255,255,0.9);
-  margin-bottom: 12px;
+  font-family: var(--font-body);
+  font-size: 0.98rem;
+  font-weight: 600;
+  color: rgba(255,255,255,0.86);
+  margin-bottom: 8px;
 }
 .feature-card p {
-  font-size: 0.91rem;
-  color: rgba(255,255,255,0.64);
+  font-size: 0.9rem;
+  color: rgba(255,255,255,0.62);
   line-height: 1.7;
-  margin-bottom: 22px;
+  margin-bottom: 18px;
 }
 
 .feature-card-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font-size: 0.84rem;
-  font-weight: 700;
-  color: rgba(255,255,255,0.82);
-  border: 1.5px solid var(--border-muted);
-  background: rgba(255,255,255,0.06);
-  padding: 7px 16px;
-  border-radius: var(--r-sm);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: rgba(218, 241, 255, 0.82);
+  border: 1px solid rgba(126, 231, 255, 0.16);
+  background: rgba(126, 231, 255, 0.055);
+  padding: 7px 12px;
+  border-radius: var(--r-xs);
   transition: background var(--t), border-color var(--t);
 }
+.feature-card-link::before {
+  content: "$";
+  color: rgba(134, 239, 172, 0.68);
+}
 .feature-card-link:hover {
-  background: rgba(255,255,255,0.1);
-  border-color: rgba(255,255,255,0.18);
+  background: rgba(126, 231, 255, 0.09);
+  border-color: rgba(126, 231, 255, 0.28);
   text-decoration: none;
 }
 
diff --git a/templates/index.html b/templates/index.html
index 1dc3d204..00455fe6 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -200,30 +200,45 @@ <h2 class="section-title">Everything You Need to Start Building</h2>
       <div class="features-grid">
 
         <div class="feature-card feature-card--pink">
-          <div class="feature-card-icon">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+          <div class="feature-terminal-bar">
+            <span class="ft-dot ft-dot--red"></span>
+            <span class="ft-dot ft-dot--amber"></span>
+            <span class="ft-dot ft-dot--green"></span>
+            <span class="ft-command">&gt; personalized_matches</span>
           </div>
-          <h3>Personalized Matches</h3>
+          <span class="feature-meta">[INFO]</span>
+          <h3>Projects matched against:</h3>
           <p>Projects are scored against your exact skills, level, and interest — not pulled from a generic list.</p>
-          <a href="#find-project" class="feature-card-link">Try it now</a>
+          <div class="feature-status">STATUS: READY</div>
+          <a href="#find-project" class="feature-card-link">run match</a>
         </div>
 
         <div class="feature-card feature-card--yellow">
-          <div class="feature-card-icon">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+          <div class="feature-terminal-bar">
+            <span class="ft-dot ft-dot--red"></span>
+            <span class="ft-dot ft-dot--amber"></span>
+            <span class="ft-dot ft-dot--green"></span>
+            <span class="ft-command">&gt; roadmap.generate()</span>
           </div>
-          <h3>Step-by-Step Roadmaps</h3>
+          <span class="feature-meta">[OUTPUT]</span>
+          <h3>Build path returned:</h3>
           <p>Each project includes a numbered roadmap so you always know what to build next, without guessing.</p>
-          <a href="#find-project" class="feature-card-link">Explore roadmaps</a>
+          <div class="feature-status">STATUS: ORDERED</div>
+          <a href="#find-project" class="feature-card-link">view roadmap</a>
         </div>
 
         <div class="feature-card feature-card--purple">
-          <div class="feature-card-icon">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+          <div class="feature-terminal-bar">
+            <span class="ft-dot ft-dot--red"></span>
+            <span class="ft-dot ft-dot--amber"></span>
+            <span class="ft-dot ft-dot--green"></span>
+            <span class="ft-command">&gt; starter_code --init</span>
           </div>
-          <h3>Starter Code Included</h3>
+          <span class="feature-meta">[READY]</span>
+          <h3>Boilerplate included:</h3>
           <p>Download a working template for every project. Skip the blank-page problem and start building immediately.</p>
-          <a href="#find-project" class="feature-card-link">Get starter code</a>
+          <div class="feature-status">STATUS: BUILDABLE</div>
+          <a href="#find-project" class="feature-card-link">initialize project</a>
         </div>
 
       </div>

From 817a0f99ddd0ef89b7bdbdd618c7e03a87a0b459 Mon Sep 17 00:00:00 2001
From: Lalitya31 <lalityadodla@gmail.com>
Date: Sun, 17 May 2026 20:06:39 +0530
Subject: [PATCH 9/9] typorgaphy : manrope fonts

---
 starter_code/portfolio.html | 6 +++---
 static/style.css            | 4 ++--
 templates/index.html        | 2 +-
 templates/project.html      | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/starter_code/portfolio.html b/starter_code/portfolio.html
index e76ddb37..ab1a4461 100644
--- a/starter_code/portfolio.html
+++ b/starter_code/portfolio.html
@@ -52,7 +52,7 @@
 
   <!-- Google Fonts -->
   <link
-    href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap"
+    href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap"
     rel="stylesheet"
   />
 
@@ -75,8 +75,8 @@
       --color-bg-soft:    #f9fafb;
       --color-bg-hero:    #f0f2ff;
 
-      --font-display: "Sora", sans-serif;
-      --font-body:    "Inter", sans-serif;
+      --font-display: "Manrope", sans-serif;
+      --font-body:    "Manrope", sans-serif;
 
       --radius-sm: 8px;
       --radius-md: 14px;
diff --git a/static/style.css b/static/style.css
index 0154c3c7..2b81789a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -84,8 +84,8 @@
   --r-full: 9999px;
 
   /* Fonts */
-  --font-display: "Sora", sans-serif;
-  --font-body:    "Inter", sans-serif;
+  --font-display: "Manrope", sans-serif;
+  --font-body:    "Manrope", sans-serif;
   --font-mono:    "JetBrains Mono", "Courier New", monospace;
 
   /* Transition */
diff --git a/templates/index.html b/templates/index.html
index 00455fe6..a028db34 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,7 +6,7 @@
   <meta name="description" content="DevPath recommends real coding projects based on your skills, level, and interests — with full roadmaps and starter code." />
   <title>DevPath — Find Projects Based On Your Skills</title>
   <link rel="stylesheet" href="/static/style.css" />
-  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
 </head>
 <body>
   <!-- ============================================================
diff --git a/templates/project.html b/templates/project.html
index 71e883ec..0dd378f2 100644
--- a/templates/project.html
+++ b/templates/project.html
@@ -6,7 +6,7 @@
   <!-- Page title uses the project title injected by Flask's Jinja2 template engine -->
   <title>{{ project.title }} — DevPath</title>
   <link rel="stylesheet" href="/static/style.css" />
-  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
 </head>
 <body class="detail-page">