vansh gupta BTEOP24O1051

CARD_SYSTEM_DOCS.md

@@ -9,7 +9,7 @@ The Unified Card System provides a consistent, reusable, and extensible card com
 ### Base Card Structure
 
 ```html
-<article class="card-system [variants] [effects]">
+<article class="dard-system [variants] [effects]">
   <!-- Card content -->
 </article>
 ```

about.html

@@ -192,6 +192,7 @@
       font-size: 1.5rem;
       font-weight: 700;
       background: linear-gradient(to right, var(--primary), var(--accent));
+      background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
@@ -219,15 +220,14 @@
       text-align: center;
       padding: 100px 0 60px;
     }
-
     .about-title {
       font-size: 3.5rem;
       margin-bottom: 20px;
       position: relative;
       background: linear-gradient(to right, var(--primary), var(--accent));
+      background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      background-clip: text;
     }
 
     .about-subtitle {
@@ -410,14 +410,15 @@
         height: 40px;
         margin-right: 10px;
       }
-
       .footer-logo span {
         font-size: 1.5rem;
         font-weight: 700;
         background: linear-gradient(to right, var(--primary), var(--accent));
+        background-clip: text;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
+
 
       .footer-about p {
         color: var(--text-light);
@@ -653,6 +654,7 @@
       font-size: 1.5rem;
       font-weight: 700;
       background: linear-gradient(to right, var(--primary), var(--accent));
+      background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }

contact.html

@@ -32,10 +32,11 @@
       .footer-left h2 {
             margin-bottom: 15px;
             background: linear-gradient(to right, var(--primary), var(--accent));
+            background-clip: text;
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
-        .footer-left p{
+        .footer-left p {
           color:rgba(0, 0, 0, 0.695);
         }
 
@@ -124,15 +125,14 @@
         0%, 100% { transform: translateY(0px); }
         50% { transform: translateY(-15px); }
       }
-
       .contact-heading h1 {
         font-size: 3rem;
         font-weight: 700;
         margin: 0;
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background-clip: text;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
-        background-clip: text;
         position: relative;
         padding-bottom: 15px;
       }
@@ -177,10 +177,10 @@
       /* Main Contact Section - Improved Layout */
       .contact-main {
         position: relative;
-        padding: 60px 20px;
+        padding: 55px 20px;
         max-width: 1200px;
         margin: 0 auto;
-        z-index:-1;
+        z-index: 1;
       }
 
       .contact-container {
@@ -633,12 +633,13 @@
         .footer-left h2 {
             margin-bottom: 15px;
             background: linear-gradient(to right, var(--primary), var(--accent));
+        .footer-left h2 {
+            margin-bottom: 15px;
+            background: linear-gradient(to right, var(--primary), var(--accent));
+            background-clip: text;
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
-
-        .footer-right h4 {
-            margin-bottom: 20px;
         }
 
         .footer-right ul {
@@ -708,16 +709,15 @@ <h1 class="fade-in mob-res">Contact Us</h1>
           <!-- 📧 Contact Form -->
           <form class="contact-form" id="contactForm">
             <div class="form-group scroll-fade">
-              <label for="name"> Name</label>
+              <label for="name"> Name:</label>
               <div class="form-input">
                 <i class="fa-solid fa-user"></i>
                 <input
                   type="text"
                   id="name"
-                  name="name"
+                  name="username"
                   placeholder="Enter your name"
-                  required
-                />
+                  required/>
               </div>
             </div>
 

styles.css

@@ -396,6 +396,18 @@ body.dark {
   transform: translateY(-2px);
 }
 
+/* ==================== GRADIENT TEXT UTILITY ==================== */
+/* Reusable class to apply gradient-colored text with vendor-prefixed
+   and standard `background-clip` for better compatibility. Keep a
+   readable fallback color for browsers that don't support the clip. */
+.gradient-text {
+  background: linear-gradient(90deg, var(--primary), var(--accent));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: var(--primary-text); /* fallback when `background-clip: text` isn't supported */
+}
+
 /* ==================== SCROLL & INTERACTION ENHANCEMENTS ==================== */
 /* Scroll Reveal Animation */
 .scroll-reveal {