remove foreground background class and improve performance in dark mode

Author: recursivezero

src/assets/styles/footer.css

@@ -8,5 +8,5 @@
 }
 
 .footer__nav--item {
-  @apply underline underline-offset-2 hover:text-blue-600 dark:hover:text-blue-600;
-}
+  @apply underline underline-offset-2 hover:text-blue-600 dark:text-sky-500 dark:hover:text-blue-600;
+}

src/components/AboutSection.astro

@@ -3,45 +3,41 @@ import image from "@/assets/images/hero.webp";
 import { Image } from "astro:assets";
 ---
 
-<section class="bg-background text-foreground overflow-hidden">
+<section class="overflow-hidden">
   <div class="mx-auto max-w-7xl px-6 py-20 lg:px-10 lg:py-28">
     <div class="grid items-center gap-14 lg:grid-cols-2">
       <!-- Left Content -->
       <div>
-        <p class="mb-5 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">Recursive Zero</p>
+        <p class="mb-5 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">
+          Recursive Zero
+        </p>
 
         <h1 class="text-5xl font-bold leading-tight tracking-tight md:text-6xl lg:text-7xl">
           We Build Digital <br />
           Products That <br />
-          Drive <span class="text-blue-600">Results.</span>
+          Drive <span class="text-blue-600 dark:text-sky-500">Results.</span>
         </h1>
 
-        <p class="text-foreground/70 mt-7 max-w-xl text-lg leading-8">
+        <p class="mt-7 max-w-xl text-lg leading-8">
           Recursive Zero crafts high-performance web apps, internal tools, and scalable digital solutions that simplify
           operations and accelerate business growth.
         </p>
 
         <!-- Buttons -->
         <div class="mt-10 flex flex-wrap gap-4">
           <!-- Contact -->
-          <a
-            href="#contactForm"
-            class="dark:border-foreground/20 text-foreground hover:bg-foreground hover:text-background rounded-xl border-2 border-gray-500 px-7 py-4 font-semibold transition"
-          >
+          <a href="#contactForm" class="rounded-xl border-2 border-gray-500 px-7 py-4 font-semibold transition">
             Contact Us →
           </a>
 
           <!-- Work (same tab) -->
-          <a
-            href="/work"
-            class="dark:border-foreground/20 text-foreground hover:bg-foreground hover:text-background rounded-xl border-2 border-gray-500 px-7 py-4 font-semibold transition"
-          >
+          <a href="/work" class="rounded-xl border-2 border-gray-500 px-7 py-4 font-semibold transition">
             View Our Work
           </a>
         </div>
 
         <!-- Points -->
-        <div class="text-foreground/70 mt-10 flex flex-wrap gap-6 text-sm">
+        <div class="mt-10 flex flex-wrap gap-6 text-sm">
           <span>✓ Fast Delivery</span>
           <span>✓ Scalable</span>
           <span>✓ Client-Focused</span>
@@ -60,7 +56,7 @@ import { Image } from "astro:assets";
           alt="Dashboard Preview"
           loading="eager"
           fetchpriority="high"
-          class="border-foreground/10 relative z-10 w-full rounded-3xl border object-cover shadow-2xl"
+          class="relative z-10 w-full rounded-3xl border object-cover shadow-2xl"
         />
       </div>
     </div>

src/components/AppsSimplifySection.astro

@@ -3,47 +3,46 @@ import workplaceImage from "@/assets/images/workplace.webp";
 import { Image } from "astro:assets";
 ---
 
-<section class="bg-background text-foreground">
+<section class="">
   <div class="mx-auto max-w-7xl px-6 py-20 lg:px-10">
     <div class="grid items-center gap-14 lg:grid-cols-2">
       <!-- Left Content -->
       <div>
-        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">What We Build</p>
+        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600 dark:text-sky-500">
+          What We Build
+        </p>
 
         <h2 class="text-4xl font-bold leading-tight tracking-tight md:text-5xl">
           Simplifying daily tasks <br />
           with handy mini apps
         </h2>
 
-        <p class="text-foreground/70 mt-6 max-w-xl text-lg leading-8">
+        <p class="mt-6 max-w-xl text-lg leading-8">
           Based in Bengaluru, Recursive Zero creates compact yet powerful apps designed to streamline your workflow,
           improve storage efficiency, and enhance everyday productivity.
         </p>
 
-        <p class="text-foreground/70 mt-4 max-w-xl text-lg leading-8">
+        <p class="mt-4 max-w-xl text-lg leading-8">
           Our solutions combine simplicity with smart technology, helping users and businesses achieve more with less
           effort.
         </p>
 
         <!-- Features -->
         <div class="mt-8 grid gap-4 sm:grid-cols-2">
