chore: address PR #191 review comments

docusaurus.config.ts

@@ -108,6 +108,16 @@ const config: Config = {
     navbar: {
       hideOnScroll: true,
       title: "OpenTDF",
+<<<<<<< chore/address-191-comments
+      logo: {
+        alt: "OpenTDF - Protect the Data, Build the Future",
+        src: "img/OpenTDF-Logo.png",
+        srcDark: "img/OpenTDF-Logo-White.png",
+        width: 32,
+        height: 32,
+      },
+=======
+>>>>>>> feat/site-redesign
       items: [
         {
           type: "doc",

src/components/landing/Community.module.css

@@ -108,3 +108,18 @@
     padding: 0 2rem;
   }
 }
+
+/* Light mode overrides */
+:global(html[data-theme='light']) .card {
+  background: #ffffff;
+  border-color: rgba(0, 0, 0, 0.07);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+:global(html[data-theme='light']) .body {
+  color: #4b5563;
+}
+
+:global(html[data-theme='light']) .cardIcon {
+  color: #6b7280;
+}

src/components/landing/DeveloperFirst.module.css

@@ -211,3 +211,17 @@
     padding: 0 2rem;
   }
 }
+
+/* Light mode overrides — install cmd and copy button intentionally stay dark (code) */
+:global(html[data-theme='light']) .card {
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+:global(html[data-theme='light']) .subheading {
+  color: #4b5563;
+}
+
+:global(html[data-theme='light']) .btnSecondary {
+  border-color: rgba(0, 0, 0, 0.15);
+}

src/components/landing/FinalCTA.module.css

@@ -110,3 +110,20 @@
     padding: 0 2rem;
   }
 }
+
+/* Light mode overrides */
+:global(html[data-theme='light']) .body {
+  color: #4b5563;
+}
+
+:global(html[data-theme='light']) .btnSecondary {
+  border-color: rgba(0, 0, 0, 0.15);
+}
+
+:global(html[data-theme='light']) .btnGhost {
+  border-color: rgba(0, 0, 0, 0.08);
+}
+
+:global(html[data-theme='light']) .btnGhost:hover {
+  border-color: rgba(0, 0, 0, 0.2);
+}

src/components/landing/Hero.module.css

@@ -210,3 +210,16 @@
     padding: 0 1.5rem;
   }
 }
+
+/* Light mode overrides — code window intentionally stays dark */
+:global(html[data-theme='light']) .bodyPrimary {
+  color: #4b5563;
+}
+
+:global(html[data-theme='light']) .btnSecondary {
+  border-color: rgba(0, 0, 0, 0.15);
+}
+
+:global(html[data-theme='light']) .btnSecondary:hover {
+  border-color: #22d3ee;
+}

src/components/landing/ProblemSolution.module.css

@@ -142,3 +142,19 @@
     padding: 0 2rem;
   }
 }
+
+/* Light mode overrides */
+:global(html[data-theme='light']) .card {
+  background: #ffffff;
+  border-color: rgba(0, 0, 0, 0.07);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+:global(html[data-theme='light']) .bodyPrimary,
+:global(html[data-theme='light']) .cardBody {
+  color: #4b5563;
+}
+
+:global(html[data-theme='light']) .btn {
+  border-color: rgba(0, 0, 0, 0.15);
+}

src/components/landing/Standards.module.css

@@ -179,3 +179,21 @@
     font-size: 2.25rem;
   }
 }
+
+/* Light mode overrides — diagram intentionally stays dark */
+:global(html[data-theme='light']) .body,
+:global(html[data-theme='light']) .featureItem {
+  color: #4b5563;
+}
+
+:global(html[data-theme='light']) .btnSecondary {
+  border-color: rgba(0, 0, 0, 0.15);
+}
+
+:global(html[data-theme='light']) .btnGhost {
+  border-color: rgba(0, 0, 0, 0.08);
+}
+
+:global(html[data-theme='light']) .btnGhost:hover {
+  border-color: rgba(0, 0, 0, 0.2);
+}

src/css/custom.css

@@ -82,15 +82,22 @@
   border-left: 2px solid #0891b2;
 }
 
