fix: dark mode contrast and visibility issues

Override --font--colors--title-dm/paragraph-dm variables that resolved
to near-black after neutral color inversion. Add comprehensive dark
mode overrides for header nav links (#222 hardcoded), footer text/links/
borders, cards, CTA sections, contact page elements, and more.

Remove inline color styles from contact components that blocked CSS
dark mode overrides. Fix truncated about section text and add w-mod-ix3
class to html element.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/globals.css

@@ -14,6 +14,8 @@
   --core--colors--neutral--100: #0d0d0d;
   --font--colors--title: var(--core--colors--neutral--800);
   --font--colors--paragraph: var(--core--colors--neutral--600);
+  --font--colors--title-dm: #f5f5f5;
+  --font--colors--paragraph-dm: #b0b0b0;
 }
 
 .dark body,
@@ -44,20 +46,210 @@
   color: #666;
 }
 
+/* Header */
 .dark .header-wrapper,
 .dark .header-wrapper---absolute {
   background-color: rgba(13, 13, 13, 0.9);
   backdrop-filter: blur(12px);
 }
 
+.dark .w-nav-link,
+.dark .w-dropdown-btn,
+.dark .w-dropdown-toggle,
+.dark .w-dropdown-link {
+  color: #e0e0e0;
+}
+
 .dark .link .link-text {
   color: #d0d0d0;
 }
 
+/* Footer */
 .dark .footer-wrapper {
   background-color: #0a0a0a;
 }
 
+.dark .footer-link {
+  color: #b0b0b0;
+  border-bottom-color: #2a2a2a;
+}
+
+.dark .footer-link:hover {
+  color: #f5f5f5;
+}
+
+.dark .footer-top,
+.dark .footer-middle,
+.dark .footer-links-wrapper,
+.dark .footer-bottom {
+  border-color: #2a2a2a;
+}
+
+.dark .footer-logo-wrapper {
+  border-color: #2a2a2a;
+}
+
+.dark .footer-button {
+  border-color: #2a2a2a;
+  color: #f5f5f5;
+}
+
+.dark .footer-link-bg {
+  background-color: #2a2a2a;
+}
+
+.dark .footer-contact-link-icon-wrapper {
+  border-color: #2a2a2a;
+}
+
+.dark .footer-contact-link-bg {
+  background-color: #1e1e1e;
+}
+
+.dark .text-color-neutral-400 {
+  color: #707070;
+}
+
+.dark .icon-40px---dark-mode {
+  background-color: #1e1e1e;
+  color: #f5f5f5;
+}
+
+.dark .link-square-icon-left---dark-mode {
+  color: #f5f5f5;
+}
+
+.dark .text-link {
+  color: #f5f5f5;
+}
+
+.dark .text-link:hover {
+  color: #a0a0a0;
+}
+
+/* Cards */
+.dark .card {
+  background-color: #141414;
+  border-color: #2a2a2a;
+}
+
+.dark .card.contact-card-v1 {
+  border-color: #2a2a2a;
+}
+
+.dark .contact-link-text {
+  color: var(--font--colors--title) !important;
+}
+
+.dark .contact-card-link-bg {
+  background-color: #2a2a2a;
+}
+
+.dark .contact-card-v1-link-wrapper {
+  border-color: #2a2a2a;
+}
+
+/* CTA sections */
+.dark .cta-section {
+  background-color: #0d0d0d;
+}
+
+/* Tab links */
+.dark .w-tab-link {
+  color: #e0e0e0;
+  background-color: #1e1e1e;
+}
+
+.dark .w-tab-link.w--current {
+  background-color: #2a2a2a;
+}
+
+/* Section backgrounds */
+.dark .section.bg-neutral,
+.dark .section-small.bg-neutral {
+  background-color: #111;
+}
+
+.dark .bg-neutral-100 {
+  background-color: #0d0d0d;
+}
+
+.dark .bg-neutral-200 {
+  background-color: #141414;
+}
+
+.dark .bg-neutral-300 {
+  background-color: #1a1a1a;
+}
+
+/* Accordion & misc cards */
+.dark .card.accordion-card-v1,
+.dark .card.accordion-card-v2,
+.dark .card.accordin-card-v3 {
+  background-color: #141414;
+}
+
+.dark .card.accordion-card-v2:hover,
+.dark .card.accordin-card-v3:hover {
+  background-color: #1e1e1e;
+}
+
+/* Blog cards */
+.dark .blog-card-v1 {
+  border-color: #2a2a2a;
+}
+
+/* Blockquote */
+.dark blockquote {
+  background-color: #1e1e1e;
+  color: #f5f5f5;
+}
+
+/* Notification bar */
+.dark .notification-bar {
+  background-color: #1e1e1e;
+  color: #f5f5f5;
+}
+
+/* Primary button in dark sections */
+.dark .primary-button {
+  border-color: #2a2a2a;
+}
+
+/* Badge */
+.dark .badge {
+  background-color: #1e1e1e;
+}
+
+/* SVG icons inherit currentColor — ensure parent elements are visible */
+.dark .footer-link-icon {
+  color: #707070;
+}
+
+/* Contact page hover backgrounds */
+.dark .contact-icon-bg {
+  background-color: #2a2a2a;
+}
+
+.dark .contact-card-link-bg {
+  background-color: #2a2a2a;
+}
+
+/* Dropdown menu */
+.dark .w-dropdown-list {
+  background-color: #1e1e1e;
+}
+
+.dark [data-nav-menu-open] {
+  background-color: #1e1e1e;
+}
+
+/* Gradient overlays — use dark base */
+.dark .hero-v1-bg-gradient,
+.dark .about-section-gradient {
+  background-image: none;
+}
+
 /* Show/hide elements based on theme */
 .show-dark-mode {
   display: none;

app/layout.tsx

@@ -43,7 +43,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`w-mod-js ${inter.variable} ${interTight.variable}`}
+      className={`w-mod-js w-mod-ix3 ${inter.variable} ${interTight.variable}`}
       suppressHydrationWarning
     >
       <body className={inter.className}>