/* ============================================================================ * layout/shell.css — application shell + decorative shell variant * ============================================================================ * Depends on: core/tokens.css (for --grid-line, --grid-glow tokens + density tiers) * Authoritative source: ForceX_Light_Theme_Requirements.md §6 (revised 2026-04-15) * * The decorative grid + radial glow treatment is applied to all ForceX web * surfaces via .fx-shell-decorative. Opacity is density-tiered via modifier * classes to preserve numerical scanability on data-heavy surfaces: * * .fx-shell-decorative — baseline (marketing/auth) * .fx-shell-decorative.fx-surface-account — mid density * .fx-shell-decorative.fx-surface-data — low density (explorer/analytics) * * Tier values are defined in core/tokens.css for both dark and light themes. * ========================================================================== */ .app-shell { position: relative; z-index: var(--z-base); min-height: 100vh; } /* Apply to on ForceX web surfaces. */ .fx-shell-decorative::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: var(--z-base); } .fx-shell-decorative::after { /* Radial glow pinned to viewport top-center. Uses position: fixed so it * does NOT extend document height (which caused mobile scroll overflow). * Fades to transparent at 65% so it only accents the top of the page. */ content: ''; position: fixed; top: -20%; left: 50%; transform: translateX(-50%); width: min(900px, 100vw); height: min(700px, 100vh); background: radial-gradient(ellipse, var(--grid-glow) 0%, transparent 65%); pointer-events: none; z-index: var(--z-base); }