Feature/tzd 260005

domain.code-workspace

@@ -72,25 +72,9 @@
       "javascript": "javascriptreact"
     },
     "eslint.options": {
-      "extensions": [
-        ".js",
-        ".jsx",
-        ".md",
-        ".mdx",
-        ".ts",
-        ".tsx",
-        ".astro"
-      ]
+      "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx", ".astro"]
     },
-    "eslint.validate": [
-      "mdx",
-      "markdown",
-      "javascript",
-      "javascriptreact",
-      "typescript",
-      "typescriptreact",
-      "astro"
-    ],
+    "eslint.validate": ["mdx", "markdown", "javascript", "javascriptreact", "typescript", "typescriptreact", "astro"],
     "explorer.compactFolders": false,
     "explorer.confirmDelete": false,
     "explorer.confirmDragAndDrop": false,
@@ -127,10 +111,7 @@
     },
     "git.autofetch": true,
     "git.branchPrefix": "feature/",
-    "git.branchProtection": [
-      "develop",
-      "main"
-    ],
+    "git.branchProtection": ["develop", "main"],
     "git.branchRandomName.enable": true,
     "git.confirmSync": false,
     "git.enableCommitSigning": false,
@@ -141,9 +122,7 @@
     "js/ts.implicitProjectConfig.checkJs": true,
     "peacock.affectSideBarBorder": true,
     "peacock.color": "#010010",
-    "prettier.documentSelectors": [
-      "**/*.astro"
-    ],
+    "prettier.documentSelectors": ["**/*.astro"],
     "prettier.printWidth": 120,
     "prettier.quoteProps": "consistent",
     "prettier.singleQuote": false,
@@ -169,11 +148,7 @@
       "*.log": "default"
     },
     "zenMode.centerLayout": false,
-    "cSpell.words": [
-      "Poorna",
-      "Socie",
-      "withastro"
-    ],
+    "cSpell.words": ["Poorna", "Socie", "withastro"],
     "workbench.editor.limit.excludeDirty": true,
     "workbench.colorCustomizations": {
       "activityBar.activeBackground": "#040043",
@@ -195,6 +170,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/career.css

@@ -121,4 +121,4 @@
   .careers__container {
     padding: 0 2rem;
   }
-}
+}

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;
   }