-/* Tip admonition — amber secondary from homepage palette */
-.alert--secondary,
+/* Tip admonition — amber, light mode */
 div[class*="admonition-tip"],
 div[class*="admonitionTip"] {
   --ifm-alert-background-color: #fffbeb;
   --ifm-alert-border-color: #f59e0b;
   --ifm-alert-color: #92400e;
 }
 
+/* Tip admonition — amber, dark mode */
+html[data-theme='dark'] div[class*="admonition-tip"],
+html[data-theme='dark'] div[class*="admonitionTip"] {
+  --ifm-alert-background-color: #451a03;
+  --ifm-alert-border-color: #d97706;
+  --ifm-alert-color: #fde68a;
+}
+
 html[data-theme='dark'] {
   /* Override primary to teal in dark mode */
   --ifm-color-primary: #22d3ee;
@@ -137,11 +144,6 @@ html[data-theme='dark'] {
   --vds-homepage-subtitle-color: #aaa;
 }
 
-/* Dark mode: brand stays white (already set globally, this just reinforces it) */
-html[data-theme='dark'] .navbar .navbar__brand .navbar__title {
-  color: #fff;
-}
-
 /* Dark mode cookie consent */
 html[data-theme='dark'] .cookie-consent-banner a {
   color: var(--ifm-color-primary-light);
@@ -225,6 +227,44 @@ a[class*="embed_documentation_footer-"] {
   color: #67e8f9;
 }
 
+/* Footer — light mode overrides */
+html[data-theme='light'] .footer {
+  background-color: #f1f5f9;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+html[data-theme='light'] .footer__title {
+  color: #0f172a;
+}
+
+html[data-theme='light'] .footer__link-item {
+  color: #4b5563;
+}
+
+html[data-theme='light'] .footer__link-item:hover {
+  color: #0891b2;
+}
+
+html[data-theme='light'] .footer__bottom {
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+html[data-theme='light'] .footer__copyright {
+  color: #6b7280;
+}
+
+html[data-theme='light'] .footer__sponsor-text {
+  color: #4b5563;
+}
+
+html[data-theme='light'] .footer__sponsor-text a {
+  color: #0891b2;
+}
+
+html[data-theme='light'] .footer__sponsor-text a:hover {
+  color: #0e7490;
+}
+
 /**************
 ** COOKIE CONSENT BANNER
 ***************/
@@ -318,34 +358,53 @@ Breakpoints:
 }
 
 /**************
-** NAVBAR — ALWAYS DARK (matches reference design)
+** NAVBAR — THEME-AWARE (light + dark)
 ***************/
 
+/* GitHub icon as a reusable CSS variable (avoids duplicating the long data URL) */
+:root {
+  --github-icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.49.5.092.682-.217.682-.482 0-.237-.009-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z'/%3E%3C/svg%3E");
+}
+
+/* Light mode: clean white glass */
 .navbar {
-  background-color: rgba(10, 12, 16, 0.9);
+  background-color: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
   box-shadow: none;
 }
 
-/* Brand: white bold text */
+/* Dark mode */
+html[data-theme='dark'] .navbar {
+  background-color: rgba(10, 12, 16, 0.9);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* Brand: size/weight only; color inherits from Docusaurus theme */
 .navbar .navbar__brand .navbar__title {
-  color: #fff;
   font-size: 1.125rem;
   font-weight: 700;
 }
 
+html[data-theme='dark'] .navbar .navbar__brand .navbar__title {
+  color: #fff;
+}
+
 .navbar .navbar__brand:hover .navbar__title {
   color: #22d3ee;
 }
 
-/* Nav links: muted gray, teal on hover/active */
+/* Nav links: font size in both modes */
 .navbar .navbar__link {
-  color: #9ca3af;
   font-size: 0.875rem;
 }
 
+/* Dark mode: muted gray nav links */
+html[data-theme='dark'] .navbar .navbar__link {
+  color: #9ca3af;
+}
+
 /* Hide external-link icon on navbar items */
 .navbar [class*="iconExternalLink"] {
   display: none;
@@ -354,7 +413,7 @@ Breakpoints:
 .navbar .navbar__link:hover,
 .navbar .navbar__link--active {
   color: #22d3ee;
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(34, 211, 238, 0.07);
   text-decoration: none;
 }
 
@@ -383,10 +442,12 @@ Breakpoints:
   align-items: center;
 }
 
-/* Left items container: shrink-to-fit so parent can center it */
+/* Left items container: shrink-to-fit so parent can center it.
+   max-width prevents centered links from overlapping absolutely-positioned brand/right items. */
 .navbar__inner > .navbar__items:not(.navbar__items--right) {
   flex: 0 0 auto;
   justify-content: center;
+  max-width: calc(100% - 2 * (var(--ifm-navbar-padding-horizontal) + 8rem));
 }
 
 .navbar .navbar__items--right {
@@ -405,21 +466,25 @@ Breakpoints:
   align-items: center;
   gap: 0.375rem;
   padding: 0.375rem 0.75rem;
-  border: 1px solid #374151;
+  border: 1px solid #d1d5db;
   border-radius: 0.5rem;
   font-size: 0.875rem;
-  color: #9ca3af;
   transition: border-color 0.2s ease, color 0.2s ease;
 }
 
+html[data-theme='dark'] .navbar__items--right .navbar__item.navbar__link[href*="github.com"] {
+  border-color: #374151;
+  color: #9ca3af;
+}
+
 .navbar__items--right .navbar__item.navbar__link[href*="github.com"]::before {
   content: "";
   display: inline-block;
   width: 1.125rem;
   height: 1.125rem;
   background-color: currentColor;
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.49.5.092.682-.217.682-.482 0-.237-.009-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z'/%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.49.5.092.682-.217.682-.482 0-.237-.009-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z'/%3E%3C/svg%3E");
+  -webkit-mask-image: var(--github-icon-svg);
+  mask-image: var(--github-icon-svg);
   -webkit-mask-size: contain;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
@@ -428,12 +493,17 @@ Breakpoints:
 }
 
 .navbar__items--right .navbar__item.navbar__link[href*="github.com"]:hover {
-  border-color: #6b7280;
-  color: #fff;
+  border-color: #22d3ee;
+  color: #22d3ee;
   background: transparent;
   text-decoration: none;
 }
 
+html[data-theme='dark'] .navbar__items--right .navbar__item.navbar__link[href*="github.com"]:hover {
+  border-color: #6b7280;
+  color: #fff;
+}
+
 /**************
 ** SHELL PROMPT
 ***************/
@@ -486,3 +556,20 @@ html[data-theme='dark'] div[class*="language-shell"] code::before {
   --otdf-gradient-mesh: radial-gradient(ellipse at 20% 50%, rgba(34, 211, 238, 0.08) 0%, transparent 50%),
     radial-gradient(ellipse at 80% 20%, rgba(245, 158, 11, 0.05) 0%, transparent 50%);
 }
+
+/* Light mode: flip landing page design tokens */
+html[data-theme='light'] {
+  --otdf-bg-deepest: #f8fafc;
+  --otdf-bg-deep: #f1f5f9;
+  --otdf-bg-surface: #ffffff;
+  --otdf-bg-raised: #f8fafc;
+  --otdf-bg-subtle: #e2e8f0;
+
+  --otdf-text-primary: #0f172a;
+  --otdf-text-secondary: #334155;
+  --otdf-text-tertiary: #64748b;
+
+  --otdf-accent-glow: rgba(34, 211, 238, 0.08);
+  --otdf-gradient-mesh: radial-gradient(ellipse at 20% 50%, rgba(34, 211, 238, 0.05) 0%, transparent 50%),
+    radial-gradient(ellipse at 80% 20%, rgba(245, 158, 11, 0.03) 0%, transparent 50%);
+}

src/css/landing.css

@@ -80,3 +80,22 @@
   border-color: var(--sdk-color, #22d3ee);
   box-shadow: 0 0 30px color-mix(in srgb, var(--sdk-color, #22d3ee) 15%, transparent);
 }
+
+/* ---- Light mode overrides ---- */
+html[data-theme='light'] .section-dark {
+  background-color: #f8fafc;
+}
+
+html[data-theme='light'] .section-darker {
+  background-color: #ffffff;
+}
+
+html[data-theme='light'] .bg-grid {
+  background-image: linear-gradient(rgba(34, 211, 238, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(34, 211, 238, 0.05) 1px, transparent 1px);
+  background-size: 64px 64px;
+}
+
+html[data-theme='light'] .sdk-card {
+  border-color: rgba(0, 0, 0, 0.08);
+}