diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 599702f6..af5a75f8 100644
--- a/docusaurus.config.ts
+++ b/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",
diff --git a/src/components/landing/Community.module.css b/src/components/landing/Community.module.css
index 5b042b71..32eb633d 100644
--- a/src/components/landing/Community.module.css
+++ b/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;
+}
diff --git a/src/components/landing/DeveloperFirst.module.css b/src/components/landing/DeveloperFirst.module.css
index 641f362c..3b3251e4 100644
--- a/src/components/landing/DeveloperFirst.module.css
+++ b/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);
+}
diff --git a/src/components/landing/FinalCTA.module.css b/src/components/landing/FinalCTA.module.css
index 81bd6744..14b20ee6 100644
--- a/src/components/landing/FinalCTA.module.css
+++ b/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);
+}
diff --git a/src/components/landing/Hero.module.css b/src/components/landing/Hero.module.css
index 7e2e7665..cd781f51 100644
--- a/src/components/landing/Hero.module.css
+++ b/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;
+}
diff --git a/src/components/landing/ProblemSolution.module.css b/src/components/landing/ProblemSolution.module.css
index 244fed80..e5ffc25d 100644
--- a/src/components/landing/ProblemSolution.module.css
+++ b/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);
+}
diff --git a/src/components/landing/Standards.module.css b/src/components/landing/Standards.module.css
index 2402afdb..237a2067 100644
--- a/src/components/landing/Standards.module.css
+++ b/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);
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 51463281..d7d347ad 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -82,8 +82,7 @@
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;
@@ -91,6 +90,14 @@ div[class*="admonitionTip"] {
--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%);
+}
diff --git a/src/css/landing.css b/src/css/landing.css
index 5d640d6b..9db6e8d4 100644
--- a/src/css/landing.css
+++ b/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);
+}
diff --git a/static/img/OpenTDF-Logo-White.png b/static/img/OpenTDF-Logo-White.png
new file mode 100644
index 00000000..97f87fe9
Binary files /dev/null and b/static/img/OpenTDF-Logo-White.png differ
diff --git a/static/img/favicon.svg b/static/img/favicon.svg
deleted file mode 100644
index e6906bc5..00000000
--- a/static/img/favicon.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/static/img/opentdf-icon.svg b/static/img/opentdf-icon.svg
deleted file mode 100644
index 55a60843..00000000
--- a/static/img/opentdf-icon.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-