fix(dark): hero text + button legibility on navy ground (Phase 18 W3)

Bind page-text/page-text-muted tokens directly in hero base rules (drop
:global overrides); dark-mode overrides for btn-primary (green-accent fill)
and btn-ghost (white text, light border).
This commit is contained in:
daniel-c-harvey
2026-06-19 22:00:26 -04:00
parent c04c2a9e98
commit 51ac1a76de
2 changed files with 29 additions and 14 deletions
@@ -36,7 +36,7 @@
font-weight: 300;
line-height: 0.92;
letter-spacing: -0.02em;
color: var(--deepdrft-navy);
color: var(--deepdrft-page-text);
margin-bottom: 0.5rem;
animation-delay: 0.22s;
}
@@ -51,7 +51,7 @@
font-size: clamp(1rem, 2vw, 1.35rem);
font-weight: 300;
font-style: italic;
color: var(--deepdrft-muted);
color: var(--deepdrft-page-text-muted);
margin-bottom: 3rem;
letter-spacing: 0.04em;
animation-delay: 0.34s;
@@ -61,7 +61,7 @@
font-family: var(--deepdrft-font-body);
font-size: 0.92rem;
line-height: 1.75;
color: var(--deepdrft-navy);
color: var(--deepdrft-page-text);
opacity: 0.7;
max-width: 36ch;
margin-bottom: 3rem;
@@ -82,17 +82,10 @@
}
}
/* Dark-mode text overrides (Phase 18, Correction B).
Light mode is pixel-identical — no changes to the rules above.
In dark, the navy page ground makes --deepdrft-navy text invisible; invert to light tokens. */
:global(.deepdrft-theme-dark) .hero-title {
color: var(--deepdrft-page-text);
}
/* Dark-mode accent override (Phase 18, Wave 3).
.hero-title and .hero-desc bind --deepdrft-page-text directly above (theme-aware).
The em italic is the only element needing an explicit dark lift:
--deepdrft-green (#1A3C34) is low-contrast on the navy ground; lift to green-accent. */
:global(.deepdrft-theme-dark) .hero-title em {
color: var(--deepdrft-green-accent);
}
:global(.deepdrft-theme-dark) .hero-desc {
color: var(--deepdrft-page-text);
}