style: Phase 18 Wave 2 — appbar navy, dark hero legibility, true page ground, green-on-green play chip
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user