Feature/tzd 260005

domain.code-workspace

@@ -170,6 +170,7 @@
     },
     "zenMode.centerLayout": false,
     "cSpell.words": [
+      "Boisu",
       "Poorna",
       "Socie",
       "withastro"
@@ -195,6 +196,6 @@
       "titleBar.inactiveBackground": "#01001099",
       "titleBar.inactiveForeground": "#e7e7e799",
       "tab.activeBorder": "#040043"
-    },
+    }
   }
 }

package.json

@@ -65,7 +65,10 @@
     "@astrojs/react": "4.1.2",
     "@astrojs/rss": "4.0.11",
     "@astrojs/tailwind": "5.1.4",
+    "@fontsource/orbitron": "5.2.8",
     "@fontsource/roboto": "5.1.0",
+    "@fontsource/sora": "5.2.8",
+    "@fontsource/space-grotesk": "5.2.10",
     "@radix-ui/react-slot": "1.1.1",
     "astro": "5.1.1",
     "astro-aws-amplify": "0.1.0",
@@ -102,4 +105,4 @@
     "prettier-plugin-astro": "0.14.1",
     "prettier-plugin-tailwindcss": "0.6.8"
   }
-}
+}

public/theme.js

@@ -1,7 +1,7 @@
-(function () {
-  const savedTheme = localStorage.getItem("theme");
-  console.log("Saved theme:", savedTheme);
-  if (savedTheme) {
-    document.documentElement.setAttribute("data-theme", savedTheme);
-  }
-})();
+(function () {
+  const savedTheme = localStorage.getItem("theme");
+  console.log("Saved theme:", savedTheme);
+  if (savedTheme) {
+    document.documentElement.setAttribute("data-theme", savedTheme);
+  }
+})();

src/assets/styles/card.css

@@ -2,42 +2,67 @@
   list-style: none;
   display: flex;
   padding: 1px;
-  background-color: #23262d;
-  background-image: none;
-  background-size: 400%;
-  border-radius: 7px;
-  background-position: 100%;
-  transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+
+  /* 🌗 Theme based background */
+  background-color: hsl(var(--background));
+
+  border-radius: 8px;
+  overflow: hidden;
+
+  /* subtle border effect */
+  box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.1);
+
+  transition: all 0.3s ease;
 }
 
 .link-card > a {
   width: 100%;
   text-decoration: none;
   line-height: 1.4;
+
   padding: calc(1.5rem - 1px);
   border-radius: 8px;
-  color: white;
-  background-color: #23262d;
-  opacity: 0.8;
+
+  /* 🌗 Theme colors */
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+
+  transition: all 0.3s ease;
 }
 
-h2 {
+/* Title */
+.link-card h2 {
   margin: 0;
   font-size: 1.25rem;
-  transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  font-weight: 600;
+
+  color: hsl(var(--foreground));
+
+  transition: color 0.3s ease;
 }
 
-p {
+/* Description */
+.link-card p {
   margin-top: 0.5rem;
   margin-bottom: 0;
-}
 
-.link-card:is(:hover, :focus-within) {
-  background-position: 0;
-  background-image: var(--accent-gradient);
+  color: hsl(var(--foreground) / 0.7);
+  font-size: 0.95rem;
+  line-height: 1.6;
 }
 
-.link-card:is(:hover, :focus-within) h2 {
-  color: rgb(var(--accent-light));
+/* Hover effect */
+.link-card:hover,
+.link-card:focus-within {
+  transform: translateY(-4px);
+
+  /* subtle highlight */
+  box-shadow:
+    inset 0 0 0 1px hsl(var(--foreground) / 0.15),
+    0 10px 30px -10px hsl(var(--foreground) / 0.2);
 }
+
+/* Hover title color */
+.link-card:hover h2 {
+  color: rgb(var(--accent));
+}

src/assets/styles/custom-font.css

@@ -1,7 +1,9 @@
 /* src/styles/custom-font.css */
+
+
 @font-face {
-  font-family: "Mudra";
-  src: url("/assets/fonts/MudraMohta-Regular.ttf") format("truetype");
+  font-family: "Boisu";
+  src: url("../assets/fonts/Boisu-Stroke.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
-}
+}

src/assets/styles/globals.css

@@ -1,22 +1,31 @@
-/*@import "./custom-font.css";*/
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   :root {
-
     --font-size-min: 16;
     --font-size-max: 20;
     --font-ratio-min: 1.2;
     --font-ratio-max: 1.33;
     --font-width-min: 375;
     --font-width-max: 1500;
+
+    /* 🎨 LIGHT THEME */
+    --background: 0 0% 100%;
+    --foreground: 222 47% 11%;
+
     --accent: 136, 58, 234;
     --accent-light: 224, 204, 250;
     --accent-dark: 49, 10, 101;
   }
-
+
+  /* 🌙 DARK THEME */
+  .dark {
+    --background: 222 47% 11%;
+    --foreground: 0 0% 100%;
+  }
+
   html {
     color-scheme: light dark;
     height: 100%;
@@ -39,28 +48,38 @@
     overflow-x: hidden;
     display: block;
     font-family: "Roboto", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
-    transition: background-color 0.3s ease;
-
+
+    background: hsl(var(--background));
+    color: hsl(var(--foreground));
+
+    transition: background-color 0.3s ease, color 0.3s ease;
   }
 
-  /* Grid Background */
+  /* ❌ LIGHT MODE → NO GRID */
   body::before {
-    --size: 45px;
-    --line: rgba(255, 255, 255, 0.06);
+    display: none;
+  }
+
+  /* ✅ DARK MODE → GRID */
+  .dark body::before {
     content: "";
     position: fixed;
     inset: 0;
     width: 100%;
     height: 100%;
-    background:
-      linear-gradient(90deg, var(--line) 1px, transparent 1px),
+
+    --size: 45px;
+    --line: rgba(255, 255, 255, 0.06);
+
+    background: linear-gradient(90deg, var(--line) 1px, transparent 1px),
       linear-gradient(var(--line) 1px, transparent 1px);
+
     background-size: var(--size) var(--size);
+
     pointer-events: none;
     z-index: -1;
   }
 
-  /* MAIN FIX */
   main {
     display: block !important;
     width: 100% !important;
@@ -90,16 +109,6 @@
     resize: none;
   }
 
-  .whiteBg {
-    background: #ffffff;
-    color: #111111;
-  }
-
-  .darkBg {
-    background: #050505;
-    color: #ffffff;
-  }
-
   .yellowBtnHover:hover {
     background-color: #d4a900;
   }