/* * Wadsworth Skin: Default Dark * Author: Wadsworth Team * Description: The original dark navy theme. The canonical reference — all other * skins are diffs against this file. Every variable must be defined here. * Tier: free * * Variable count: 140 * * Sections * ───────────────────────────────────────────────────── * CORE UI (required in every skin, 79 vars): * Backgrounds · Borders · Text · Accent/Brand · Semantic · Medals · * Fonts · Border-Radius · Z-Index · Shadows · Transitions · Gradients * * SPECIALTY THEMES (subsystems with their own look, 22 vars): * Nav-Loader · Audio Player (Mahogany) · * Company Pages (Leather & Parchment) · WikiWads * * SEMANTIC DATA (game-specific meaning, most skins leave as-is, 39 vars): * Transaction Ledger Badges · Chart.js / Canvas · * Chat Mentions · Notification Badge · Notification Type Badges · DM * * EXCLUDED from skin system: * World map terrain colours — terrain rendering is canvas-based and * hardcoded by game logic; skinning it is out of scope. * * MODULE OVERRIDES (loaded after skin on specific page groups): * modules/admin.css — accent cyan → red (/admin/*) * modules/executive.css — accent cyan → purple (/executives/*) * modules/memecoins.css — accent cyan → orange (/memecoins/*) * modules/mod.css — accent cyan → violet, darker bg (/mod/*) * * NOTE: Do NOT add component CSS here. Component styles live in wadsworth-base.css. */ :root { /* ════════════════════════════════════════════════════════════════════════════ * CORE UI — every skin MUST define all variables in this section (70 vars) * ════════════════════════════════════════════════════════════════════════════ */ /* ── Backgrounds ─────────────────────────────────────────────────────────── */ --bg-page: #020617; /* main page background */ --bg-card: #0f172a; /* card / panel background */ --bg-card-2: #1e293b; /* nested containers, alt rows, modals */ --bg-input: #1e293b; /* form inputs, selects, textareas */ --bg-header: #0b1220; /* fixed top header bar */ --bg-ticker: #0a1628; /* fixed bottom live-price ticker */ --bg-overlay: rgba(0,0,0,0.6); /* modal / drawer overlay */ /* ── Borders ─────────────────────────────────────────────────────────────── */ --border: #1e293b; /* primary card / input borders */ --border-subtle: #334155; /* dividers, section separators */ --border-focus: #38bdf8; /* input focus ring */ /* ── Text ────────────────────────────────────────────────────────────────── */ --text-primary: #e5e7eb; /* body text, general content */ --text-bright: #f1f5f9; /* emphasized values, stat numbers */ --text-secondary: #94a3b8; /* labels, column headers, captions */ --text-muted: #64748b; /* disabled, placeholder, de-emphasized */ --text-faint: #475569; /* metadata, timestamps, very subtle */ --text-on-accent: #000000; /* text placed ON an accent background */ --text-on-danger: #ffffff; /* text placed ON a danger background */ /* ── Accent / Brand ──────────────────────────────────────────────────────── */ --accent: #38bdf8; /* primary — links, interactive, highlights */ --accent-dim: #0ea5e9; /* hover / pressed state */ --accent-bg: rgba(56,189,248,0.08); --accent-2: #f59e0b; /* secondary — warnings, alt buttons */ --accent-2-dim: #d97706; --accent-2-bg: rgba(245,158,11,0.08); --accent-3: #a78bfa; /* tertiary — events, trophies, levels */ --accent-3-dim: #7c3aed; --accent-3-bg: rgba(167,139,250,0.08); /* ── Semantic Colors ─────────────────────────────────────────────────────── */ --color-success: #22c55e; --color-success-light: #4ade80; --color-success-dark: #16a34a; --color-success-bg: rgba(34,197,94,0.08); --color-danger: #ef4444; --color-danger-light: #f87171; --color-danger-dark: #dc2626; --color-danger-xdark: #7f1d1d; /* danger button fill */ --color-danger-bg: rgba(239,68,68,0.08); --color-warning: #f59e0b; --color-warning-light: #fbbf24; --color-warning-bg: rgba(245,158,11,0.08); --color-gold: #d4af37; /* premium badge, subscriber marker */ --color-gold-bg: rgba(212,175,55,0.10); --color-orange: #f97316; /* ask prices, orange-coded items */ --color-purple: #a78bfa; /* level badges (same as accent-3) */ --color-teal: #0d9488; /* teal economy indicators */ --color-pink: #ec4899; /* pink event / contract badges */ --color-lime: #84cc16; /* land transactions, land badges */ --color-sky: #60a5fa; /* DM/message badges, info tints */ /* ── Medals — Leaderboard Rank Badges ───────────────────────────────────── */ --color-rank-1: #d4af37; /* gold — 1st place */ --color-rank-2: #c0c0c0; /* silver — 2nd place */ --color-rank-3: #cd7f32; /* bronze — 3rd place */ /* ── Fonts ───────────────────────────────────────────────────────────────── */ --font-body: 'JetBrains Mono', 'Courier New', monospace; /* all pages */ --font-serif: Georgia, serif; /* audio player, cert-card headings */ --font-cursive: 'Caveat', cursive; /* company/ledger pages, decorative */ --font-sans: 'Segoe UI', system-ui, sans-serif; /* fallback sans */ /* ── Border Radius ───────────────────────────────────────────────────────── */ --radius-sm: 3px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 20px; --radius-pill: 9999px; --radius-circle: 50%; /* ── Z-Index Stacking ────────────────────────────────────────────────────── */ --z-below: -1; /* behind normal flow (pseudo-elements) */ --z-base: 100; /* search bars, filter overlays */ --z-audio: 150; /* audio player bar (#gs-bar) */ --z-ticker: 1000; /* fixed bottom ticker */ --z-modal: 9999; /* modals, nav-loader, full-screen */ /* ── Shadows ─────────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.6); --shadow-md: 0 4px 20px rgba(0,0,0,0.7); --shadow-glow: 0 8px 25px rgba(56,189,248,0.15); --shadow-glow-danger: 0 8px 25px rgba(239,68,68,0.15); /* ── Transitions ─────────────────────────────────────────────────────────── */ --dur-fast: 0.15s; --dur-normal: 0.2s; --dur-slow: 2s; /* lien-pulse, scroll animations */ /* ── Gradients ───────────────────────────────────────────────────────────── */ --grad-card: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-2) 100%); --grad-bar: linear-gradient(to top, var(--accent), var(--accent-dim)); --grad-cert: linear-gradient(135deg, #0a0a14 0%, #111827 100%); --grad-cert-border: linear-gradient(90deg, var(--border-subtle), var(--border), var(--border-subtle)); --grad-delete-zone: linear-gradient(135deg, #0a0a14 0%, #1a0a0a 100%); --grad-audio-knob: linear-gradient(to bottom, #3d2b1f, #1a0f0a); --grad-kpi: linear-gradient(135deg, #080f1e 0%, #0d1829 100%); /* ════════════════════════════════════════════════════════════════════════════ * SPECIALTY THEMES — subsystems with their own distinct visual language (22 vars) * ════════════════════════════════════════════════════════════════════════════ */ /* ── Nav-Loader / Loading Screen ─────────────────────────────────────────── */ /* Shares the mahogany aesthetic with the audio player. Two unique additions: */ --loader-border: #2d1810; /* card outer border ring */ --loader-bar-start: #8b4513; /* progress bar gradient left (sienna) */ /* loader body bg → --audio-bg-dark */ /* loader text → --audio-accent */ /* loader bar mid → --audio-accent */ /* loader bar end → #f5f5dc (cream — fixed value, not a variable) */ /* ── Audio Player (Mahogany / Vintage Hi-Fi) ─────────────────────────────── */ --audio-bg-dark: #1a0f0a; /* tuner body background */ --audio-bg-mid: #3d2b1f; /* knob gradient midpoint */ --audio-accent: #b08d57; /* dial highlights, station name colour */ --audio-font: var(--font-serif); /* Pastel cycle for station visuals (15 colours, read by JS): */ --audio-pastels-json: '["#FFB7B2","#FFDAC1","#E2F0CB","#B5EAD7","#C7CEEA","#FF9AA2","#F8BBD0","#E1BEE7","#D1C4E9","#BBDEFB","#C8E6C9","#F0F4C3","#FFF9C4","#FFE0B2","#F5F5DC"]'; /* ── Company Pages — Leather & Parchment ────────────────────────────────── */ /* Company/ledger pages (_LEATHER_HEAD in company_ux.py) use a handwritten */ /* journal aesthetic: dark walnut sidebar, cream parchment body, tan ink. */ /* Uses --font-cursive ('Caveat') for the ledger heading text. */ --leather-bg-dark: #1a0e06; /* walnut brown — sidebar, dark areas */ --leather-bg-light: #f5ead0; /* cream parchment — main content area */ --leather-text: #2a1505; /* dark brown ink for body text */ --leather-accent: #c9a97a; /* tan — borders, highlights, nav */ --leather-accent-2: #6b3a1f; /* dark tan — links, pressed states */ --leather-border: #2d1810; /* same dark border as --loader-border */ /* ── WikiWads ────────────────────────────────────────────────────────────── */ /* The wiki / encyclopedia (wiki_shell in stats_ux.py) uses a completely */ /* different 3-colour accent palette from the rest of the game, based on */ /* a "10/30/60 rule": primary orange, secondary yellow, tertiary blue. */ --wiki-bg-page: #04070f; /* deeper black than main --bg-page */ --wiki-bg-card: #090e1c; /* wiki card background */ --wiki-bg-card-2: #0c1528; /* wiki nested / alt background */ --wiki-border: #1d2f55; /* wiki card and section borders */ --wiki-text: #dde8ff; /* wiki body text (cooler white) */ --wiki-text-muted: #607098; /* wiki muted text, metadata */ --wiki-accent-1: #f5a855; /* primary — orange (10%) headings, CTAs*/ --wiki-accent-2: #f5d76e; /* secondary — yellow (30%) highlights */ --wiki-accent-3: #90c4f0; /* tertiary — blue (60%) body accents */ /* ════════════════════════════════════════════════════════════════════════════ * SEMANTIC DATA — game-specific meaning. Most skins leave these unchanged. * Override only if your skin breaks the visual logic they encode. (34 vars) * ════════════════════════════════════════════════════════════════════════════ */ /* ── Transaction Ledger Badge Colors ────────────────────────────────────── */ /* Left-bar accent per transaction type. Source: TYPE_BADGE_COLORS dict */ /* in stats_ux.py. Each row in the financial ledger uses one of these. */ --tx-market: #3b82f6; /* market_buy, market_sell */ --tx-resource: #0ea5e9; /* resource_gain, resource_loss, _use */ --tx-cash-in: #22c55e; /* cash_in */ --tx-cash-out: #ef4444; /* cash_out */ --tx-business: #8b5cf6; /* retail_sale, business_startup */ --tx-land: #84cc16; /* land_buy, land_sell */ --tx-district: #f59e0b; /* district_merge, district_tax */ --tx-crypto: #f59e0b; /* crypto_buy, crypto_sell, crypto_swap */ --tx-bonds: #0891b2; /* bond purchase, sell, maturity */ --tx-shares: #3b82f6; /* share_buy, share_sell */ --tx-dividend: #22c55e; /* dividend received, annuity_interest */ --tx-tax: #f97316; /* all tax payments */ --tx-p2p: #6366f1; /* p2p_contract_acquired/sold/breach */ /* ── Chart.js / Canvas Colors ───────────────────────────────────────────── */ /* In Phase 3 these will be read via getComputedStyle so charts respond to */ /* skin changes. Until then they're documented here as the source of truth. */ --chart-income: rgba(34,197,94,0.7); --chart-expense: rgba(239,68,68,0.65); --chart-line: #38bdf8; --chart-line-fill: rgba(56,189,248,0.07); --chart-tooltip-bg: #0f172a; --chart-tooltip-border: #334155; --chart-grid: #111827; --chart-tick: #475569; /* ── Chat Mention Highlights ─────────────────────────────────────────────── */ --mention-player: #22c55e; /* @player mention chip */ --mention-item: #38bdf8; /* item mention chip */ --mention-crypto: #fbbf24; /* crypto mention chip */ --mention-stock: #f97316; /* stock/equity mention chip */ --chat-mod-accent: #f59e0b; /* moderator message left border */ /* ── Notification Badge (header 📒 icon) ────────────────────────────────── */ --notif-badge: #ef4444; /* unread count text colour */ --notif-badge-bg: rgba(239,68,68,0.13); /* ── Notification Type Badge Colors (expanded panel) ────────────────────── */ /* Each notification type in the notification panel has a coloured badge. */ /* Source: notification rendering in ux.py ~lines 3726–3872. */ --notif-market: #f59e0b; /* MARKET — trade alerts */ --notif-corporate: #38bdf8; /* CORPORATE — acquisition/merger */ --notif-execs: #a78bfa; /* EXECUTIVES — exec hire/fire/events */ --notif-general: #64748b; /* NOTICE — general system messages */ --notif-govt: #22c55e; /* GOVERNMENT — city/county/district */ --notif-business: #fb923c; /* BUSINESS — production, retail */ --notif-land: #84cc16; /* LAND — plot purchases, land events */ --notif-contract: #f472b6; /* CONTRACT — P2P contract alerts */ --notif-dm: #60a5fa; /* MESSAGE — direct messages */ /* ── Direct Messages (DM) ───────────────────────────────────────────────── */ --dm-own-accent: #c084fc; /* own outgoing message bubble / accent */ --dm-unread: #c084fc; /* unread conversation badge */ }