/* ============================================================ * css/aaa-polish.css — v0.9.13.0 "AAA Visual Polish Pass 1" * * Konsolidiertes UI-Polish-Layer. 100% additiv, reversibel: * -Tag aus index.html ziehen → vorheriger Zustand. * * Sections: * A) Topbar Hero-Hierarchy (Cash + Rep dominanter, klare Lesehierarchie) * B) Lead-Tray Pop-Animation (Slide-In + Bounce + Glow für High-Value) * C) Float-Number Polish (Money-Float größer/farbig, Easing-Curve) * D) Window Focus Polish (aktives Fenster klar erkennbar) * E) Modal Close-Button (24px Hit-Area + Win11-Hover) * F) Tooltip Konsistenz (einheitlicher dunkler Look) * G) Button States (hover/active/disabled normalisiert) * H) Scrollbar Polish (Win98-konform durch alle Modals) * I) Text Truncation (lange Namen mit Ellipsis + Tooltip-Hint) * J) Era-Transition Banner (CSS-only Animation-Klassen) * K) Loading-Spinner (für Long-Tick-Operationen) * * Author: Googli (CMO/UI-Polish-Lead) * Date: 2026-05-02 * ============================================================ */ /* === A) Topbar Hero-Hierarchy ====================================== * * Cash = Hero-Wert #1 (was der Spieler ständig im Auge hat) * Reputation = Hero-Wert #2 (Long-term-Health) * MA-Count, Rate, Projekte, Retainer, Difficulty = Sekundär * ================================================================== */ /* Cash-Cell: dominant. 18px statt 14px. Bold. v0.9.13.1: KEIN hard-coded color mehr im base-Selektor — era-specific Color-Overrides darunter, damit Era 4 (dark) lesbar bleibt. */ .topbar-cell[data-ctxmenu="topbar-money"] .val { font-size: 18px !important; font-weight: 700 !important; letter-spacing: 0.3px; line-height: 1.05; } /* Era-1 (Win98 hell): expliziter blauer Akzent als Hero-Farbe */ body.era-e1 .topbar-cell[data-ctxmenu="topbar-money"] .val, body:not(.era-e1):not(.era-e2):not(.era-e3):not(.era-e4) .topbar-cell[data-ctxmenu="topbar-money"] .val { color: #002a5e !important; } /* Era-2 (XP-Luna): warmer Bliss-Akzent */ body.era-e2 .topbar-cell[data-ctxmenu="topbar-money"] .val { color: #1a3a8a !important; } /* Era-3 (Material light): Material-Blau */ body.era-e3 .topbar-cell[data-ctxmenu="topbar-money"] .val { color: #1565c0 !important; } /* Era-4 (Glassmorphism dark): helles Weiß mit Cyan-Glow */ body.era-e4 .topbar-cell[data-ctxmenu="topbar-money"] .val { color: #f1f5f9 !important; text-shadow: 0 0 10px rgba(102, 126, 234, 0.5); } /* Cash-Cell-Label dezent — v0.9.13.1: Era-CSS überschreibt Farbe wenn nötig */ .topbar-cell[data-ctxmenu="topbar-money"] .label { font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; } body.era-e1 .topbar-cell[data-ctxmenu="topbar-money"] .label { color: #6a7a8c; } /* Reputation: kräftiger als bisher (15px), farb-codiert via Klasse */ #tb-rep-cell .val { font-size: 15px !important; font-weight: 700; letter-spacing: 0.2px; } /* Rep-Wert ohne explizite Klasse: default neutral-blau. v0.9.13.0: leichte Farb-Codierung, semantisch konsistent zu Score-Bändern. Da die Renderer aktuell keine Klassen setzen, leiten wir per data-rep-band ab. Falls renderer das später setzt, greifen die Regeln; bis dahin neutral. */ #tb-rep-cell[data-rep-band="critical"] .val { color: #a82020 !important; } #tb-rep-cell[data-rep-band="warn"] .val { color: #b07020 !important; } #tb-rep-cell[data-rep-band="ok"] .val { color: #2e6b2e !important; } #tb-rep-cell[data-rep-band="great"] .val { color: #1a8b1a !important; } #tb-rep-cell[data-rep-band="elite"] .val { color: #b8860b !important; text-shadow: 0 0 6px rgba(255,200,80,0.4); } /* v0.9.13.1: Era-4 (dark) braucht hellere Rep-Band-Farben */ body.era-e4 #tb-rep-cell[data-rep-band="critical"] .val { color: #ff6b6b !important; text-shadow: 0 0 8px rgba(255,107,107,0.5); } body.era-e4 #tb-rep-cell[data-rep-band="warn"] .val { color: #ffa94d !important; text-shadow: 0 0 8px rgba(255,169,77,0.4); } body.era-e4 #tb-rep-cell[data-rep-band="ok"] .val { color: #51cf66 !important; } body.era-e4 #tb-rep-cell[data-rep-band="great"] .val { color: #69db7c !important; text-shadow: 0 0 8px rgba(105,219,124,0.4); } body.era-e4 #tb-rep-cell[data-rep-band="elite"] .val { color: #ffd43b !important; text-shadow: 0 0 10px rgba(255,212,59,0.6); } /* Era 3 (helles Material): Material-Style Rep-Bänder */ body.era-e3 #tb-rep-cell[data-rep-band="critical"] .val { color: #d32f2f !important; } body.era-e3 #tb-rep-cell[data-rep-band="warn"] .val { color: #f57c00 !important; } body.era-e3 #tb-rep-cell[data-rep-band="ok"] .val { color: #388e3c !important; } body.era-e3 #tb-rep-cell[data-rep-band="great"] .val { color: #2e7d32 !important; } body.era-e3 #tb-rep-cell[data-rep-band="elite"] .val { color: #f9a825 !important; text-shadow: 0 0 6px rgba(255,200,80,0.5); } /* Sekundärzellen: Label noch dezenter als density-polish */ .topbar-cell[data-ctxmenu="topbar-employees"], .topbar-cell[data-ctxmenu="topbar-rate"], .topbar-cell[data-ctxmenu="topbar-projects"], .topbar-cell[data-ctxmenu="topbar-retainer"], .topbar-cell[data-ctxmenu="topbar-difficulty"], .topbar-cell[data-ctxmenu="topbar-status"] { opacity: 0.92; } .topbar-cell[data-ctxmenu="topbar-employees"] .label, .topbar-cell[data-ctxmenu="topbar-rate"] .label, .topbar-cell[data-ctxmenu="topbar-projects"] .label, .topbar-cell[data-ctxmenu="topbar-retainer"] .label, .topbar-cell[data-ctxmenu="topbar-difficulty"] .label, .topbar-cell[data-ctxmenu="topbar-status"] .label { color: #6a7888 !important; font-size: 9px !important; letter-spacing: 0.4px; text-transform: uppercase; } .topbar-cell[data-ctxmenu="topbar-employees"] .val, .topbar-cell[data-ctxmenu="topbar-rate"] .val, .topbar-cell[data-ctxmenu="topbar-projects"] .val, .topbar-cell[data-ctxmenu="topbar-retainer"] .val, .topbar-cell[data-ctxmenu="topbar-difficulty"] .val, .topbar-cell[data-ctxmenu="topbar-status"] .val { font-size: 12px !important; } /* Cash-Cell Bump-Animation (für notifyRevenue) — verstärkt. v0.9.13.1: Verzicht auf hard-coded color in Keyframes, sonst überschreibt Animation die Era-Color permanent. Stattdessen: scale + transient text-shadow. */ #tb-money.count-bump { animation: aaa-cash-pop 380ms cubic-bezier(0.25, 1.5, 0.5, 1); } @keyframes aaa-cash-pop { 0% { transform: scale(1); text-shadow: none; } 35% { transform: scale(1.18); text-shadow: 0 0 12px rgba(20,160,60,0.7), 0 0 4px rgba(20,160,60,0.5); } 100% { transform: scale(1); text-shadow: none; } } #tb-rep.count-bump { animation: aaa-rep-pop 380ms cubic-bezier(0.25, 1.5, 0.5, 1); } #tb-rep.count-bump-neg { animation: aaa-rep-pop-neg 380ms cubic-bezier(0.25, 1.5, 0.5, 1); } @keyframes aaa-rep-pop { 0% { transform: scale(1); text-shadow: none; } 35% { transform: scale(1.15); text-shadow: 0 0 6px rgba(20,160,60,0.5); } 100% { transform: scale(1); text-shadow: none; } } @keyframes aaa-rep-pop-neg { 0% { transform: scale(1) translateX(0); text-shadow: none; } 20% { transform: scale(1.08) translateX(-2px); } 40% { transform: scale(1.08) translateX(2px); } 60% { transform: scale(1.08) translateX(-1px); text-shadow: 0 0 6px rgba(180,40,40,0.5); } 100% { transform: scale(1) translateX(0); text-shadow: none; } } /* === B) Lead-Tray Pop-Animation =================================== * * Aktuell: Lead rutscht schlicht rein. Neu: 400ms Slide+Bounce, * High-Value-Leads (data-rate-tier="hi") bekommen Glow-Pulse. * ================================================================== */ /* Allgemeines Lead-Tray-Item slide-in beim Erscheinen. Wir nutzen eine animation-Klasse, die der Renderer setzen darf; falls nicht gesetzt, fallback per :nth-child-Trick auf Erstauftritt (nicht ganz robust, aber unschädlich). */ .lead-tray-card.aaa-lead-pop, .lead-tray-item.aaa-lead-pop, .lead-tray .lead-card.aaa-lead-pop { animation: aaa-lead-slide-in 420ms cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes aaa-lead-slide-in { 0% { opacity: 0; transform: translateX(-30px) scale(0.92); } 60% { opacity: 1; transform: translateX(4px) scale(1.04); } 80% { transform: translateX(-1px) scale(0.99); } 100% { opacity: 1; transform: translateX(0) scale(1); } } /* High-Value-Lead Glow-Pulse (renderer setzt data-lead-tier="hi") */ .lead-tray-card[data-lead-tier="hi"], .lead-tray-item[data-lead-tier="hi"], .lead-tray .lead-card[data-lead-tier="hi"] { animation: aaa-lead-slide-in 420ms cubic-bezier(0.34, 1.56, 0.64, 1), aaa-lead-pulse 2400ms ease-in-out 420ms 3; box-shadow: 0 0 0 1px rgba(255, 200, 80, 0.5), 0 0 12px rgba(255, 200, 80, 0.3); } @keyframes aaa-lead-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 200, 80, 0.4), 0 0 8px rgba(255, 200, 80, 0.25); } 50% { box-shadow: 0 0 0 2px rgba(255, 200, 80, 0.7), 0 0 16px rgba(255, 200, 80, 0.5); } } /* Lead-Decline / Lead-Expire: Crumple-Out */ .lead-tray-card.aaa-lead-crumple, .lead-tray-item.aaa-lead-crumple, .lead-tray .lead-card.aaa-lead-crumple { animation: aaa-lead-crumple 350ms ease-in forwards; pointer-events: none; } @keyframes aaa-lead-crumple { 0% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: 0.6; transform: scale(0.92) rotate(-2deg); } 100% { opacity: 0; transform: scale(0.85) rotate(-4deg); height: 0; margin: 0; padding: 0; } } /* === C) Float-Number Polish ======================================= * * feedback.js spawnt .float-num divs als inline-styled. Wir override-en * die wichtigen Properties via CSS für besseren Game-Feel. * ================================================================== */ .float-num { /* Override des inline transition: easing-curve mit leichtem Pop */ transition: transform 1100ms cubic-bezier(0.25, 0.8, 0.35, 1), opacity 1100ms ease-out !important; /* Bessere Lesbarkeit bei kleinen Zahlen */ font-feature-settings: "tnum" 1; } /* Größere Schrift für Income (positive) — der Hero-Moment */ .float-num.float-pos { font-size: 14px !important; color: #0a8a0a !important; text-shadow: 0 1px 2px rgba(255,255,255,0.95), 0 0 4px rgba(20,160,60,0.25), 1px 0 0 #fff, -1px 0 0 #fff !important; } /* High-Value Income (>= 1000): 18px + Glow. Renderer kann data-amount-tier="hi" setzen (nice-to-have); ohne fallback. */ .float-num.float-pos[data-amount-tier="hi"] { font-size: 20px !important; font-weight: 800 !important; color: #0c9c0c !important; text-shadow: 0 0 8px rgba(20,180,60,0.6), 0 1px 2px rgba(0,0,0,0.2), 1px 0 0 #fff, -1px 0 0 #fff !important; } /* Negativ: dezent rot, leicht kleiner */ .float-num.float-neg { font-size: 12px !important; color: #a82020 !important; text-shadow: 0 1px 2px rgba(255,255,255,0.95), 1px 0 0 #fff, -1px 0 0 #fff !important; } /* Info (Lead, etc.): blau, mittelgroß */ .float-num.float-info { font-size: 12px !important; color: #1a4a7a !important; text-shadow: 0 1px 2px rgba(255,255,255,0.95), 1px 0 0 #fff, -1px 0 0 #fff !important; } /* === D) Window Focus Polish ======================================= * * Active vs. inactive Windows klarer differenzieren. * Win98-Konvention behalten (blau active, grau inactive), nur stärker. * ================================================================== */ /* Aktives Fenster: stärkerer Drop-Shadow für Tiefe */ .window.active, .win.active, .modal-window.active, .window:not(.inactive) { box-shadow: 0 6px 20px rgba(0, 0, 30, 0.28), 0 2px 6px rgba(0, 0, 30, 0.15) !important; } /* Inaktives Fenster: dezenter, leicht entsättigt */ .window.inactive, .win.inactive, .modal-window.inactive { box-shadow: 0 2px 6px rgba(0, 0, 30, 0.08) !important; filter: saturate(0.85); } .window.inactive .titlebar, .win.inactive .titlebar, .modal-window.inactive .titlebar { opacity: 0.78; } /* === E) Modal Close-Button ======================================== * * Bigger hit area, Win11-style red hover. Behält Win98-Look. * ================================================================== */ .titlebar .close, .titlebar .btn-close, .window-controls .close, button.window-close, .titlebar button[title*="lose"], .titlebar button[title*="chließ"] { min-width: 22px; min-height: 22px; padding: 2px 6px !important; transition: background 120ms ease, color 120ms ease; cursor: pointer; } .titlebar .close:hover, .titlebar .btn-close:hover, .window-controls .close:hover, button.window-close:hover, .titlebar button[title*="lose"]:hover, .titlebar button[title*="chließ"]:hover { background: #e81123 !important; color: #fff !important; } .titlebar .close:active, .titlebar .btn-close:active, .window-controls .close:active, button.window-close:active, .titlebar button[title*="lose"]:active, .titlebar button[title*="chließ"]:active { background: #b00d1c !important; color: #fff !important; transform: translateY(1px); } /* === F) Tooltip Konsistenz ======================================== * * Einheitlicher Tooltip-Look, falls eigene Tooltip-Layer verwendet werden. * Native title-Tooltips kann Browser nicht stylen — die belassen wir. * ================================================================== */ .aaa-tooltip, .tooltip-floating, .era-tooltip, [role="tooltip"] { background: linear-gradient(180deg, #2c3540 0%, #1a2028 100%) !important; color: #f0f4f8 !important; border: 1px solid #0a0e14 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important; font-size: 11px !important; line-height: 1.4 !important; padding: 6px 9px !important; max-width: 280px; border-radius: 0 !important; } /* === G) Button States Normalisierung =============================== * * Disabled-Buttons konsistent muted. Hover/active soft polish. * ================================================================== */ button:disabled, .btn:disabled, .button:disabled, button.disabled, .btn.disabled { opacity: 0.5 !important; cursor: not-allowed !important; filter: saturate(0.4); } button:not(:disabled):hover, .btn:not(:disabled):hover, .button:not(:disabled):hover { filter: brightness(1.05); } button:not(:disabled):active, .btn:not(:disabled):active, .button:not(:disabled):active { filter: brightness(0.95); } /* === H) Scrollbar Polish (Win98-konform, konsistent) ============== * * Webkit-Custom-Scrollbar für alle scrollbaren Container im Spiel. * Behält den Win98-3D-Look bei. * ================================================================== */ .window ::-webkit-scrollbar, .modal-window ::-webkit-scrollbar, .scroll-container ::-webkit-scrollbar, [class*="content"] ::-webkit-scrollbar { width: 16px; height: 16px; } .window ::-webkit-scrollbar-track, .modal-window ::-webkit-scrollbar-track, .scroll-container ::-webkit-scrollbar-track, [class*="content"] ::-webkit-scrollbar-track { background: #d4d0c8; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; } .window ::-webkit-scrollbar-thumb, .modal-window ::-webkit-scrollbar-thumb, .scroll-container ::-webkit-scrollbar-thumb, [class*="content"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #e8e6e0 0%, #c8c4b8 100%); border: 1px solid #808080; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #4a4a4a; } .window ::-webkit-scrollbar-thumb:hover, .modal-window ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f0eee8 0%, #d0ccc0 100%); } .window ::-webkit-scrollbar-corner, .modal-window ::-webkit-scrollbar-corner { background: #d4d0c8; } /* === I) Text Truncation in Cards =================================== * * Lange Firmen-/MA-Namen mit Ellipsis statt Wrap. * Renderer-agnostisch über typische Klassen. * ================================================================== */ .lead-card .company-name, .lead-card .lead-title, .ma-card .ma-name, .employee-card .emp-name, .kanban-card .project-title, .list-row .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* === J) Era-Transition Banner ===================================== * * CSS-Klassen für Era-Wechsel-Banner. Renderer kann den Banner * mit .aaa-era-banner.aaa-era-banner--in einblenden, dann nach * Verzögerung .aaa-era-banner--out, dann removen. * ================================================================== */ .aaa-era-banner { position: fixed; left: 50%; top: 24%; transform: translate(-50%, -50%) scale(0.7); z-index: 999999; pointer-events: none; padding: 18px 36px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(20, 24, 32, 0.88) 100%); color: #fff; border: 2px solid rgba(255, 255, 255, 0.4); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 80px rgba(255, 200, 80, 0.2); font-family: 'Helvetica Neue', Arial, sans-serif; text-align: center; opacity: 0; min-width: 360px; } .aaa-era-banner__year { font-size: 14px; letter-spacing: 8px; color: #ffd060; text-transform: uppercase; margin-bottom: 6px; font-weight: 600; } .aaa-era-banner__title { font-size: 38px; font-weight: 800; letter-spacing: 1px; line-height: 1.1; margin-bottom: 4px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } .aaa-era-banner__subtitle { font-size: 13px; color: #c8d0d8; letter-spacing: 1px; } .aaa-era-banner.aaa-era-banner--in { animation: aaa-era-in 700ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .aaa-era-banner.aaa-era-banner--out { animation: aaa-era-out 500ms ease-in forwards; } @keyframes aaa-era-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.65); filter: blur(8px); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); filter: blur(0); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } } @keyframes aaa-era-out { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); filter: blur(4px); } } /* === Era-spezifische Banner-Backgrounds + Title-Treatments === v0.9.13.1: Banner sieht jetzt pro Era so aus, wie der Spieler die Era sieht. */ /* Era-1: Win98 Beige-Panel mit klassischer Title-Bar im Banner */ .aaa-era-banner[data-era="1"] { background: linear-gradient(180deg, #c0c0c0 0%, #a8a8a8 100%); border: 2px outset #d4d0c8; color: #000; box-shadow: 4px 4px 0 rgba(0,0,0,0.3), 0 0 60px rgba(255, 220, 100, 0.3); backdrop-filter: none; -webkit-backdrop-filter: none; } .aaa-era-banner[data-era="1"] .aaa-era-banner__year { background: linear-gradient(90deg, #000080 0%, #1084d0 100%); color: #fff; padding: 4px 12px; margin: -22px -44px 12px -44px; text-shadow: 1px 1px 0 #000; letter-spacing: 4px; } .aaa-era-banner[data-era="1"] .aaa-era-banner__title { color: #000080; font-family: 'MS Sans Serif', 'Tahoma', sans-serif; font-weight: 700; text-transform: uppercase; text-shadow: 1px 1px 0 #fff; letter-spacing: 0.5px; } .aaa-era-banner[data-era="1"] .aaa-era-banner__subtitle { color: #444; } /* Era-2: XP-Luna Bliss-Blue */ .aaa-era-banner[data-era="2"] { background: linear-gradient(180deg, #245edc 0%, #1a4ab8 100%); border: 2px solid #3a72e8; border-radius: 4px; color: #fff; box-shadow: 0 8px 32px rgba(36, 94, 220, 0.6), inset 0 1px 0 rgba(255,255,255,0.4); } .aaa-era-banner[data-era="2"] .aaa-era-banner__year { color: #ffd54f; letter-spacing: 6px; } .aaa-era-banner[data-era="2"] .aaa-era-banner__title { color: #fff; font-family: 'Tahoma', 'Verdana', sans-serif; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.5); } .aaa-era-banner[data-era="2"] .aaa-era-banner__subtitle { color: #c8d8ff; } /* Era-3: Helles Material mit cleanem Schatten */ .aaa-era-banner[data-era="3"] { background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%); border: none; border-radius: 12px; color: #1a1a2e; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 122, 255, 0.15); backdrop-filter: none; -webkit-backdrop-filter: none; } .aaa-era-banner[data-era="3"] .aaa-era-banner__year { color: #007aff; letter-spacing: 6px; } .aaa-era-banner[data-era="3"] .aaa-era-banner__title { color: #1a1a2e; font-family: 'SF Pro Display', 'Helvetica Neue', -apple-system, sans-serif; font-weight: 700; letter-spacing: -0.5px; } .aaa-era-banner[data-era="3"] .aaa-era-banner__subtitle { color: #6a7888; } /* Era-4: Glassmorphism dark mit Purple-Cyan-Akzent */ .aaa-era-banner[data-era="4"] { background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 27, 75, 0.92) 100%); border: 1px solid rgba(167, 139, 250, 0.4); border-radius: 12px; color: #f1f5f9; box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.2), 0 16px 64px rgba(0, 0, 0, 0.7), 0 0 80px rgba(102, 126, 234, 0.4); } .aaa-era-banner[data-era="4"] .aaa-era-banner__year { color: #a78bfa; letter-spacing: 7px; } .aaa-era-banner[data-era="4"] .aaa-era-banner__title { background: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #f0abfc 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-family: 'SF Pro Display', 'Inter', 'Helvetica Neue', sans-serif; font-weight: 800; letter-spacing: -0.5px; } .aaa-era-banner[data-era="4"] .aaa-era-banner__subtitle { color: #cbd5e1; } /* === K) Loading-Spinner ============================================ * * Subtle Win98-konformer Spinner für Long-Operations * (Year-End-Review, BWA-Generation, Save-Loading). * Renderer kann