style: Phase 18 Wave 2 — appbar navy, dark hero legibility, true page ground, green-on-green play chip

This commit is contained in:
daniel-c-harvey
2026-06-19 20:32:21 -04:00
parent 0f7088fe86
commit fcc95b9195
6 changed files with 44 additions and 11 deletions
@@ -44,10 +44,10 @@
/* PLAYER-BAR play-chip override (Phase 18, T3). PlayStateIcon's chip defaults to the solid /* PLAYER-BAR play-chip override (Phase 18, T3). PlayStateIcon's chip defaults to the solid
--deepdrft-play-chip (moss-green in dark) used on release heroes and Cut track rows. On the --deepdrft-play-chip (moss-green in dark) used on release heroes and Cut track rows. On the
bright player dock that solid green reads too hot, so here — and only here — swap to the player dock that solid green reads too hot, so here — and only here — swap to the
translucent --deepdrft-play-chip-soft (same green, much less opaque). The glyph stays the translucent --deepdrft-play-chip-soft (same green, much less opaque).
palette green/primary on this context (the navy default-glyph would vanish on the translucent The glyph stays --mud-palette-primary (green on the soft translucent wash), giving the
wash), so we let MudIconButton's own Color.Primary stand by neutralising the default override. */ preferred green-on-green look on the player bar in dark mode. */
::deep .player-surface .icon-container { ::deep .player-surface .icon-container {
background-color: var(--deepdrft-play-chip-soft); background-color: var(--deepdrft-play-chip-soft);
} }
@@ -81,3 +81,18 @@
align-items: stretch; align-items: stretch;
} }
} }
/* 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);
}
:global(.deepdrft-theme-dark) .hero-title em {
color: var(--deepdrft-green-accent);
}
:global(.deepdrft-theme-dark) .hero-desc {
color: var(--deepdrft-page-text);
}
@@ -607,6 +607,14 @@
.btn-outline-white:hover { border-color: var(--deepdrft-white); } .btn-outline-white:hover { border-color: var(--deepdrft-white); }
/* ── DARK-MODE OVERRIDES ── */
/* In dark mode, decorative em accents that use --deepdrft-green (#1A3C34) become
near-invisible on the navy ground. Switch to --deepdrft-green-accent (#3D7A68). */
:global(.deepdrft-theme-dark) .hero-title em,
:global(.deepdrft-theme-dark) .movement-title em {
color: var(--deepdrft-green-accent);
}
/* ══════════════════ RESPONSIVE COLLAPSE ══════════════════ /* ══════════════════ RESPONSIVE COLLAPSE ══════════════════
Below 960px the rail collapses: the spine + vertical numeral can't survive a Below 960px the rail collapses: the spine + vertical numeral can't survive a
@@ -560,6 +560,14 @@
.btn-outline-white:hover { border-color: var(--deepdrft-white); } .btn-outline-white:hover { border-color: var(--deepdrft-white); }
/* ── DARK-MODE OVERRIDES ── */
/* In dark mode, decorative em accents that use --deepdrft-green (#1A3C34) become
near-invisible on the navy ground. Switch to --deepdrft-green-accent (#3D7A68). */
:global(.deepdrft-theme-dark) .section-title em,
:global(.deepdrft-theme-dark) .connect-title em {
color: var(--deepdrft-green-accent);
}
@media (max-width: 599px) { @media (max-width: 599px) {
.cta-banner { .cta-banner {
flex-direction: column; flex-direction: column;
@@ -114,7 +114,7 @@ public static class DeepDrftPalettes
Tertiary = "#1A3C34", // Deep green - tertiary accent Tertiary = "#1A3C34", // Deep green - tertiary accent
Background = "#0D1B2A", // Navy - the light palette's primary as the dark ground Background = "#0D1B2A", // Navy - the light palette's primary as the dark ground
Surface = "#162437", // Navy-mid - elevated cards/panels Surface = "#162437", // Navy-mid - elevated cards/panels
AppbarBackground = "rgba(13,27,42,0.92)", // Semi-opaque navy AppbarBackground = "rgba(17,35,56,0.92)", // Semi-opaque #112338 navy (dark-mode page ground)
AppbarText = "#FAFAF8", AppbarText = "#FAFAF8",
DrawerBackground = "#162437", // Navy-mid DrawerBackground = "#162437", // Navy-mid
DrawerText = "#FAFAF8", DrawerText = "#FAFAF8",
@@ -131,17 +131,19 @@
--gradient-warm: var(--deepdrft-green); --gradient-warm: var(--deepdrft-green);
--gradient-light: var(--deepdrft-green-light); --gradient-light: var(--deepdrft-green-light);
/* Theme-aware page-surface family (Phase 18) — inverted onto the navy ground. /* Theme-aware page-surface family (Phase 18) — inverted onto the true page ground.
OQ#1 resolved: GROUND (--deepdrft-navy), so neutral sections (Home hero-left, Binds --mud-palette-background (#0D1B2A) so neutral sections (Home hero-left,
medium grid, footer, About light sections) dissolve into the site background as medium grid, footer, About light sections) dissolve into the site background as
one continuous dark field rather than reading as raised panels. */ one continuous dark field rather than reading as raised panels (#112338 navy
--deepdrft-page-surface: var(--deepdrft-navy); is card-elevation, not the page ground). */
--deepdrft-page-surface: var(--mud-palette-background);
--deepdrft-page-text: var(--deepdrft-white); --deepdrft-page-text: var(--deepdrft-white);
/* Lift muted text toward white so eyebrows/sub-text stay legible on the dark ground. */ /* Lift muted text toward white so eyebrows/sub-text stay legible on the dark ground. */
--deepdrft-page-text-muted: color-mix(in srgb, var(--deepdrft-muted) 70%, var(--deepdrft-white)); --deepdrft-page-text-muted: color-mix(in srgb, var(--deepdrft-muted) 70%, var(--deepdrft-white));
/* Play-chip family (Phase 18) — moss-green chip, navy glyph. The -soft variant is the /* Play-chip family (Phase 18) — moss-green chip, navy glyph (green-on-green on the
player-bar override: same green, much less opaque (translucent wash over the navy dock). */ player bar; navy-on-green on solid chips). The -soft variant is the player-bar
override: same green, much less opaque (translucent wash over the navy dock). */
--deepdrft-play-chip: var(--deepdrft-green-accent); --deepdrft-play-chip: var(--deepdrft-green-accent);
--deepdrft-play-glyph: var(--deepdrft-navy); --deepdrft-play-glyph: var(--deepdrft-navy);
--deepdrft-play-chip-soft: color-mix(in srgb, var(--deepdrft-green-accent) 30%, transparent); --deepdrft-play-chip-soft: color-mix(in srgb, var(--deepdrft-green-accent) 30%, transparent);