Implement light theme for the marketing homepage

[vmorps]

Summary

The marketing homepage (opentdf.io) currently uses dark-mode tokens for all landing page components regardless of the user's color-mode preference. When Docusaurus renders the page in light mode, multiple elements have broken contrast, invisible borders, and mismatched color treatments.

This issue tracks the work to add proper light-mode CSS overrides for every landing page section so the homepage respects html[data-theme='light'].

Design artifacts (in design/ directory, gitignored):

• design/light-theme-mock.html — proposed light theme (open in browser)
• design/dark-theme-mock.html — current dark theme reference
• design/brand-guide.html — updated with full light-mode token table (section: Light Mode — Landing Page Tokens)

---

Problems in current light theme

Critical

• Teal accent #22D3EE used on white backgrounds — fails WCAG AA (~2.8:1 contrast ratio). Affects: primary CTA buttons, badges, checkmark icons, hover states, hero headline gradient.
• Install command fields use #0A0C10 (near-black) backgrounds — creates harsh, jarring dark rectangles on the light page. Affects all 4 SDK cards.

High

• Card borders are invisible — rgba(255,255,255,0.05) and rgba(255,255,255,0.06) on white backgrounds render as effectively transparent. Cards float with no visual anchoring.
• Outline button borders invisible — rgba(255,255,255,0.15) borders disappear on light backgrounds.
• Hero headline gradient unreadable — #22D3EE → #67E8F9 → #A78BFA gradient on white is illegible.

Medium

• No alternating section backgrounds — all sections render as flat white, removing visual rhythm.
• Dark code panels lack lift — hero code window and TDF diagram have no shadow/border treatment in light mode, making them look like cut-out holes rather than floating panels.

---

Implementation checklist

All changes should be scoped to html[data-theme='light'] selectors (or Docusaurus-equivalent light-mode targeting) so the existing dark theme remains untouched.

Global tokens (src/css/custom.css and src/css/landing.css)

• Add html[data-theme='light'] block with light-mode CSS custom properties:
  • --otdf-text-primary: #0f172a
  • --otdf-text-secondary: #475569 (currently #9ca3af)
  • --otdf-text-tertiary: #64748b (currently #6b7280)
  • --otdf-accent: #0891b2 (currently #22d3ee)
  • --otdf-accent-light: #0e7490 (currently #67e8f9)
  • --otdf-accent-glow: rgba(8,145,178,0.15)
  • --otdf-bg-deepest: #ffffff
  • --otdf-bg-deep: #f8fafc
  • --otdf-bg-surface: #ffffff
• Override .section-dark / .section-darker backgrounds for light mode
• Override .bg-grid / .bg-mesh / .bg-mesh-reverse — remove or set to transparent in light mode
• Override .text-gradient — use solid color: #0891b2 instead of gradient clip in light mode

Hero section (Hero.module.css)

• Hero background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)
• .badge — border rgba(8,145,178,0.2), text #0891b2, bg rgba(8,145,178,0.06), dot #16a34a
• .heading — color #0f172a
• .text-gradient — solid #0891b2 (gradient is illegible on white)
• .bodyPrimary — color #475569
• .bodySecondary — color #64748b
• .btnPrimary — bg #0891b2, text #ffffff, hover bg #0e7490
• .btnSecondary — border #e2e8f0, text #0f172a, hover border/text #0891b2
• .codeWindow — add border: 1px solid #e2e8f0 and box-shadow: 0 4px 24px rgba(0,0,0,0.08) (keep interior dark)

Problem/Solution section (ProblemSolution.module.css)

• Section background: #f8fafc
• .card — bg #ffffff, border 1px solid #e2e8f0, hover border rgba(8,145,178,0.2), hover shadow 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06)
• .iconWrap — bg rgba(8,145,178,0.06)
• .cardIcon — color #0891b2
• .cardTitle — color #0f172a
• .cardBody — color #64748b
• .tagline — color #64748b
• .btn — border #e2e8f0, hover border/text #0891b2

Developer-First / SDK section (DeveloperFirst.module.css)

• .card — bg #ffffff, border 1px solid #e2e8f0
• .card:hover — border var(--sdk-color), shadow 0 0 0 1px var(--sdk-color), 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06)
• .sdkName — color #0f172a, hover color #0891b2
• .sdkLang — color #94a3b8
• .badge — border rgba(8,145,178,0.2), text #0891b2, bg rgba(8,145,178,0.06)
• .installCmd — bg #f1f5f9, text #334155, border 1px solid #e2e8f0
• .copyBtn — bg #f1f5f9, border 1px solid #e2e8f0, color #94a3b8, hover color #0891b2
• .btnPrimary — bg #0891b2, text #ffffff, hover bg #0e7490
• .btnSecondary — border #e2e8f0, text #0f172a, hover border/text #0891b2

Standards section (Standards.module.css)

• Section background: #f8fafc
• .diagram — keep dark interior, add border: 1px solid #e2e8f0, box-shadow: 0 4px 24px rgba(0,0,0,0.08)
• .heading — color #0f172a
• .body — color #475569
• .featureItem — color #475569
• .checkIcon — color #0891b2
• .btnSecondary — border #e2e8f0, text #0f172a, hover border/text #0891b2
• .btnGhost — border #f1f5f9, text #64748b, hover border #e2e8f0, hover text #0f172a

Community section (Community.module.css)

• .card — bg #ffffff, border 1px solid #e2e8f0, hover border rgba(8,145,178,0.2), hover shadow
• .cardIcon — color #94a3b8, hover color #0891b2
• .cardTitle — color #0f172a, hover color #0891b2
• .cardDesc — color #64748b

Final CTA section (FinalCTA.module.css)

• Section background: linear-gradient(180deg, #f8fafc 0%, #ecfeff 50%, #f8fafc 100%)
• Remove .glow blob in light mode (or set opacity to 0)
• .heading — color #0f172a
• .body — color #475569
• .btnPrimary — bg #0891b2, text #ffffff, hover bg #0e7490
• .btnSecondary — border #e2e8f0, text #0f172a, hover border/text #0891b2
• .btnGhost — border #f1f5f9, text #64748b, hover border #e2e8f0, hover text #0f172a

---

Key design decisions

Decision	Rationale
Use #0891B2 (not #22D3EE) for all light-mode accents	Brand guide already specifies this; #22D3EE fails WCAG AA on white
Primary buttons: white text on #0891B2	Inverted from dark mode (dark text on #22D3EE); passes WCAG AA
Hero headline: solid #0891B2 (not gradient)	Gradient endpoints are too light for white backgrounds
Keep code window + TDF diagram dark	These represent terminal/editor panels — dark is semantically correct
Add shadow + border to dark panels in light mode	Provides visual lift so they read as floating panels, not holes
Alternating section backgrounds (#fff / #f8fafc)	Creates vertical rhythm that was provided by section-dark / section-darker in dark mode

---

Acceptance criteria

• All landing page sections render correctly in both light and dark mode
• No WCAG AA contrast failures for text or interactive elements in light mode
• Existing dark theme is not affected (all changes scoped to light-mode selectors)
• Brand guide design/brand-guide.html token tables match the implemented values
• Visual match to design/light-theme-mock.html

🤖 Generated with Claude Code

[vmorps]

Addressed in PR #221 (responsive layout) and PR #224 (light theme glow and button fixes).