Update style.css

style.css

@@ -5,105 +5,100 @@
   font-family:"Inter","Segoe UI",system-ui,sans-serif;
 }
 
-/* ===== LAVENDER + PINK BACKGROUND (NO BLACK) ===== */
+/* ===== OPEN FLOW BACKGROUND (NO BLACK) ===== */
 body{
   min-height:100vh;
   background:
-    radial-gradient(1100px at 10% 10%, rgba(221,214,254,0.75), transparent 40%),
-    radial-gradient(1000px at 90% 20%, rgba(252,165,165,0.55), transparent 45%),
-    radial-gradient(900px at 50% 90%, rgba(240,171,252,0.55), transparent 45%),
-    linear-gradient(180deg,#faf5ff,#fdf2f8);
+    radial-gradient(1200px at 15% 20%, rgba(196,181,253,0.55), transparent 45%),
+    radial-gradient(1000px at 85% 30%, rgba(253,164,175,0.45), transparent 45%),
+    linear-gradient(180deg,#f8fafc,#eef2ff);
   color:#1f2937;
-  padding:70px 18px;
+  padding:70px 20px 100px;
 }
 
-/* ===== ULTRA GLASS CARD ===== */
-.glass{
-  max-width:920px;
-  margin:0 auto 90px;
-  padding:52px;
-  border-radius:36px;
-
-  background: linear-gradient(
-    180deg,
-    rgba(255,255,255,0.78),
-    rgba(255,255,255,0.58)
-  );
-
-  backdrop-filter: blur(30px);
-  -webkit-backdrop-filter: blur(30px);
-
-  border:1px solid rgba(255,255,255,0.95);
-  box-shadow:
-    0 40px 100px rgba(168,85,247,0.18),
-    inset 0 1px 0 rgba(255,255,255,1);
-
-  transition: transform .6s ease, box-shadow .6s ease;
-}
-
-.glass:hover{
-  transform: translateY(-10px);
-  box-shadow:
-    0 70px 140px rgba(168,85,247,0.25),
-    inset 0 1px 0 rgba(255,255,255,1);
-}
-
-/* ===== HEADINGS ===== */
+/* ===== TYPOGRAPHY ===== */
 h1{
-  font-size:46px;
+  font-size:48px;
   font-weight:700;
-  margin-bottom:16px;
-  background:linear-gradient(90deg,#a78bfa,#f472b6,#fb7185);
+  margin-bottom:12px;
+  background:linear-gradient(90deg,#6366f1,#ec4899);
   -webkit-background-clip:text;
   -webkit-text-fill-color:transparent;
 }
 
 .subtitle{
   font-size:16px;
-  margin-bottom:28px;
-  color:#6b7280;
+  color:#475569;
+  margin-bottom:26px;
 }
 
 h2{
-  font-size:27px;
-  margin-bottom:20px;
-  color:#4c1d95;
-  letter-spacing:.3px;
+  font-size:26px;
+  margin:80px 0 20px;
+  color:#312e81;
 }
 
-/* ===== TEXT ===== */
 p{
   font-size:16px;
-  line-height:1.95;
-  color:#374151;
+  line-height:1.9;
+  color:#334155;
+  max-width:900px;
 }
 
-/* ===== LINKS ===== */
-.links a{
+/* ===== GLASS BUTTON ===== */
+.glass-btn{
   display:inline-block;
-  margin-right:26px;
-  margin-top:20px;
+  margin-top:22px;
+  padding:16px 42px;
+  border-radius:999px;
+
+  background:rgba(255,255,255,0.65);
+  backdrop-filter:blur(18px);
+  border:1px solid rgba(255,255,255,0.9);
+
+  color:#312e81;
+  font-weight:700;
+  letter-spacing:1px;
   text-decoration:none;
-  font-weight:600;
-  color:#7c3aed;
+
+  transition:all .4s ease;
   position:relative;
+  overflow:hidden;
 }
 
-.links a::after{
+.glass-btn::after{
   content:"";
   position:absolute;
-  left:0;
-  bottom:-6px;
-  width:100%;
-  height:2px;
-  background:linear-gradient(90deg,#a78bfa,#f472b6);
-  transform:scaleX(0);
-  transition:transform .4s ease;
+  inset:0;
+  background:radial-gradient(circle at center, rgba(255,255,255,0.6), transparent 60%);
+  opacity:0;
+  transition:.4s;
+}
+
+.glass-btn:hover{
+  transform:translateY(-4px);
+  box-shadow:0 20px 50px rgba(99,102,241,.25);
+}
+
+.glass-btn:active::after{
+  opacity:1;
 }
 
-.links a:hover::after{ transform:scaleX(1); }
+/* ===== LINKS ===== */
+.links a{
+  margin-right:26px;
+  text-decoration:none;
+  font-weight:600;
+  color:#4f46e5;
+  border-bottom:2px solid transparent;
+  transition:.3s;
+}
 
-/* ===== SKILLS : GLASS PILLS ===== */
+.links a:hover{
+  border-bottom-color:#ec4899;
+}
+
+/* ===== SKILLS (GLASS CHIPS) ===== */
 .skills{
   display:flex;
   flex-wrap:wrap;
@@ -111,59 +106,41 @@ p{
 }
 
 .skills span{
-  padding:12px 26px;
+  padding:12px 28px;
   border-radius:999px;
-  background:rgba(255,255,255,0.85);
-  backdrop-filter: blur(14px);
-  border:1px solid rgba(216,180,254,0.9);
+  background:rgba(255,255,255,0.7);
+  backdrop-filter:blur(14px);
+  border:1px solid rgba(255,255,255,0.9);
+  color:#312e81;
   font-size:14px;
-  color:#4c1d95;
+  transition:.3s;
 }
 
-/* ===== PROJECT CARD ===== */
-.project{
-  margin-top:38px;
-  padding:38px;
-  border-radius:32px;
-
-  background:rgba(255,255,255,0.78);
-  backdrop-filter: blur(26px);
+.skills span:hover{
+  transform:translateY(-4px);
+  box-shadow:0 12px 30px rgba(236,72,153,.25);
+}
 
-  border:1px solid rgba(216,180,254,0.95);
+/* ===== PROJECT LIST (NO BOX) ===== */
+.project{
+  margin-top:34px;
+  max-width:900px;
 }
 
 .project h3{
   font-size:21px;
-  margin-bottom:10px;
-  color:#3b0764;
-}
-
-/* ===== PROJECT BUTTON ===== */
-.project-btn{
-  display:inline-block;
-  margin-top:22px;
-  padding:16px 44px;
-  border-radius:999px;
-
-  background:linear-gradient(90deg,#a78bfa,#f472b6);
-  color:white;
-
-  font-weight:700;
-  letter-spacing:1px;
-  text-decoration:none;
-
-  transition: transform .4s ease, box-shadow .4s ease;
+  margin-bottom:8px;
+  color:#1e1b4b;
 }
 
-.project-btn:hover{
-  transform:scale(1.08);
-  box-shadow:0 0 45px rgba(244,114,182,0.45);
+.project p{
+  margin-bottom:14px;
 }
 
 /* ===== FOOTER ===== */
 footer{
+  margin-top:120px;
   text-align:center;
   font-size:13px;
-  color:#6b7280;
-  margin-bottom:50px;
+  color:#64748b;
 }