Nico landing page

packages/docusaurus-theme/css/hero-background.css

@@ -0,0 +1 @@
+/* HeroBackground — reserved for future animation styles */

packages/docusaurus-theme/css/product-picker.css

@@ -25,12 +25,14 @@
     position: relative;
     padding-right: 1.2rem;
     transition: color 0.3s ease;
+    font-weight: var(--ifm-font-weight-bold);
 }
 
 .nf-picker-trigger:hover,
 .nf-resources-dropdown:hover,
 .navbar__item.dropdown--show .nf-picker-trigger,
-.navbar__item.dropdown--show .nf-resources-dropdown {
+.navbar__item.dropdown--show .nf-resources-dropdown,
+.navbar__item.nf-picker--open .nf-picker-trigger {
     color: var(--ifm-color-primary);
     text-decoration: none;
 }
@@ -59,17 +61,17 @@
     opacity: 1;
 }
 
-/* Open: chevron rotates 180° */
+/* Open: chevron holds the hover drop position */
 .nf-picker--open .nf-picker-trigger::after,
 .navbar__item.dropdown--show .nf-resources-dropdown::after {
-    transform: translateY(-50%) rotate(180deg);
+    transform: translateY(-20%);
     opacity: 1;
 }
 
 /* Dark mode: cyan accent on hover */
 [data-theme='dark'] .nf-picker-trigger:hover,
 [data-theme='dark'] .nf-resources-dropdown:hover,
-[data-theme='dark'] .nf-picker--open .nf-picker-trigger,
+[data-theme='dark'] .navbar__item.nf-picker--open .nf-picker-trigger,
 [data-theme='dark'] .navbar__item.dropdown--show .nf-resources-dropdown {
     color: #22d3ee;
 }
@@ -138,6 +140,7 @@
 
 /* Narrower panel for the 2-column Resources menu */
 .dropdown__menu:has(.picker-resources) { max-width: 700px; }
+.nf-picker-panel--narrow { max-width: 680px; }
 
 /* Ensure visibility when open */
 .dropdown--show > .dropdown__menu,
@@ -179,9 +182,9 @@
     transition: all 0.2s ease;
     border-radius: 8px;
 }
-.picker-link:hover  { background: rgba(0, 118, 255, 0.06); transform: translateX(3px); }
-.picker-link strong { color: var(--ifm-font-color-base); font-size: 0.95rem; font-weight: 900; letter-spacing: -0.02em; display: block; }
-.picker-link span   { color: #64748b; font-size: 0.82rem; display: block; margin-top: 2px; line-height: 1.35; }
+.picker-link:hover  { background: rgba(0, 118, 255, 0.06); transform: translateX(3px); text-decoration: none; }
+.picker-link strong { color: var(--ifm-font-color-base); font-size: 0.95rem; font-weight: 900; letter-spacing: -0.02em; display: block; text-decoration: none; }
+.picker-link span   { color: #64748b; font-size: 0.82rem; display: block; margin-top: 2px; line-height: 1.35; text-decoration: none; }
 
 /* ── Mobile (<= 996 px) ─────────────────────────────────────────────────── */
 @media (max-width: 996px) {

packages/docusaurus-theme/css/theme.css

@@ -1,20 +1,51 @@
-/**
- * NetFoundry Docusaurus Theme - Combined Styles
- *
- * This file is automatically loaded by the theme via getClientModules().
- *
- * Consuming projects no longer need to manually add these imports
- * to their custom.css files.
- */
-
-/* CSS variables for light mode */
-@import "./vars.css";
-
-/* CSS variables for dark mode */
-@import "./vars-dark.css";
-
-/* Layout styles */
-@import "./layout.css";
-
-/* Legacy design system variables and comprehensive styling */
-@import "./legacy.css";
+/**
+ * NetFoundry Docusaurus Theme - Combined Styles
+ *
+ * This file is automatically loaded by the theme via getClientModules().
+ *
+ * Consuming projects no longer need to manually add these imports
+ * to their custom.css files.
+ */
+
+/* CSS variables for light mode */
+@import "./vars.css";
+
+/* CSS variables for dark mode */
+@import "./vars-dark.css";
+
+/* Layout styles */
+@import "./layout.css";
+
+/* Legacy design system variables and comprehensive styling */
+@import "./legacy.css";
+
+/* ── Footer social link hover ───────────────────────────────────────────── */
+footer a[class*="footerSocialLink"] {
+    transition: all 0.2s ease;
+}
+
+[data-theme='dark'] footer a[class*="footerSocialLink"] {
+    background-color: #1a2640;
+    color: #64748b;
+    border: 1px solid rgba(148, 163, 184, 0.1);
+}
+[data-theme='dark'] footer a[class*="footerSocialLink"]:hover {
+    background-color: #22d3ee;
+    color: #020617;
+    border-color: transparent;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(34, 211, 238, 0.35);
+}
+
+[data-theme='light'] footer a[class*="footerSocialLink"] {
+    background-color: #e2e8f0;
+    color: #475569;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+}
+[data-theme='light'] footer a[class*="footerSocialLink"]:hover {
+    background-color: #0891b2;
+    color: #ffffff;
+    border-color: transparent;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(8, 145, 178, 0.3);
+}

packages/docusaurus-theme/package.json

@@ -51,13 +51,17 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
+    "@docsearch/css": "^3",
     "@docsearch/react": "^3",
+    "@types/three": "^0.183.1",
     "algoliasearch": "^5",
     "clsx": "^2.0.0",
     "instantsearch.js": "^4",
     "react-device-detect": "^2.2.3",
     "react-github-btn": "^1.4.0",
-    "react-instantsearch": "^7"
+    "react-instantsearch": "^7",
+    "three": "^0.134.0",
+    "vanta": "^0.5.24"
   },
   "devDependencies": {
     "@docusaurus/core": "^3",
@@ -67,6 +71,7 @@
     "@types/js-yaml": "^4.0.9",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/three": "^0.183.1",
     "jest": "^30.0.4",
     "react": "^18",
     "react-dom": "^18",