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:
@@ -36,7 +36,7 @@
|
|||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 0.92;
|
line-height: 0.92;
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
color: var(--deepdrft-navy);
|
color: var(--deepdrft-page-text);
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
animation-delay: 0.22s;
|
animation-delay: 0.22s;
|
||||||
}
|
}
|
||||||
@@ -51,7 +51,7 @@
|
|||||||
font-size: clamp(1rem, 2vw, 1.35rem);
|
font-size: clamp(1rem, 2vw, 1.35rem);
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
color: var(--deepdrft-muted);
|
color: var(--deepdrft-page-text-muted);
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
animation-delay: 0.34s;
|
animation-delay: 0.34s;
|
||||||
@@ -61,7 +61,7 @@
|
|||||||
font-family: var(--deepdrft-font-body);
|
font-family: var(--deepdrft-font-body);
|
||||||
font-size: 0.92rem;
|
font-size: 0.92rem;
|
||||||
line-height: 1.75;
|
line-height: 1.75;
|
||||||
color: var(--deepdrft-navy);
|
color: var(--deepdrft-page-text);
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
max-width: 36ch;
|
max-width: 36ch;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
@@ -82,17 +82,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dark-mode text overrides (Phase 18, Correction B).
|
/* Dark-mode accent override (Phase 18, Wave 3).
|
||||||
Light mode is pixel-identical — no changes to the rules above.
|
.hero-title and .hero-desc bind --deepdrft-page-text directly above (theme-aware).
|
||||||
In dark, the navy page ground makes --deepdrft-navy text invisible; invert to light tokens. */
|
The em italic is the only element needing an explicit dark lift:
|
||||||
:global(.deepdrft-theme-dark) .hero-title {
|
--deepdrft-green (#1A3C34) is low-contrast on the navy ground; lift to green-accent. */
|
||||||
color: var(--deepdrft-page-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.deepdrft-theme-dark) .hero-title em {
|
:global(.deepdrft-theme-dark) .hero-title em {
|
||||||
color: var(--deepdrft-green-accent);
|
color: var(--deepdrft-green-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.deepdrft-theme-dark) .hero-desc {
|
|
||||||
color: var(--deepdrft-page-text);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -613,6 +613,28 @@ body:has(.waveform-visualizer-control-overlay) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Dark-mode button overrides (Phase 18, Wave 3).
|
||||||
|
In dark, --deepdrft-navy fill/text blends into the #0D1B2A page ground.
|
||||||
|
Primary: green-accent fill + navy text reads as a clear CTA (matches play-chip language).
|
||||||
|
Ghost: white text + light border stands off the dark ground. */
|
||||||
|
.deepdrft-theme-dark .btn-primary {
|
||||||
|
background: var(--deepdrft-green-accent);
|
||||||
|
color: var(--deepdrft-navy);
|
||||||
|
}
|
||||||
|
|
||||||
|
.deepdrft-theme-dark .btn-primary:hover {
|
||||||
|
background: var(--deepdrft-green-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.deepdrft-theme-dark .btn-ghost {
|
||||||
|
color: var(--deepdrft-page-text);
|
||||||
|
border-color: var(--deepdrft-border-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.deepdrft-theme-dark .btn-ghost:hover {
|
||||||
|
border-color: var(--deepdrft-page-text);
|
||||||
|
}
|
||||||
|
|
||||||
/* =============================================================================
|
/* =============================================================================
|
||||||
CUT ALBUM DETAIL (/cuts/{id})
|
CUT ALBUM DETAIL (/cuts/{id})
|
||||||
Header splits left-meta / right-cover; the cover carries an explicit theme
|
Header splits left-meta / right-cover; the cover carries an explicit theme
|
||||||
|
|||||||
Reference in New Issue
Block a user