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 @@ - - - -