Week 05 · Cascade Layers & Native CSS Nesting

The Trading Dashboard keeps its Week 04 appearance while its stylesheet gains a maintainable architecture.

This milestone duplicates the approved Week 04 output, preserves the existing responsive grid and design tokens, then refactors the local stylesheet into ordered @layer groups and browser-native nested component rules.

01

Progress preserved, CSS architecture modernized

Weeks 02 through 04 remain frozen checkpoints; Week 05 changes organization and maintainability without redesigning the approved dashboard output.

Week 02

Design system tokens

OKLCH colors, fluid type, spacing variables, borders, focus states, and theme roles remain the visual source of truth.

Week 03

Semantic dashboard frame

The command header, left rail, market workspace, context drawer, and status footer remain structurally intact.

Week 04

Asymmetric content hierarchy

The six-card market workspace and featured two-by-two card remain visually unchanged.

Week 05

Layered and nested CSS

The same output is now organized into reset, base, layout, and components layers with native selector nesting.

02

Visual continuity test

The Week 04 asymmetric market workspace is carried forward as the visible reference. The refactor is successful only if this output keeps the same geometry, hierarchy, spacing, and responsive behavior.

Market command header

Asymmetric workspace preview

Featured market overview

Cross-market pulse

Layout sample

The dominant card spans two columns and two rows so the primary market story receives more visual weight than supporting modules.

Track
2 columns
Depth
2 rows
Flow
Dense

Stocks

Watchlist scan

  • AAPLPrimary
  • MSFTSecondary
  • NVDACompare

Crypto

Digital asset radar

  • BTCMacro
  • ETHNetwork
  • SOLMomentum

Portfolio

Technique stack

Trend · SMA / EMA / VWAP Momentum · RSI / MACD / Stochastic Volatility · Bollinger / ATR / ADX

Comparison

Relative strength

Large capBaseline
CryptoVolatile
CashDefensive

Risk context

Confluence queue

Fibonacci · Volume Profile · OBV · Pivot Points · Support/Resistance · Candlestick Patterns · Divergence · Ichimoku · Parabolic SAR

Week 05 refactor preview · Static educational content · No live market feed

03

Cascade order and native nesting

The stylesheet now communicates responsibility directly: foundational resets first, document defaults next, structural layout after that, and component rules last.

@layer reset

Structural normalization

Box sizing and the body margin reset are isolated from the rest of the visual system.

@layer base

Tokens and defaults

Color roles, typography, document defaults, links, focus behavior, and heading defaults live together.

@layer layout

Workspace geometry

The page shell, dashboard frame, grid tracks, areas, and responsive structural breakpoints own layout responsibility.

@layer components

Reusable modules

Cards, navigation items, market widgets, badges, lists, controls, and verification surfaces sit in the highest declared layer.

&:hover

Native interaction nesting

Component states are written inside their parent rule using the browser-native nesting selector rather than Sass syntax.

.market-card { ... }

Parent-child grouping

Card headings, status badges, lead text, and modifiers are grouped with the component that owns them.

@layer reset, base, layout, components;

@layer components {
  .frame-rail {
    a {
      /* Existing Week 04 visual declarations remain unchanged. */

      &:focus-visible,
      &:hover {
        border-color: var(--color-primary);
        background: color-mix(in oklch, var(--color-primary) 16%, var(--color-surface));
        color: var(--color-text);
      }
    }
  }

  .market-card {
    /* Existing card surface and spacing declarations remain unchanged. */

    .market-card__heading {
      display: flex;
      align-items: start;
      justify-content: space-between;
    }
  }
}
04

Week 05 verification

The milestone is complete only when the architectural refactor is visible in DevTools while the rendered dashboard remains visually continuous with Week 04.

  • Confirm the first stylesheet statement declares @layer reset, base, layout, components; in that exact precedence order.
  • Inspect a market card in DevTools and confirm its component declarations appear inside @layer components.
  • Inspect component rules and confirm child selectors and interaction states use native nesting with & where appropriate.
  • Confirm the CSS contains no Sass-only parent-selector concatenation and requires no preprocessor or build step.
  • Compare Week 04 and Week 05 at desktop, tablet, and mobile widths and confirm the dashboard geometry, spacing, card hierarchy, and responsive behavior remain equivalent.
  • Switch Standard, Playful Pop, Raggedy Granite, Glossy Marble, and Luminous Midnight between dark and light modes and confirm the entire Week 05 page remains themed.
  • Open Weeks 02, 03, and 04 directly and confirm their completed files remain unchanged.
Scope boundary

Week 05 is an architectural CSS refactor. It does not add live prices, broker actions, production feeds, or new trading behavior; the visible Week 04 market composition is intentionally preserved.