-          <div class="border-foreground/10 bg-background/50 rounded-2xl border p-5">
-            <h3 class="text-foreground font-semibold">Fast & Lightweight</h3>
-            <p class="text-foreground/60 mt-2 text-sm">Built for speed and smooth performance.</p>
+          <div class="rounded-2xl border p-5">
+            <h3 class="font-semibold">Fast & Lightweight</h3>
+            <p class="mt-2 text-sm">Built for speed and smooth performance.</p>
           </div>
 
-          <div class="border-foreground/10 bg-background/50 rounded-2xl border p-5">
-            <h3 class="text-foreground font-semibold">Easy to Use</h3>
-            <p class="text-foreground/60 mt-2 text-sm">Clean UI focused on user productivity.</p>
+          <div class="rounded-2xl border p-5">
+            <h3 class="font-semibold">Easy to Use</h3>
+            <p class="mt-2 text-sm">Clean UI focused on user productivity.</p>
           </div>
         </div>
 
         <!-- Button -->
         <div class="mt-10">
-          <a
-            href="/work"
-            class="dark:border-foreground/20 text-foreground hover:bg-foreground hover:text-background rounded-xl border-2 border-gray-500 px-7 py-4 font-semibold transition"
-          >
+          <a href="/work" class="rounded-xl border-2 border-gray-500 px-7 py-4 font-semibold transition">
             Explore Apps →
           </a>
         </div>

src/components/BlogCard.astro

@@ -36,7 +36,7 @@ const formattedDate = formatDate(date);
 <article class="group h-full">
   <a href={url} target="_blank" rel="noopener noreferrer" class="block h-full">
     <div
-      class="border-foreground/10 bg-background/80 flex h-full flex-col overflow-hidden rounded-3xl border shadow-lg backdrop-blur-md transition-all duration-300 hover:-translate-y-3 hover:border-cyan-400/30 hover:shadow-2xl"
+      class="flex h-full flex-col overflow-hidden rounded-3xl border shadow-lg backdrop-blur-md transition-all duration-300 hover:-translate-y-3 hover:border-cyan-400/30 hover:shadow-2xl"
     >
       <!-- Image -->
       <figure class="h-64 overflow-hidden rounded-t-3xl">
@@ -68,19 +68,17 @@ const formattedDate = formatDate(date);
         </div>
 
         <!-- Title -->
-        <h3
-          class="text-foreground line-clamp-2 text-2xl font-bold leading-snug transition-colors duration-300 group-hover:text-blue-600"
+        <h2
+          class="line-clamp-2 text-2xl font-bold leading-snug transition-colors duration-300 group-hover:text-blue-600 dark:text-sky-500"
         >
           {title}
-        </h3>
+        </h2>
 
         <!-- Description -->
-        {description && <p class="text-foreground/75 mt-4 line-clamp-3 flex-1 text-base leading-8">{description}</p>}
+        {description && <p class="mt-4 line-clamp-3 flex-1 text-base leading-8">{description}</p>}
 
         <!-- Bottom Meta -->
