/* Nullcrest Idle UI - cyberpunk-loud, vanilla CSS. Per branding.md: single dark surface, mono base + display headers, per-screen accent rotation, bloom as elevation, fx-layer frame, motion as feedback. Data legibility wins. Layout follows runs_mockup.png: header band with the city image, icon STATUS HUD, a collapsible nav row, structured list cards with pip meters, persistent queue strip. */ /* ---- self-hosted display face (one weight; mono is a system stack) ---- */ @font-face { font-family: "Rajdhani"; src: local("Rajdhani SemiBold"), local("Rajdhani-SemiBold"); font-weight: 600; font-display: swap; } :root { /* surface tokens (branding.md §2.1) */ --c-bg-0: #05060a; --c-bg-1: #0a0d14; --c-bg-2: #11161f; --c-bg-3: #1a2030; --c-fg: #d6f5e6; --c-fg-dim: #7a8a99; --c-fg-disabled: #454f5c; --c-border: #1f2a3a; --c-border-strong: #2c3a4f; /* district / faction accents (§2.2) */ --c-acid: #b6ff3c; --c-cyan: #1ff5ff; --c-magenta: #ff2bd6; --c-amber: #ffb020; --c-violet: #9b6bff; --c-coral: #ff7860; --c-mint: #3affb0; /* status colors (§2.3) - reserved, never decorative */ --c-success: #19c37d; --c-danger: #ff2046; --c-warn: #ffa94d; --c-loss: #d92e6f; /* item rarity palette (TAD §15.14) - a dedicated five-tier ramp. Distinct from the four reserved stat / bar colors; a rarity color only ever means rarity. */ --c-rarity-common: #8b97a6; --c-rarity-uncommon: #5fce7a; --c-rarity-rare: #4aa8ff; --c-rarity-epic: #b478ff; --c-rarity-legendary: #ffb020; /* Chrome accent - a restrained neutral. Panels, headers and the fx grid no longer each carry a bright per-screen hue; color is spent only where it MEANS something (reserved bars, rarity, gain/loss). A muted steel-grey reads as structure, not decoration. */ --c-chrome: #45566b; /* Default accent - the neutral chrome. mountView() swaps --c-accent per route on , but every route now resolves to --c-chrome, so the chrome stays uniform and calm across screens. */ --c-accent: var(--c-chrome); /* Accent bloom (§3.5) - a real box-shadow halo on interactive accent elements. Defined as the color-mix RATIOS only, not a finished box-shadow: a baked box-shadow token substitutes var(--c-accent) at :root, freezing the root accent (acid green) into every consumer regardless of the per-route accent swap. Each .vis-full consumer below composes its own box-shadow against the in-scope --c-accent so the bloom always tracks the live route accent - never green on a coral / amber / cyan screen. */ /* Soft accent surface - mixed into the panel color (not transparent) so the tint stays subtle and clean on any accent, never muddy. */ --accent-soft: color-mix(in oklab, var(--c-accent) 14%, var(--c-bg-2)); /* Selection / hover highlight - a single clean white treatment, used for active nav, selected cards, and hover. Distinct from the per-route content accents and the commit-button affordance. */ --c-sel: #f4f7fb; --sel-soft: color-mix(in oklab, var(--c-sel) 9%, var(--c-bg-2)); --sel-glow: 0 0 6px color-mix(in oklab, var(--c-sel) 35%, transparent); --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-display: "Rajdhani", "Orbitron", "Audiowide", sans-serif; --grid: 4px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; /* fixed-chrome heights - the view area pads around these */ --topbar-h: 84px; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--c-bg-0); color: var(--c-fg); font-family: var(--font-mono); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } body { min-height: 100vh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .shell { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; } /* The app root is a column: the header band, the STATUS HUD, the nav row, a scrolling view slot, and the queue strip. */ #app-root { display: flex; flex-direction: column; min-height: 100vh; } /* ==================================================================== fx-layer (§5) - animated grid, scanlines, CRT vignette behind content ==================================================================== */ .fx-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .fx-grid { position: absolute; inset: -50%; background-image: linear-gradient(color-mix(in oklab, var(--c-accent) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--c-accent) 8%, transparent) 1px, transparent 1px); background-size: 44px 44px; opacity: 0.5; animation: fx-drift 38s linear infinite; } @keyframes fx-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(44px, 44px, 0); } } .fx-scanline { position: absolute; inset: 0; background: repeating-linear-gradient( transparent 0 2px, rgba(255, 255, 255, 0.04) 2px 3px); mix-blend-mode: overlay; } .fx-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.62) 100%); } /* Visuals tier: Reduced - freeze the drift, drop overlays (§5.2) */ body.vis-reduced .fx-grid { animation: none; opacity: 0.32; } body.vis-reduced .fx-scanline, body.vis-reduced .fx-vignette { display: none; } /* Visuals tier: Off - kill the whole frame (§5.3) */ body.vis-off .fx-layer { display: none; } /* ==================================================================== Typography ==================================================================== */ h1, h2, h3 { font-weight: 700; } .section-title { font-family: var(--font-display); font-weight: 600; } a { color: var(--c-cyan); } /* ==================================================================== Top bar - the header band: city image behind menu / wordmark / credits ==================================================================== */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: calc(var(--grid) * 2); height: var(--topbar-h); padding: 0 calc(var(--grid) * 3); border-bottom: 1px solid var(--c-border); /* city image confined to the header band; the gradient overlay keeps the wordmark + credits legible against bright pixels. */ background-image: linear-gradient(rgba(5, 6, 10, 0.55), rgba(5, 6, 10, 0.78)), url('/assets/bg_images/hero_001.png'); background-position: center 30%; background-size: cover; background-repeat: no-repeat; } /* Visuals Off - drop the header image, fall back to the flat surface */ body.vis-off .topbar { background-image: none; background-color: color-mix(in oklab, var(--c-bg-0) 92%, transparent); } .topbar-menu { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-bg-2); color: var(--c-fg-dim); } .topbar-menu svg { width: 18px; height: 18px; } .topbar-menu:hover { color: var(--c-sel); border-color: var(--c-sel); } /* Logo lockup - the skull + Nullcrest Idle wordmark image. The PNG is cropped tight to its artwork, so its visible height equals the rendered height: sized to the hamburger button (34px) and vertically centered in the header band. A drop-shadow keeps it crisp over the header city image. */ .topbar-logo { flex: 1; height: 34px; width: auto; object-fit: contain; object-position: left center; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85)); } .credits-readout { display: inline-flex; align-items: center; gap: var(--grid); padding: calc(var(--grid) * 1) calc(var(--grid) * 2); border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-bg-2); font-variant-numeric: tabular-nums; } .credits-icon { display: inline-flex; color: var(--c-amber); } .credits-icon svg { width: 16px; height: 16px; } .credits-num { font-weight: 700; color: var(--c-fg); } .credits-unit { font-size: 10px; color: var(--c-fg-dim); } /* ==================================================================== Visuals toggle - segmented control, lives in the Settings popup ==================================================================== */ .vis-toggle { display: inline-flex; border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; } .vis-toggle button { background: transparent; border: none; border-radius: 0; color: var(--c-fg-dim); font-size: 10px; letter-spacing: 0.06em; padding: 4px 8px; } .vis-toggle button:hover:not(:disabled) { color: var(--c-fg); border-color: var(--c-border-strong); } .vis-toggle button[aria-pressed="true"] { background: var(--sel-soft); color: var(--c-sel); } /* ==================================================================== Primary nav - a panel with the shared header, directly under STATUS ==================================================================== */ /* NAVIGATE and STATUS are direct children of #app-root (outside the padded .view-slot), so both get the same horizontal inset to line up with the topbar and the view panels below. */ .panel.nav-row { margin: calc(var(--grid) * 3) calc(var(--grid) * 3) 0; } /* The nav item container - wraps to multiple rows as items grow. */ .nav-items { display: flex; flex-wrap: wrap; gap: var(--grid); } /* Each nav button is only as wide as its content - no stretch, no wrap. They sit left-aligned in the row (.nav-items) with consistent gaps. */ .nav-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--grid) * 1.5); background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); color: var(--c-fg-dim); padding: calc(var(--grid) * 1.5) calc(var(--grid) * 2); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; white-space: nowrap; } .nav-icon { display: inline-flex; } .nav-icon svg { width: 16px; height: 16px; } /* Selection / hover highlight is white - a single, clean treatment for the active nav item and any hovered item. Per-route accents stay on content, not on the selection cue. */ .nav-btn:hover:not([aria-pressed="true"]) { color: var(--c-sel); border-color: var(--c-sel); } .nav-btn[aria-pressed="true"] { color: var(--c-sel); border-color: var(--c-sel); background: var(--c-bg-2); } body.vis-full .nav-btn[aria-pressed="true"] { box-shadow: var(--sel-glow); } /* ==================================================================== Dev account switcher - DEV-only, no-Telegram local testing Rendered above the topbar only on a dev session (isDevSession). Amber is the deliberate "this is a dev surface" cue, distinct from the white real-nav selection. Never present in production (DEV_MODE off -> the no-Telegram path 401s -> no dev account -> the bar never renders). ==================================================================== */ .dev-switcher { display: flex; flex-wrap: wrap; align-items: center; gap: var(--grid); padding: calc(var(--grid) * 1.5) calc(var(--grid) * 3); background: color-mix(in oklab, var(--c-amber) 8%, var(--c-bg-1)); border-bottom: 1px solid color-mix(in oklab, var(--c-amber) 30%, transparent); } .dev-switcher-label { color: var(--c-amber); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; margin-right: var(--grid); } .dev-switcher-btn { flex: 0 0 auto; background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); color: var(--c-fg-dim); padding: var(--grid) calc(var(--grid) * 2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; white-space: nowrap; } .dev-switcher-btn.is-admin { color: var(--c-fg); } .dev-switcher-btn:hover:not(.is-active) { color: var(--c-amber); border-color: var(--c-amber); } .dev-switcher-btn.is-active { color: var(--c-bg-0); background: var(--c-amber); border-color: var(--c-amber); font-weight: 700; } /* ==================================================================== View slot - the routed, scrolling screen area ==================================================================== */ /* The view slot is content-sized, not flex-greedy: the ACTIVE QUEUE panel flows directly after it in the normal stack instead of being pushed to the viewport bottom. */ .view-slot { padding: calc(var(--grid) * 3) calc(var(--grid) * 3) 0; } .view { display: block; } body.vis-full .view { animation: view-in 220ms ease-out; } body.vis-reduced .view { animation: view-fade 140ms ease-out; } @keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes view-fade { from { opacity: 0; } to { opacity: 1; } } /* ==================================================================== Panels - bloom as elevation (§4.2) ==================================================================== */ .panel { background: var(--c-bg-1); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: calc(var(--grid) * 3); margin-bottom: calc(var(--grid) * 3); transition: border-color 150ms, box-shadow 150ms; } /* Section header - the one shared panel header: a punchy display title + an optional tagline, an accent rule on the left, and a collapse chevron on the right. Every panel (STATUS, NAVIGATE, view sections) uses this so all headers look and collapse identically. */ .section-head { display: flex; align-items: center; gap: calc(var(--grid) * 2); border-left: 2px solid var(--c-border-strong); padding: calc(var(--grid) * 1.5) calc(var(--grid) * 3); margin-bottom: calc(var(--grid) * 3); } .section-head-text { flex: 1; min-width: 0; } .section-title { font-size: 22px; font-weight: 600; line-height: 1.05; color: #ffffff; text-transform: uppercase; letter-spacing: 0.02em; } .section-tag { margin-top: 2px; font-size: 10px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-fg-dim); } /* Collapse control - a chevron toggle on every panel header */ .section-collapse { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; background: transparent; border: 1px solid var(--c-border); border-radius: var(--radius-sm); color: var(--c-fg-dim); } .section-collapse:hover { color: var(--c-fg); border-color: var(--c-border-strong); } .section-chevron { display: inline-flex; transition: transform 150ms ease-out; } .section-chevron svg { width: 16px; height: 16px; } .section-head.collapsed .section-chevron { transform: rotate(-90deg); } /* Collapsed panel body - hidden, and the header drops its bottom margin so the panel shrinks to just the header. */ .panel-body.collapsed { display: none; } .section-head.collapsed { margin-bottom: 0; } /* STATUS shares the standard panel header. The title font size is NOT overridden - every panel header shares the one .section-title size. */ .panel.hud { margin: calc(var(--grid) * 3) calc(var(--grid) * 3) 0; } /* reduced-transparency kill-switch: flat surface, brighter border (§4.2) */ @media (prefers-reduced-transparency: reduce) { .panel { background: var(--c-bg-3); } body .section-head { box-shadow: none; } .topbar { backdrop-filter: none; } } /* ==================================================================== STATUS HUD bars - each bar gets its own icon + clean track ==================================================================== */ .bar-row { display: flex; align-items: center; gap: calc(var(--grid) * 2.5); margin-bottom: calc(var(--grid) * 2); } .bar-row:last-child { margin-bottom: 0; } .bar-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-bg-2); } .bar-icon svg { width: 18px; height: 18px; } /* The bar icon is a