/* ════════════════════════════════════════════════════════════════════════ FABLE UI/UX DESIGN DIRECTION PREVIEW THEMES — 20260609 Preview-only. Inert unless is set by the ?previewTheme= URL parameter (see inline loader in index.html). No gameplay, save, economy, payment, or Weekly Events behavior changes. ════════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────────────── DIRECTION A — "TITAN FORGE" Heavy bronze, carved panels, molten/forge accents. Premium fantasy weight. ────────────────────────────────────────────────────────────────────────── */ html[data-tl-preview-theme="forge"] { --bg-main: #140d07; --bg-panel: #1c130b; --bg-panel-2: #241910; --bg-panel-3: #2d2014; --border: #46341f; --border-gold: #9a6b1e; --text-main: #d6c3a1; --text-gold: #f4b942; --text-bright: #f9f1e3; --text-muted: #8a7257; --accent: #d96c1f; --accent-hover: #b95812; --danger: #c93a2a; --danger-hover: #a92e20; --gold-grad: linear-gradient(135deg, #6e4a10 0%, #d99e35 48%, #6e4a10 100%); --panel-shadow: 0 6px 28px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,178,90,0.07); --inset-shadow: inset 0 2px 10px rgba(0,0,0,0.6); --radius: 5px; --radius-sm: 3px; } html[data-tl-preview-theme="forge"] body { background: radial-gradient(circle at 50% -10%, rgba(217,108,31,0.10), transparent 42%), radial-gradient(circle at 85% 110%, rgba(150,70,20,0.10), transparent 38%), var(--bg-main); } html[data-tl-preview-theme="forge"] h1, html[data-tl-preview-theme="forge"] h2, html[data-tl-preview-theme="forge"] h3, html[data-tl-preview-theme="forge"] .modal-title, html[data-tl-preview-theme="forge"] .panel-title, html[data-tl-preview-theme="forge"] .splash-title { font-family: Georgia, 'Times New Roman', serif; letter-spacing: 0.035em; } html[data-tl-preview-theme="forge"] .panel, html[data-tl-preview-theme="forge"] .modal-box { border: 1px solid var(--border-gold); box-shadow: var(--panel-shadow), inset 0 0 0 1px rgba(0,0,0,0.55); background-image: linear-gradient(180deg, rgba(255,176,84,0.045), rgba(0,0,0,0) 26%); } html[data-tl-preview-theme="forge"] .modal-header { background: linear-gradient(180deg, #2d2014, #1c130b); border-bottom: 1px solid var(--border-gold); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,178,90,0.10); } html[data-tl-preview-theme="forge"] .btn-primary, html[data-tl-preview-theme="forge"] .cc-create-btn, html[data-tl-preview-theme="forge"] .splash-play-btn { background: linear-gradient(180deg, #e07a26 0%, #b95812 58%, #9c470c 100%); border: 1px solid #7a3c0c; color: #fdf3e4; text-shadow: 0 1px 2px rgba(60,20,0,0.55); box-shadow: 0 2px 10px rgba(217,108,31,0.28), inset 0 1px 0 rgba(255,210,150,0.35); } html[data-tl-preview-theme="forge"] .btn-outline { border-color: var(--border-gold); color: var(--text-gold); background: linear-gradient(180deg, rgba(154,107,30,0.14), rgba(154,107,30,0.04)); } html[data-tl-preview-theme="forge"] .tab-btn.active { color: #ffd27a; border-bottom-color: #e07a26; text-shadow: 0 0 12px rgba(224,122,38,0.45); } html[data-tl-preview-theme="forge"] .nav-btn { border: 1px solid rgba(154,107,30,0.45); background: linear-gradient(180deg, #241910, #1a1109); } html[data-tl-preview-theme="forge"] .nav-btn:hover { border-color: #d99e35; color: #ffd27a; } html[data-tl-preview-theme="forge"] .inv-slot, html[data-tl-preview-theme="forge"] .equip-slot { background: linear-gradient(180deg, #20160d, #170f08); border: 1px solid #4f3a1e; box-shadow: inset 0 1px 3px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,178,90,0.05); } html[data-tl-preview-theme="forge"] .inv-slot:hover, html[data-tl-preview-theme="forge"] .equip-slot:hover { border-color: #d99e35; } html[data-tl-preview-theme="forge"] .monster-card { border: 1px solid #46341f; background: linear-gradient(165deg, #241910 0%, #1a1109 70%); } html[data-tl-preview-theme="forge"] .monster-card.active { border-color: #e07a26; background: linear-gradient(165deg, #2e1d0e 0%, #20140a 70%); box-shadow: 0 0 14px rgba(224,122,38,0.18); } /* ════════════════════════════════════════════════════════════════════════ SHELL SURFACE TINTS — override the hardcoded !important premium-pass surfaces so the Forge preview reads distinctly in the live shell. Specificity: html[data-tl-preview-theme] prefix outranks the base pass. ════════════════════════════════════════════════════════════════════════ */ /* ── TITAN FORGE: ember overlay, bronze panel framing ── */ html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #game-screen { background: linear-gradient(180deg, rgba(20, 9, 2, 0.66), rgba(14, 6, 2, 0.78)), radial-gradient(circle at 50% 46%, rgba(236, 128, 36, 0.20), transparent 40%), radial-gradient(circle at 50% 112%, rgba(255, 122, 26, 0.16), transparent 34%), var(--ui-ingame-background) center / cover no-repeat #0a0502 !important; } html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui #left-panel, html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui #middle-panel, html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui #right-panel { border-color: rgba(196, 128, 44, 0.6) !important; background: linear-gradient(180deg, rgba(28, 17, 8, 0.9), rgba(14, 8, 3, 0.94)), linear-gradient(135deg, rgba(255, 180, 92, 0.07), transparent 30%) !important; box-shadow: inset 0 1px 0 rgba(255, 196, 120, 0.10), inset 0 0 0 1px rgba(120, 70, 22, 0.35), 0 20px 46px rgba(0, 0, 0, 0.46) !important; } html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .monster-row, html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .monster-card, html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .combat-monster-card, html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .tab-content, html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .content-card, html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .card, html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .skill-item, html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .equipment-slot { background: linear-gradient(180deg, rgba(32, 20, 10, 0.92), rgba(16, 9, 4, 0.94)) !important; border-color: rgba(214, 142, 52, 0.4) !important; } html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui #game-log { background: linear-gradient(180deg, rgba(16, 8, 3, 0.95), rgba(8, 4, 1, 0.97)) !important; border: 1px solid rgba(214, 142, 52, 0.45) !important; } html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui { --button-final-surface-top: rgba(54, 36, 20, 0.98); --button-final-surface-mid: rgba(30, 19, 9, 0.99); --button-final-surface-low: rgba(14, 8, 3, 0.99); --button-final-bronze: rgba(226, 152, 62, 0.92); --button-final-bronze-soft: rgba(140, 88, 34, 0.7); --button-final-violet: rgba(255, 170, 92, 0.9); --button-final-violet-soft: rgba(217, 108, 31, 0.45); } html[data-tl-preview-theme="forge"] #splash-screen, html[data-tl-preview-theme="forge"] #char-select-hub { background: radial-gradient(circle at 50% 18%, rgba(255, 170, 80, 0.22), transparent 26%), radial-gradient(circle at 50% 112%, rgba(255, 122, 26, 0.18), transparent 36%), linear-gradient(180deg, rgba(16, 7, 1, 0.30), rgba(10, 4, 1, 0.88)), var(--tl-ui-home-wallpaper) 50% 50% / cover no-repeat !important; } html[data-tl-preview-theme="forge"] body.platform-mobile #game-screen { background: linear-gradient(180deg, rgba(24, 12, 4, 0.86), rgba(12, 6, 2, 0.94)), radial-gradient(circle at 50% 0%, rgba(236, 128, 36, 0.14), transparent 42%), #0a0502; } /* ════════════════════════════════════════════════════════════════════════ HIGH-SPECIFICITY POLISH — splash CTA, modal shells, mobile surface cards. The base passes style these with id-scoped or !important rules. ════════════════════════════════════════════════════════════════════════ */ /* ── TITAN FORGE ── */ html[data-tl-preview-theme="forge"] #splash-screen .splash-play-btn { background: linear-gradient(180deg, #e8852c 0%, #bf5d13 60%, #9c470c 100%) !important; border: 2px solid #ad6a1e !important; color: #fdf3e4 !important; box-shadow: 0 4px 22px rgba(224, 122, 38, 0.4), inset 0 1px 0 rgba(255, 214, 156, 0.4) !important; } html[data-tl-preview-theme="forge"] .modal-box { background: linear-gradient(180deg, rgba(255, 176, 84, 0.05), rgba(0, 0, 0, 0) 24%), linear-gradient(180deg, #221709, #150d05) !important; border-color: #9a6b1e !important; } html[data-tl-preview-theme="forge"] body.platform-mobile #mobile-middle-surface-top { background: linear-gradient(180deg, rgba(40, 24, 11, 0.94), rgba(20, 12, 5, 0.96)) !important; border-color: rgba(214, 142, 52, 0.42) !important; } /* ════════════════════════════════════════════════════════════════════════ TRUE-VISUAL-REDESIGN TOKEN RETHEME — the 20260604 redesign layer drives most flagship surfaces (CTA fills, plates, lines). Override its tokens. ════════════════════════════════════════════════════════════════════════ */ html[data-tl-preview-theme="forge"] { --tl-redesign-void: #0a0502; --tl-redesign-night: #120a04; --tl-redesign-panel: rgba(24, 14, 6, 0.96); --tl-redesign-plate: linear-gradient(155deg, rgba(46, 30, 14, 0.98), rgba(14, 8, 3, 0.99)); --tl-redesign-gold: #f0a93f; --tl-redesign-gold-soft: rgba(240, 169, 63, 0.62); --tl-redesign-copper: #c66f24; --tl-redesign-rune: #ff8a3c; --tl-redesign-rune-soft: rgba(255, 138, 60, 0.32); --tl-redesign-line: rgba(240, 169, 63, 0.28); --tl-redesign-line-hot: rgba(255, 154, 54, 0.52); --tl-redesign-action: linear-gradient(180deg, #ffb45e 0%, #d96c1f 46%, #7e3c0e 100%); --tl-redesign-action-hot: linear-gradient(180deg, #ffc377 0%, #e87c2c 46%, #8f4715 100%); --tl-redesign-selected: linear-gradient(180deg, rgba(240, 169, 63, 0.36), rgba(54, 30, 10, 0.96)); --tl-redesign-secondary: linear-gradient(180deg, rgba(52, 36, 22, 0.98), rgba(16, 10, 5, 0.98)); } /* ════════════════════════════════════════════════════════════════════════ TITAN FORGE HYBRID — 20260609-titan-forge-hybrid-ui-preview-v1 Forge is now the DEFAULT preview look (loader applies data-tl-preview-theme ="forge" when no ?previewTheme= param is present). This section layers the approved hybrid amendments on top of the Forge direction: 1) Text-contrast discipline 2) Modal radius polish 3) Weekly Events Forge presentation skin (presentation-only; no flags, no lifecycle, no rewards, no write paths) 4) Accessible focus states ════════════════════════════════════════════════════════════════════════ */ /* ── 1. Text contrast polish ── */ html[data-tl-preview-theme="forge"] { --text-main: #e2d2b4; --text-muted: #a78f6e; --text-bright: #faf4e8; --tl-redesign-muted: #c4b290; --tl-redesign-text: #f9eed6; --tl-v3-muted: #c4b290; --tl-v3-parchment: #f9eed6; } /* Combat card state rail: bronze idle, gold hover, ember active */ html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .monster-card, html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .monster-row, html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .combat-monster-card { border-left: 3px solid rgba(150, 110, 60, 0.55) !important; } html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .monster-card:hover, html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .monster-row:hover, html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .combat-monster-card:hover { border-left-color: #d99e35 !important; } html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .monster-card.active, html[data-tl-preview-theme="forge"] body:not(.platform-mobile) #main-game-ui .combat-monster-card.active { border-left-color: #e07a26 !important; } /* ── 2. Modal radius polish ── */ html[data-tl-preview-theme="forge"] .modal-box { border-radius: 12px !important; } html[data-tl-preview-theme="forge"] .modal-header { border-top-left-radius: 11px; border-top-right-radius: 11px; } /* ── 3. Weekly Events Forge presentation skin ── Re-tints the blue-slate/teal family to bronze/ember. Structure, copy, lifecycle, flags, rewards, and write paths are untouched. */ html[data-tl-preview-theme="forge"] { --tl-v3-teal: #ffa44d; --tl-v3-rune-line: rgba(255, 154, 60, 0.32); --tl-v3-plate-cool: linear-gradient(155deg, rgba(46, 30, 14, 0.96), rgba(12, 8, 4, 0.99) 56%, rgba(35, 23, 12, 0.96)); --tl-v3-selected: linear-gradient(180deg, rgba(240, 169, 63, 0.30), rgba(40, 26, 12, 0.98) 54%, rgba(112, 69, 31, 0.95)); --tl-v3-night: #110a05; --tl-v3-void: #0a0502; } html[data-tl-preview-theme="forge"] .weekly-events-hero { border-color: rgba(240, 169, 63, 0.42) !important; background: radial-gradient(circle at 88% 14%, rgba(255, 154, 60, 0.18), transparent 34%), radial-gradient(circle at 8% 92%, rgba(223, 173, 92, 0.16), transparent 34%), linear-gradient(135deg, rgba(38, 24, 11, 0.98), rgba(14, 8, 3, 0.99)) !important; } html[data-tl-preview-theme="forge"] .weekly-events-client-submit, html[data-tl-preview-theme="forge"] .weekly-events-current-top-panel, html[data-tl-preview-theme="forge"] .weekly-events-player-summary, html[data-tl-preview-theme="forge"] .weekly-events-reward-preview, html[data-tl-preview-theme="forge"] .weekly-events-reward-claim-preview, html[data-tl-preview-theme="forge"] .weekly-events-rules-panel, html[data-tl-preview-theme="forge"] .weekly-events-past-panel, html[data-tl-preview-theme="forge"] .weekly-events-current-top-modal-head { border-color: rgba(240, 169, 63, 0.36) !important; background: linear-gradient(180deg, rgba(34, 22, 11, 0.98), rgba(13, 8, 3, 0.99)) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 214, 150, 0.08) !important; } html[data-tl-preview-theme="forge"] .weekly-events-lifecycle-step, html[data-tl-preview-theme="forge"] .weekly-events-card, html[data-tl-preview-theme="forge"] .weekly-events-lock-panel, html[data-tl-preview-theme="forge"] .weekly-events-player-summary-grid article, html[data-tl-preview-theme="forge"] .weekly-events-standings-row, html[data-tl-preview-theme="forge"] .weekly-events-reward-prizes article { border-color: rgba(214, 142, 52, 0.32) !important; background: linear-gradient(180deg, rgba(40, 26, 13, 0.92), rgba(18, 11, 5, 0.95)) !important; } html[data-tl-preview-theme="forge"] .weekly-events-timer span, html[data-tl-preview-theme="forge"] .weekly-events-state[data-tone="live"], html[data-tl-preview-theme="forge"] .weekly-events-kicker { color: #ffb45e !important; } html[data-tl-preview-theme="forge"] .weekly-events-hero-meta span { border-color: rgba(240, 169, 63, 0.32) !important; background: rgba(240, 169, 63, 0.10) !important; color: #f2dfba !important; } html[data-tl-preview-theme="forge"] .weekly-events-current-top-modal-box { border-color: rgba(240, 169, 63, 0.4) !important; } /* ── 4. Accessible focus states (Forge default look) ── */ html[data-tl-preview-theme="forge"] button:focus-visible, html[data-tl-preview-theme="forge"] a:focus-visible, html[data-tl-preview-theme="forge"] input:focus-visible, html[data-tl-preview-theme="forge"] select:focus-visible, html[data-tl-preview-theme="forge"] textarea:focus-visible, html[data-tl-preview-theme="forge"] [tabindex]:focus-visible { outline: 2px solid #f0a93f; outline-offset: 2px; } /* ── Forge Hybrid polish: residual cool-family accents ── */ html[data-tl-preview-theme="forge"] #hub-login-popup .hub-login-kicker { color: var(--tl-accent-gold); } html[data-tl-preview-theme="forge"] #bank-modal .bank-toolbar { border-color: var(--tl-border-strong) !important; background: var(--tl-panel-raised) !important; } html[data-tl-preview-theme="forge"] #bank-sort-all-btn, html[data-tl-preview-theme="forge"] .bank-sort-all-btn { border-color: var(--tl-border-gold) !important; background: linear-gradient(135deg, var(--tl-accent-ember), var(--tl-accent-gold)) !important; } /* Release-quality token bridge — 20260612-css-theme-sharp-cleanup-preview-v1 Keeps the approved Forge preview theme aligned with the semantic token layer appended in game.css. Presentation-only; no gameplay or data behavior. */ html[data-tl-preview-theme="forge"] { --tl-theme-panel: var(--tl-panel); --tl-theme-panel-raised: var(--tl-panel-raised); --tl-theme-border: var(--tl-border-muted); --tl-theme-gold: var(--tl-accent-gold); --tl-theme-ember: var(--tl-accent-ember); --tl-theme-success: var(--tl-success); --tl-theme-warning: var(--tl-warning); --tl-theme-danger: var(--tl-danger); --tl-theme-info: var(--tl-info); --tl-theme-mystic: var(--tl-mystic); }