-        <div
-          class="border-foreground/10 text-foreground/70 mt-6 flex items-center justify-between border-t pt-4 text-sm"
-        >
+        <div class="mt-6 flex items-center justify-between border-t pt-4 text-sm">
           {
             displayUrl ? (
               <span class="truncate text-blue-900 underline underline-offset-4 transition hover:text-blue-700 dark:text-white dark:hover:text-gray-300">
@@ -91,15 +89,15 @@ const formattedDate = formatDate(date);
                 {new URL(url).origin}
               </span>
             ) : (
-              <span class="text-foreground/80">
+              <span class="">
                 By <span class="font-bold text-slate-900 dark:text-white">{author || "Recursive Zero"}</span>
               </span>
             )
           }
 
           {
             formattedDate && (
-              <time datetime={date} class="text-foreground/60 italic">
+              <time datetime={date} class="italic">
                 {formattedDate}
               </time>
             )

src/components/BlogsSection.astro

@@ -7,22 +7,22 @@ const posts = await getCollection("blog");
 const slicedPosts = posts.slice(0, 3);
 ---
 
-<section class="bg-background py-20">
+<section class="py-20">
   <div class="mx-auto max-w-7xl px-6 lg:px-10">
     <!-- Top Heading -->
     <div class="mb-14 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
       <div>
         <p class="mb-3 text-sm font-semibold uppercase tracking-[0.25em] text-blue-600">Recent Blogs</p>
 
-        <h2 class="text-foreground text-4xl font-bold tracking-tight md:text-5xl">
+        <h2 class="text-4xl font-bold tracking-tight md:text-5xl">
           Insights, Updates <br class="hidden md:block" />
           & Stories
         </h2>
       </div>
 
       <a
         href="/blogs"
-        class="inline-flex items-center gap-2 text-base font-semibold text-blue-600 transition hover:gap-3"
+        class="inline-flex items-center gap-2 text-base font-semibold text-blue-600 transition hover:gap-3 dark:text-sky-500"
       >
         View All Blogs →
       </a>

src/components/ContactSection.astro

@@ -4,7 +4,7 @@ import { CONTACT_EMAIL } from "@/utils/constants";
 import { Image } from "astro:assets";
 ---
 
-<section id="contactForm" class="bg-background text-foreground">
+<section id="contactForm" class="">
   <div class="mx-auto max-w-7xl px-6 py-20 lg:px-10">
     <div class="grid items-center gap-14 lg:grid-cols-2">
       <!-- Left Content -->
@@ -13,32 +13,34 @@ import { Image } from "astro:assets";
 
         <h2 class="text-4xl font-bold leading-tight tracking-tight md:text-5xl">Reach Recursive Zero</h2>
 
-        <p class="text-foreground/70 mt-6 max-w-xl text-lg leading-8">
+        <p class="mt-6 max-w-xl text-lg leading-8">
           Tech simplified — Harness the power of modern technology with Recursive Zero. Send us a message and let’s
           build something impactful together.
         </p>
 
         <!-- Contact Info -->
-        <div class="text-foreground/70 mt-8 space-y-4">
+        <div class="mt-8 space-y-4">
           <!-- Email -->
           <div class="text-lg">
-            <span class="text-foreground font-semibold"> Email: </span>
+            <span class="font-semibold"> Email: </span>
 
-            <a href=`mailto:${CONTACT_EMAIL}` class="ml-1 break-all text-blue-600 transition hover:underline">
+            <a
+              href=`mailto:${CONTACT_EMAIL}`
+              class="ml-1 break-all italic text-blue-600 transition hover:underline dark:text-sky-500"
+            >
               {CONTACT_EMAIL}
             </a>
           </div>
 
           <!-- Phone (Not Clickable) -->
           <!-- Phone -->
           <!--<div class="text-lg">
-            <span class="text-foreground font-semibold"> Phone: </span>
+            <span class=" font-semibold"> Phone: </span>
           </div>-->
           <!-- Location -->
           <div class="text-lg">
-            <span class="text-foreground font-semibold"> Location: </span>
-
-            <span class="text-foreground/70 ml-1"> Bengaluru, India </span>
+            <span class="font-semibold"> Location: </span>
+            <span class="ml-1"> Bengaluru, India </span>
           </div>
         </div>
 
@@ -58,31 +60,31 @@ import { Image } from "astro:assets";
       </div>
 
       <!-- Right Form -->
-      <div class="border-foreground/10 bg-background/60 rounded-3xl border p-8 backdrop-blur-xl lg:p-10">
-        <h3 class="text-foreground text-2xl font-bold">Let's Talk</h3>
+      <div class="rounded-3xl border p-8 backdrop-blur-xl lg:p-10">
+        <h3 class="text-2xl font-bold">Let's Talk</h3>
 
-        <p class="text-foreground/60 mt-2">Fill the form and we’ll get back to you shortly.</p>
+        <p class="mt-2">Fill the form and we’ll get back to you shortly.</p>
 
         <form class="mt-8 space-y-5">
           <!-- NAME -->
           <input
             type="text"
             placeholder="Full Name"
-            class="border-foreground/10 dark:bg-background text-foreground placeholder:text-foreground/40 h-14 w-full rounded-xl border bg-white px-5 outline-none focus:border-cyan-500"
+            class="dark: placeholder: h-14 w-full rounded-xl border bg-white px-5 outline-none focus:border-cyan-500"
           />
 
           <!-- EMAIL -->
           <input
             type="email"
             placeholder="Email Address"
-            class="border-foreground/10 dark:bg-background text-foreground placeholder:text-foreground/40 h-14 w-full rounded-xl border bg-white px-5 outline-none focus:border-cyan-500"
+            class="dark: placeholder: h-14 w-full rounded-xl border bg-white px-5 outline-none focus:border-cyan-500"
           />
 
           <!-- MESSAGE -->
           <textarea
             rows="5"
             placeholder="Your Message"
-            class="border-foreground/10 dark:bg-background text-foreground placeholder:text-foreground/40 w-full rounded-xl border bg-white px-5 py-4 outline-none focus:border-cyan-500"
+            class="dark: placeholder: w-full rounded-xl border bg-white px-5 py-4 outline-none focus:border-cyan-500"
           ></textarea>
 
           <!-- BUTTON -->