/* ========================================================================= * styles.css — Dark, modern, mobile-first theme. Gold = money. * ========================================================================= */ /* ========================================================================= * Theming. LIGHT is the default (:root); DARK is opt-in via * . Everything is driven by these variables so both * themes work everywhere with nothing hard-coded. `--gold` is the semantic * ACCENT (a blue that reads on white in light; the classic gold in dark). * ========================================================================= */ :root { --bg: #ffffff; /* app background (near-white) */ --bg-elev: #ffffff; /* cards / elevated surfaces */ --bg-elev-2: #f3f5f8; /* nested surfaces */ --line: #e6e9ef; /* borders / dividers */ --text: #0f172a; /* bold near-black */ --muted: #667085; /* soft grey secondary */ --gold: #2563eb; /* ACCENT — buttons & highlights (reads on white) */ --gold-deep: #1d4ed8; --gold-glow: rgba(37, 99, 235, 0.16); --green: #16a34a; /* up */ --danger: #dc2626; /* down */ --green-soft: rgba(22, 163, 74, 0.12); --accent-ink: #ffffff; /* text on accent buttons */ --topbar-bg: rgba(255, 255, 255, 0.92); --nav-bg: rgba(255, 255, 255, 0.96); --shadow: rgba(15, 23, 42, 0.08); --chart-grid: #eef1f5; --chart-fill-top: rgba(37, 99, 235, 0.16); --chart-fill-bot: rgba(37, 99, 235, 0); --radius: 16px; --nav-h: 64px; --top-h: 72px; } :root[data-theme="dark"] { --bg: #0d0f14; --bg-elev: #161a23; --bg-elev-2: #1e2430; --line: #262d3a; --text: #eef1f6; --muted: #8a93a6; --gold: #f5c451; /* accent stays gold in the dark theme */ --gold-deep: #d4a017; --gold-glow: rgba(245, 196, 81, 0.35); --green: #3ddc84; --danger: #ff5d5d; --green-soft: rgba(61, 220, 132, 0.15); --accent-ink: #2a1e00; --topbar-bg: linear-gradient(180deg, #12151d 0%, rgba(13, 15, 20, 0.92) 100%); --nav-bg: rgba(18, 21, 29, 0.96); --shadow: rgba(0, 0, 0, 0.5); --chart-grid: #1e2430; --chart-fill-top: rgba(245, 196, 81, 0.26); --chart-fill-bot: rgba(245, 196, 81, 0); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .app { max-width: 480px; margin: 0 auto; min-height: 100%; position: relative; } /* ---------------------------------------------------------------- Top bar */ .topbar { position: sticky; top: 0; z-index: 20; background: var(--topbar-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); } .topbar-inner { height: var(--top-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; } .topbar-right { display: flex; align-items: center; gap: 12px; } .topbar-gear { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; font-size: 18px; cursor: pointer; } .topbar-gear:active { transform: scale(0.92); } .brand { font-weight: 800; letter-spacing: 2px; font-size: 14px; color: var(--gold); text-shadow: 0 0 14px var(--gold-glow); } .balance-block { text-align: right; } .balance { font-size: 26px; font-weight: 800; color: var(--gold); line-height: 1.1; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px var(--gold-glow); } .income { font-size: 12px; color: var(--muted); } .income span { color: var(--green); font-weight: 600; } /* ---------------------------------------------------------- Tab body */ .tab-body { padding: 18px 16px calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); min-height: calc(100vh - var(--top-h) - var(--nav-h)); } /* ---------------------------------------------------------- Bottom nav */ .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; background: var(--nav-bg); backdrop-filter: blur(12px); border-top: 1px solid var(--line); z-index: 30; } .nav-btn { flex: 1; background: none; border: none; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; cursor: pointer; transition: color 0.15s; } .nav-icon { font-size: 20px; filter: grayscale(0.4); transition: transform 0.15s; } .nav-btn.active { color: var(--gold); } .nav-btn.active .nav-icon { filter: none; transform: translateY(-2px); } /* ---------------------------------------------------------- Cards */ .card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; box-shadow: 0 1px 3px var(--shadow); } .card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-title { font-weight: 700; font-size: 15px; } .card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } /* ---------------------------------------------------------- Buttons */ .btn { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 11px 16px; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform 0.08s, filter 0.15s, opacity 0.15s; } .btn:active { transform: scale(0.96); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-gold { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%); color: var(--accent-ink); border-color: var(--gold-deep); box-shadow: 0 4px 16px var(--gold-glow); } .btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; } .btn-wide { width: 100%; margin-top: 12px; } /* ---------------------------------------------------------- Tap zone */ .tap-wrap { display: flex; flex-direction: column; align-items: center; } .tap-zone { width: 240px; height: 240px; border-radius: 50%; border: 3px solid var(--gold-deep); background: radial-gradient(circle at 50% 38%, var(--gold-glow), transparent 70%), var(--bg-elev); color: var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; position: relative; margin: 22px 0 26px; box-shadow: 0 0 40px var(--gold-glow), inset 0 0 30px var(--gold-glow); transition: transform 0.06s; touch-action: manipulation; } .tap-coin { font-size: 60px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); } .tap-label { font-weight: 800; letter-spacing: 4px; font-size: 15px; color: var(--muted); } .tap-value { font-size: 22px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; } .tap-zone.tap-pop { animation: tapPop 0.18s ease; } @keyframes tapPop { 0% { transform: scale(1); } 40% { transform: scale(0.93); box-shadow: 0 0 60px var(--gold-glow); } 100% { transform: scale(1); } } .tap-upgrade { width: 100%; } /* ---------------------------------------------------------- Progress bar */ .progress { height: 8px; background: var(--bg-elev-2); border-radius: 6px; overflow: hidden; margin-top: 12px; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); border-radius: 6px; transition: width 0.25s ease; } .progress-caption { font-size: 11px; color: var(--muted); margin-top: 6px; text-align: right; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------- Floaters / coins */ .floater { position: fixed; transform: translate(-50%, -50%); font-weight: 800; font-size: 22px; color: var(--gold); text-shadow: 0 2px 8px rgba(0,0,0,0.6); pointer-events: none; z-index: 100; animation: floatUp 0.9s ease-out forwards; } @keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, -80%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -180%) scale(1); } } .coin-fx { position: fixed; transform: translate(-50%, -50%); font-size: 20px; pointer-events: none; z-index: 99; animation: coinFly 0.75s ease-out forwards; } @keyframes coinFly { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(180deg); } } /* ---------------------------------------------------------- Section head */ .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .section-head h2 { font-size: 20px; font-weight: 800; } .section-stat { color: var(--green); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------- Business cards */ .biz-card.not-owned { opacity: 0.96; } .biz-head { display: flex; align-items: center; gap: 12px; } .biz-icon { font-size: 30px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--bg-elev-2); border-radius: 14px; flex-shrink: 0; } .biz-title-wrap { flex: 1; min-width: 0; } .biz-name { font-weight: 800; font-size: 16px; } .biz-blurb { font-size: 12px; color: var(--muted); } .biz-level { font-size: 12px; font-weight: 700; color: var(--gold); white-space: nowrap; } .biz-stats { display: flex; gap: 10px; margin-top: 14px; } .biz-stats > div { flex: 1; background: var(--bg-elev-2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .biz-stats .muted { font-size: 11px; } .biz-stats b { font-size: 15px; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------- Upgrade rows */ .upgrade-list { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; } .upgrade-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; } .upgrade-row.is-done { opacity: 0.6; } .upgrade-row.is-locked { opacity: 0.5; } .upgrade-info { display: flex; flex-direction: column; min-width: 0; } .upgrade-name { font-weight: 700; font-size: 13px; } .upgrade-desc { font-size: 11px; color: var(--muted); } .pill { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 20px; white-space: nowrap; } .pill-done { background: var(--green-soft); color: var(--green); } .pill-locked { background: var(--bg-elev-2); color: var(--muted); } .gold { color: var(--gold); } .muted { color: var(--muted); } /* ---------------------------------------------------------- Coming soon */ .coming-soon { text-align: center; padding: 60px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .cs-badge { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--gold); border: 1px solid var(--gold-deep); padding: 5px 12px; border-radius: 20px; } .coming-soon h2 { font-size: 24px; } .coming-soon p { color: var(--muted); font-size: 14px; max-width: 300px; line-height: 1.5; } /* ---------------------------------------------------------- Modal / overlay */ .overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--bg-elev); border: 1px solid var(--gold-deep); border-radius: 22px; padding: 28px 22px; text-align: center; width: 100%; max-width: 340px; box-shadow: 0 0 50px var(--gold-glow); animation: popIn 0.28s cubic-bezier(0.18, 0.9, 0.35, 1.2); } @keyframes popIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal-emoji { font-size: 44px; } .modal h2 { margin: 8px 0 4px; font-size: 22px; } .modal-time { color: var(--muted); font-size: 13px; margin-bottom: 14px; } .modal-earned { font-size: 34px; font-weight: 800; color: var(--gold); text-shadow: 0 0 22px var(--gold-glow); margin-bottom: 8px; font-variant-numeric: tabular-nums; } .modal .btn-wide { margin-top: 18px; } /* ---------------------------------------------------------- Phase 2 */ /* Level badge in the top bar */ .brand-block { display: flex; flex-direction: column; gap: 3px; } .level-badge { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--muted); border: 1px solid var(--line); border-radius: 12px; padding: 2px 8px; width: fit-content; } /* Meta card (level / slots / xp) */ .meta-card { border-color: var(--gold-deep); } .xp-num { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } /* Locked businesses */ .biz-locked { opacity: 0.55; } .lock-tag { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--bg-elev-2); border-radius: 10px; padding: 5px 9px; white-space: nowrap; } /* Staff row */ .staff-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 12px; background: var(--bg-elev-2); border-radius: 12px; } /* Mini-mechanic panel */ .mech-panel { margin-top: 12px; padding: 12px; background: var(--bg-elev-2); border-radius: 12px; border: 1px dashed var(--line); } .mech-head { font-size: 13px; font-weight: 700; } .mech-note { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .chip { font-size: 12px; font-weight: 700; padding: 7px 11px; background: var(--bg-elev); color: var(--text); border: 1px solid var(--line); border-radius: 20px; cursor: pointer; transition: transform 0.08s; } .chip:active { transform: scale(0.95); } .chip:disabled { opacity: 0.45; cursor: not-allowed; } .chip-active { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 10px var(--gold-glow); } .chip-locked { font-size: 12px; font-weight: 700; padding: 7px 11px; color: var(--muted); border: 1px dashed var(--line); border-radius: 20px; } /* Market direction */ .up { color: var(--green); font-weight: 700; } .down { color: var(--danger); font-weight: 700; } /* Sell link */ .sell-link { display: block; width: 100%; margin-top: 12px; background: none; border: none; cursor: pointer; font-size: 11px; color: var(--muted); text-decoration: underline; text-align: center; padding: 4px; } .sell-link:active { color: var(--danger); } /* ---------------------------------------------------------- Phase 3 */ /* Toasts (random events, achievements) */ .toast-stack { position: fixed; top: calc(var(--top-h) + env(safe-area-inset-top) + 8px); left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 420px; z-index: 300; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { background: var(--bg-elev); border: 1px solid var(--gold-deep); border-radius: 14px; padding: 12px 16px; font-size: 13px; line-height: 1.45; color: var(--text); box-shadow: 0 6px 24px var(--shadow), 0 0 20px var(--gold-glow); pointer-events: auto; cursor: pointer; animation: toastIn 0.3s cubic-bezier(0.18, 0.9, 0.35, 1.2); } .toast b { color: var(--gold); } .toast-bad { border-color: var(--danger); box-shadow: 0 6px 24px var(--shadow); } .toast-bad b { color: var(--danger); } .toast-out { opacity: 0; transform: translateY(-8px); transition: all 0.3s; } @keyframes toastIn { from { opacity: 0; transform: translateY(-12px) scale(0.95); } to { opacity: 1; } } /* Active effect chips on Home */ .effects-row { justify-content: center; min-height: 0; width: 100%; } /* Profile: identity header */ .profile-head { text-align: center; padding: 24px 16px 18px; border-color: var(--gold-deep); } .title-icon { font-size: 44px; } .title-name { font-size: 24px; font-weight: 800; color: var(--gold); text-shadow: 0 0 16px var(--gold-glow); margin-top: 4px; } .title-sub { font-size: 13px; color: var(--muted); margin: 4px 0 10px; } /* Multiplier breakdown rows */ .mult-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; padding: 5px 0; gap: 8px; } .mult-row span { color: var(--muted); } .mult-total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 9px; font-size: 15px; } /* Legacy card */ .legacy-card { border-color: var(--gold-deep); } .legacy-preview { background: var(--bg-elev-2); border-radius: 12px; padding: 8px 12px; margin-top: 12px; } /* Stats grid */ .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } .stat-cell { background: var(--bg-elev-2); border-radius: 12px; padding: 11px 12px; display: flex; flex-direction: column; gap: 3px; } .stat-cell span { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); } .stat-cell b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; } /* Achievements grid */ .ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ach-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 14px 12px; text-align: center; } .ach-done { border-color: var(--gold-deep); box-shadow: 0 0 12px var(--gold-glow); } .ach-locked { opacity: 0.55; } .ach-icon { font-size: 26px; } .ach-name { font-weight: 800; font-size: 13px; margin-top: 6px; } .ach-desc { font-size: 11px; color: var(--muted); margin-top: 2px; } .ach-reward { font-size: 11px; color: var(--gold); font-weight: 700; margin-top: 6px; } /* ---------------------------------------------------------- Phase 4 */ /* Portfolio header numbers */ .pf-numbers { text-align: right; } .pf-value { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .pf-pl { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Flush list rows — full-width, no gaps, separated by a thin divider. Used for every browse-list in the app (markets, holdings, property, collection) so the whole game reads as one design. Full-bleed past the tab padding. */ .asset-list { display: flex; flex-direction: column; margin: 4px -16px 0; border-top: 1px solid var(--line); } .asset-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; color: var(--text); font-family: inherit; background: none; border: none; padding: 15px 16px; border-bottom: 1px solid var(--line); } .asset-row:active { background: var(--bg-elev-2); } .asset-row .logo-tile { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; } .asset-name-wrap { flex: 1; min-width: 0; } .asset-sym { font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .asset-name { font-size: 13px; color: var(--muted); margin-top: 3px; text-transform: capitalize; } .asset-price-wrap { text-align: right; flex-shrink: 0; } .asset-price { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; } .asset-change { font-size: 12.5px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; } .div-tag { font-size: 9px; font-weight: 800; color: var(--gold); border: 1px solid var(--gold-deep); border-radius: 6px; padding: 1px 4px; vertical-align: 2px; margin-left: 3px; } /* Detail view */ .back-link { background: none; border: none; color: var(--gold); font-size: 15px; font-weight: 700; cursor: pointer; padding: 0 0 12px; font-family: inherit; } .detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .detail-price-row { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 10px; } .detail-price { font-size: 30px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 16px var(--gold-glow); } .detail-change { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Chart container + fullscreen button */ .chart-wrap { position: relative; margin-bottom: 12px; } .chart-box { height: 240px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; position: relative; } /* Round icon button (close ✕ / back ‹ on full-screen views). */ .icon-btn { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; background: var(--bg-elev); color: var(--text); border: 1px solid var(--line); font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .icon-btn:active { transform: scale(0.92); } /* ------------------------------------------- Invest overhaul (Phase 4.2) */ /* Procedural logo tiles (js/logos.js) — one visual family everywhere */ .logo-tile { position: relative; width: 40px; height: 40px; flex-shrink: 0; display: inline-block; } .logo-tile svg { width: 100%; height: 100%; display: block; } .logo-tile img { /* designed override (img/logos/.svg) covers the generated logo */ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 24%; } /* once the override loads, hide the generated mark beneath it so the tile takes the override's own shape (these designed logos are circular). */ .logo-tile.has-override > svg { visibility: hidden; } .logo-tile.has-override img { border-radius: 0; } .logo-tile.lg { width: 52px; height: 52px; } .logo-tile.sm { width: 26px; height: 26px; vertical-align: -6px; } /* Property tiles: a rounded, tinted badge holding the property emoji, so real estate rows sit flush with the generated/designed asset logos. */ .logo-tile.estate-tile { display: inline-flex; align-items: center; justify-content: center; background: var(--ph, #223); border-radius: 24%; } .logo-tile.estate-tile .estate-emoji { font-size: 22px; line-height: 1; } .logo-tile.lg.estate-tile .estate-emoji { font-size: 30px; } .logo-tile.sm.estate-tile .estate-emoji { font-size: 15px; } .ticket-title { display: inline-flex; align-items: center; gap: 9px; } .hold-dot { color: var(--gold); font-size: 9px; vertical-align: 2px; } .pf-card { cursor: pointer; } /* Enlarged portfolio summary card on the Markets screen — roomier, not huge. */ .pf-card-lg { padding: 22px 20px; } .pf-card-lg .card-title { font-size: 18px; } .pf-card-lg .card-sub { font-size: 13px; margin-top: 4px; } .pf-card-lg .pf-value { font-size: 26px; } .pf-card-lg .pf-pl { font-size: 13px; margin-top: 2px; } .pf-view-btn { margin-top: 16px; } /* Portfolio page — "Not owned" empty state with a buy CTA. */ .pf-empty { text-align: center; padding: 44px 24px 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .pf-empty-title { font-size: 18px; font-weight: 800; } .pf-empty-sub { font-size: 14px; color: var(--muted); margin-bottom: 14px; } .pf-empty .btn-wide { max-width: 280px; } /* Search bar */ .search-wrap { position: relative; margin-bottom: 12px; } .search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: 0.7; pointer-events: none; } .search-input { width: 100%; padding: 12px 14px 12px 40px; background: var(--bg-elev); color: var(--text); border: 1px solid var(--line); border-radius: 14px; font-size: 15px; font-family: inherit; outline: none; -webkit-appearance: none; appearance: none; } .search-input:focus { border-color: var(--gold-deep); box-shadow: 0 0 12px var(--gold-glow); } .search-input::placeholder { color: var(--muted); } /* Sort segmented control */ .seg-row { display: flex; gap: 6px; margin-bottom: 14px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 4px; } .seg { flex: 1; background: none; border: none; border-radius: 9px; color: var(--muted); font-size: 12px; font-weight: 700; padding: 8px 4px; cursor: pointer; font-family: inherit; transition: all 0.15s; } .seg-active { background: var(--bg-elev-2); color: var(--gold); } /* Detail: big name + today/month change pills */ .asset-sym.big { font-size: 19px; } .change-row { display: flex; gap: 10px; margin-bottom: 14px; } .chg-pill { flex: 1; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; } .chg-pill span { display: block; font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; } /* Prominent detail highlights — capitalization + how many units are buyable */ .detail-highlights { display: flex; gap: 10px; margin-bottom: 14px; } .dh-tile { flex: 1; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .dh-tile span { display: block; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; } .dh-tile b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } /* Timeframe chip row — chips + fullscreen button on one horizontally scrollable line */ .tf-row { margin-bottom: 14px; flex-wrap: nowrap; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; } .tf-row::-webkit-scrollbar { display: none; } .tf-chip { padding: 6px 9px; font-size: 11px; flex-shrink: 0; } .tf-fs { margin-left: auto; padding: 6px 9px; color: var(--gold); flex-shrink: 0; } /* Pinned Buy/Sell bar */ .trade-spacer { height: 76px; } .trade-bar { position: fixed; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; display: flex; gap: 10px; padding: 12px 16px; background: linear-gradient(0deg, var(--bg) 60%, transparent); z-index: 25; } .trade-btn { flex: 1; padding: 14px; font-size: 16px; } /* Buyout + manage */ .buyout-card, .manage-card { border-color: var(--gold-deep); } /* Modern buyout card */ .buyout-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .buyout-title { font-size: 16px; font-weight: 800; } .buyout-badge { font-size: 12px; font-weight: 800; color: var(--gold); background: var(--gold-glow); border-radius: 20px; padding: 4px 12px; white-space: nowrap; } .buyout-bar { height: 8px; background: var(--bg-elev-2); border-radius: 8px; overflow: hidden; margin: 14px 0; } .buyout-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width 0.25s ease; } .buyout-stats { display: flex; gap: 10px; } .buyout-stats > div { flex: 1; background: var(--bg-elev-2); border-radius: 12px; padding: 11px 12px; display: flex; flex-direction: column; gap: 3px; } .buyout-stats span { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); } .buyout-stats b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; } .buyout-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 12px; } .manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .manage-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 12px; height: auto; line-height: 1.3; } .manage-btn b { font-size: 13px; } .manage-btn small { font-size: 10px; color: var(--muted); font-weight: 600; } .manage-btn:disabled small { color: var(--muted); } /* Trade ticket */ .ticket { max-width: 360px; text-align: left; } .ticket-head { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 800; margin-bottom: 6px; } .ticket-price { font-size: 24px; font-weight: 800; color: var(--gold); margin-bottom: 14px; font-variant-numeric: tabular-nums; } .ticket-quick { margin: 12px 0; } .ticket-readout { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 16px; } .ticket-readout div { display: flex; flex-direction: column; } .ticket-readout span { font-size: 11px; } .ticket-readout b { font-size: 18px; font-variant-numeric: tabular-nums; } .review-list { background: var(--bg-elev-2); border-radius: 12px; padding: 10px 14px; margin: 8px 0 16px; } /* Range slider — dark + gold */ .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--bg-elev-2); border-radius: 6px; outline: none; margin: 8px 0; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, var(--gold), var(--gold-deep)); cursor: pointer; border: 2px solid var(--bg); box-shadow: 0 0 10px var(--gold-glow); } .slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bg); background: var(--gold); cursor: pointer; } /* True full-screen surfaces (chart + trade). Opaque, above everything, filling the whole viewport so nothing behind shows through. */ .fs-screen, .trade-screen { position: fixed; inset: 0; z-index: 300; background: var(--bg); display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 14px); animation: fadeIn 0.16s ease; } /* Full-screen chart */ .fs-head { display: flex; align-items: center; gap: 12px; } .fs-head .fs-id { flex: 1; min-width: 0; } .fs-head .fs-id .asset-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fs-price { font-size: 20px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; } .fs-chart { flex: 1; min-height: 0; margin: 12px 0; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .fs-tf { justify-content: center; flex-wrap: wrap; } /* Full-screen trade page */ .trade-screen { overflow-y: auto; } .trade-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .trade-head .trade-id { flex: 1; min-width: 0; } .trade-head .asset-sym { font-size: 18px; font-weight: 800; } .trade-live { font-size: 15px; color: var(--muted); margin-bottom: 16px; } .trade-live b { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; margin-left: 4px; } .trade-amount-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 16px 14px; margin-bottom: 16px; } .amount-mode-label { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } /* Prominent full-width Cash / Shares selector so it's obvious you can enter either — the active side is filled with the accent colour. */ .amount-toggle { display: flex; gap: 6px; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 12px; padding: 5px; width: 100%; margin: 0 0 16px; } .amt-mode { flex: 1; text-align: center; background: none; border: none; color: var(--muted); font-weight: 800; font-size: 14px; padding: 10px 8px; border-radius: 9px; cursor: pointer; font-family: inherit; transition: background 0.12s, color 0.12s; } .amt-mode.on { background: var(--gold); color: var(--accent-ink); box-shadow: 0 2px 8px var(--gold-glow); } /* The editable number reads as a tappable field (accent underline + caret). */ .amount-input-wrap { display: flex; align-items: center; justify-content: center; gap: 4px; border-bottom: 2px solid var(--gold); margin: 0 6px; padding-bottom: 8px; } .amt-prefix, .amt-suffix { font-size: 26px; font-weight: 800; color: var(--muted); flex-shrink: 0; } .amount-input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font-size: 40px; font-weight: 800; text-align: center; font-family: inherit; font-variant-numeric: tabular-nums; caret-color: var(--gold); } .amount-tip { text-align: center; color: var(--muted); font-size: 12px; margin-top: 10px; } .amount-alt { text-align: center; color: var(--muted); font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; } .trade-summary { background: var(--bg-elev-2); border-radius: 12px; padding: 6px 14px; margin-top: 16px; } .trade-cta { margin-top: auto; padding-top: 18px; } .trade-cta .btn-wide + .btn-wide { margin-top: 10px; } /* ---------------------------------------------------------- Phase 5 */ /* Item visual: coloured placeholder that a drop-in image covers */ .asset-visual { position: relative; height: 96px; border-radius: 12px; background: linear-gradient(160deg, var(--ph, #1e2430) 0%, var(--bg-elev-2) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 10px; } .asset-visual-icon { font-size: 40px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45)); } .asset-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .owned-badge { position: absolute; top: 8px; right: 8px; z-index: 2; background: var(--bg-elev); border: 1px solid var(--gold-deep); color: var(--gold); font-size: 12px; font-weight: 800; border-radius: 10px; padding: 3px 8px; } .asset-card .asset-body .mult-row { padding: 3px 0; } .asset-card .chip-row { margin-top: 10px; } /* Luxury grid cards */ .lux-visual { height: 72px; margin-bottom: 8px; } .lux-visual .asset-visual-icon { font-size: 30px; } .lux-card .btn { margin-top: 8px; width: 100%; } .lux-set-head { margin-top: 18px; margin-bottom: 10px; } .lux-set-title { font-size: 16px; } /* Collection (luxury) rows — same flush-row language as the markets. */ .lux-row.is-owned .asset-sym { color: var(--muted); } .lux-row .asset-price-wrap .btn { white-space: nowrap; } /* ---------------------------------------------------------- Settings */ .settings-group { margin-bottom: 18px; } .settings-group-title { font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin: 2px 4px 8px; } .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 3px var(--shadow); margin-bottom: 10px; } .settings-row .settings-label { font-weight: 700; font-size: 15px; } .settings-row .settings-hint { font-size: 12px; color: var(--muted); margin-top: 2px; } .theme-toggle { display: flex; gap: 4px; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; flex-shrink: 0; } .theme-opt { background: none; border: none; border-radius: 9px; cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 700; font-family: inherit; padding: 7px 14px; } .theme-opt.on { background: var(--gold); color: var(--accent-ink); } .settings-link { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 3px var(--shadow); color: var(--text); font-family: inherit; padding: 14px 16px; font-size: 15px; font-weight: 700; cursor: pointer; margin-bottom: 14px; } .settings-link:active { background: var(--bg-elev-2); } .settings-link .chev { color: var(--muted); font-weight: 700; }