/* ========================================================================== GRIM DARK RPG ENGINE - DESIGN SYSTEM & STYLESHEET (v0.37) ========================================================================== DEVELOPER NOTES - GRAPHICS & VISUAL ARCHITECTURE: -------------------------------------------------------------------------- 1. DESIGN TOKEN SYSTEM: All visual properties (colors, typography, spacing, borders, transitions, and z-index layers) are centralized in the :root selector below. 2. FUTURE-PROOFING: To re-skin the UI, add custom theme classes to and override these tokens without touching layout selectors. 3. ACCESSIBILITY & EXTENSIBILITY: Resource bar colors use status-specific tokens to allow colorblind-friendly theme swaps in future updates. ========================================================================== */ /* ==================== SECTION 1: DESIGN SYSTEM TOKENS ==================== */ :root { /* --- COLOR PALETTE: Grim Dark Base & Panels --- */ --bg-page: #0c0c0c; --bg-panel: #111111; --bg-surface: #141414; --bg-surface-alt: #1a1a1a; --bg-input: #0c0c0c; /* --- COLOR PALETTE: Accents & Borders --- */ --border-crimson: #8a2525; --border-crimson-bright: #a33333; --border-subtle: #333333; --color-accent-crimson: #8a2525; --color-accent-hover: #a33333; /* --- COLOR PALETTE: Typography --- */ --text-primary: #b0a8a0; --text-muted: #776666; --text-bright: #ffffff; --text-crimson: #ff4444; --text-gold: #ffc107; --text-blue: #4169E1; /* --- RESOURCE STATUS METER COLORS --- */ --status-vitality: #4caf50; --status-celerity: #ffc107; --status-resolve: #2196f3; --status-dread: #9c27b0; --status-warning: #ff9800; --status-danger: #f44336; /* --- VALIDATION BADGE PALETTE --- */ --badge-valid-bg: #103a10; --badge-valid-text: #99ff99; --badge-valid-border: #44ff44; --badge-invalid-bg: #4a1010; --badge-invalid-text: #ff9999; --badge-invalid-border: #ff4444; /* --- TYPOGRAPHY --- */ --font-family-body: Georgia, serif; --font-family-header: 'Creepster', Georgia, serif; --font-size-sm: 0.8em; --font-size-base: 0.95em; --font-size-lg: 1.1em; /* --- LAYOUT DIMENSIONS & SHADOWS --- */ --sidebar-single-width: 340px; --sidebar-dual-width: 680px; --shadow-sidebar: -4px 0 10px rgba(0, 0, 0, 0.7); --shadow-glow-crimson: -2px 0 8px rgba(255, 68, 68, 0.5); /* --- ANIMATIONS & TRANSITIONS --- */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; } /* ==================== SECTION 2: CORE LAYOUT & GLOBAL RULES ==================== */ * { box-sizing: border-box; } body { margin: 0; padding: 0; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-family-body); display: flex; flex-direction: column; height: 100vh; overflow: hidden; } #main { flex: 1; display: flex; overflow: hidden; position: relative; } #left { flex: 1; display: flex; flex-direction: column; border-right: 2px solid var(--border-crimson); min-width: 0; transition: flex var(--transition-normal), opacity var(--transition-normal); } /* SETUP MODE: Hide narrative left panel to devote 100vw to 3-Pane Creation */ #main.setup-mode #left { display: none; } /* ==================== SECTION 3: TOP RESOURCE STATUS BAR ==================== */ #top-bar { background: var(--bg-panel); border-bottom: 2px solid var(--border-crimson); padding: 8px 12px; display: flex; gap: 15px; font-size: var(--font-size-base); flex-wrap: wrap; align-items: center; } .top-resource { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .bar { height: 12px; width: 80px; background: #222; border: 1px solid var(--border-crimson); position: relative; } .bar-fill { height: 100%; transition: width var(--transition-normal), background-color var(--transition-normal); } /* ==================== SECTION 4: NARRATIVE LOG & ACTION BUTTONS ==================== */ #log { flex: 1; overflow-y: auto; padding: 15px; background: var(--bg-surface-alt); font-size: var(--font-size-lg); line-height: 1.5; white-space: pre-wrap; } #choice-area { padding: 8px 10px; background: var(--bg-surface); border-top: 2px solid var(--border-crimson); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } #choice-area button { flex: 1; min-width: 140px; margin: 0; padding: 10px 12px; background: var(--color-accent-crimson); color: var(--text-bright); border: 1px solid var(--border-crimson-bright); cursor: pointer; font-family: var(--font-family-body); font-size: var(--font-size-base); text-align: center; transition: background var(--transition-fast), opacity var(--transition-fast); } #choice-area button:hover:not(:disabled) { background: var(--color-accent-hover); } #choice-area button:disabled { background: #2a2222; color: var(--text-muted); border-color: #443333; cursor: not-allowed; opacity: 0.6; } .choice-badge { background: #3a1010; color: var(--badge-invalid-text); padding: 2px 6px; border-radius: 4px; font-size: var(--font-size-sm); margin-right: 6px; border: 1px solid var(--border-crimson); } #input-area { padding: 10px; background: var(--bg-panel); border-top: 1px solid var(--border-subtle); } input, select { width: 100%; background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-crimson); padding: 8px; font-family: var(--font-family-body); } /* ==================== SECTION 5: RIGHT SIDEBAR & DUAL-PANE MODE ==================== */ #right { width: var(--sidebar-single-width); background: var(--bg-panel); transition: width var(--transition-normal); border-left: 2px solid var(--border-crimson); position: relative; box-shadow: var(--shadow-sidebar); z-index: 10; } #main.setup-mode #right { width: 100%; border-left: none; } #right.dual-pane { width: var(--sidebar-dual-width); } #right-content { height: 100%; overflow-y: auto; padding: 15px; } /* SIDEBAR BOOK TOGGLE BUTTONS */ .sidebar-tabs { position: absolute; left: 0; top: 20px; transform: translateX(-100%); display: flex; flex-direction: column; gap: 6px; z-index: 100; } .book-toggle-btn { background: var(--bg-surface-alt); color: var(--text-primary); border: 1px solid var(--border-crimson); border-right: none; padding: 8px 10px; cursor: pointer; border-radius: 6px 0 0 6px; transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; } .book-toggle-btn:hover, .book-toggle-btn.active { background: var(--color-accent-crimson); color: var(--text-bright); box-shadow: var(--shadow-glow-crimson); } /* ==================== SECTION 6: 3-PANE CREATION LAYOUT ==================== */ .creation-3pane { display: grid; grid-template-columns: 280px 1fr 340px; gap: 15px; height: 100%; overflow: hidden; } .pane { background: var(--bg-surface); border: 1px solid var(--border-subtle); padding: 12px; border-radius: 4px; overflow-y: auto; } .pane h3 { margin-top: 0; color: var(--text-crimson); border-bottom: 1px solid var(--border-crimson); padding-bottom: 6px; font-size: var(--font-size-lg); } /* ==================== SECTION 7: VALIDATION BADGES ==================== */ .val-badge { padding: 3px 8px; border-radius: 4px; font-size: var(--font-size-sm); font-weight: bold; margin-top: 4px; display: inline-block; } .val-badge.invalid { background: var(--badge-invalid-bg); color: var(--badge-invalid-text); border: 1px solid var(--badge-invalid-border); } .val-badge.valid { background: var(--badge-valid-bg); color: var(--badge-valid-text); border: 1px solid var(--badge-valid-border); } /* ==================== SECTION 8: IN-GAME TAB NAVIGATION ==================== */ .tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border-crimson); padding-bottom: 8px; margin-bottom: 12px; } .tab-btn { flex: 1; background: var(--bg-surface-alt); color: var(--text-muted); border: 1px solid var(--border-subtle); padding: 6px 4px; cursor: pointer; font-size: var(--font-size-sm); text-align: center; border-radius: 4px 4px 0 0; transition: all var(--transition-fast); } .tab-btn:hover { color: var(--text-primary); border-color: #666; } .tab-btn.active { background: var(--color-accent-crimson); color: var(--text-bright); border-color: var(--border-crimson-bright); } .dual-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } /* ==================== SECTION 9: ASPECT TAGS & CARDS ==================== */ .aspect-tag { display: inline-block; background: #1c2a38; color: #80c0ff; padding: 3px 6px; border: 1px solid #285078; border-radius: 3px; font-size: var(--font-size-sm); margin: 2px; cursor: pointer; } .aspect-tag.selected { background: var(--color-accent-crimson); color: var(--text-bright); border-color: var(--text-crimson); } .location-card { background: #181818; border: 1px solid var(--border-crimson); padding: 10px; margin-bottom: 12px; border-radius: 4px; } .location-card h4 { margin: 0 0 6px 0; color: var(--text-crimson); } .stat, .resource-text { margin: 6px 0; padding: 4px 0; } .log-action { font-style: italic; color: #c8c0b8; } .log-item { font-weight: bold; color: var(--text-blue); } button.dev { background: #3a2a1a; } .critical { color: var(--text-crimson); animation: pulse 1s infinite; } @keyframes pulse { 50% { opacity: 0.6; } } .point-buy { display: flex; align-items: center; gap: 10px; margin: 5px 0; } /* ==================== SECTION 10: TOOLTIPS ==================== */ .tooltip { position: relative; cursor: help; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 200px; background: var(--bg-surface-alt); color: var(--text-primary); border: 1px solid var(--border-crimson); padding: 8px; position: absolute; z-index: 2; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity var(--transition-normal); font-size: var(--font-size-base); pointer-events: none; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }