/* ========================================================================= * Crypto Flex Mini App — theme * * Two palettes, picked by ```` which is set * from JS using ``Telegram.WebApp.colorScheme``. Telegram also injects * ``--tg-theme-*`` vars on the root but they're inconsistent across * clients/themes, so we only pull the hero accent color from them; the * rest is controlled by us for predictable contrast. * ========================================================================= */ :root { /* Binance-inspired palette. Primary is Binance gold (#F0B90B) with a warmer secondary (#FCD535); success / danger are Binance's standard up-green / down-red so candlestick-style cues feel familiar. */ --accent: #F0B90B; --accent-text: #1E2329; /* dark text reads best on yellow */ --accent-2: #FCD535; --gradient: linear-gradient(135deg, #F0B90B 0%, #FCD535 100%); --danger: #F6465D; /* Binance down-red */ --success: #0ECB81; /* Binance up-green */ --warning: #F8A808; --radius: 18px; --radius-sm: 12px; --pad: 16px; --header-h: 52px; /* Was 70px; trimmed to 56px (iOS / Material standard) so the nav stops eating the bottom of the viewport. The safe-area inset is still added on top for iPhone home-indicator clearance. */ --nav-h: 56px; --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* -------------------------------- dark (default) ---------------------- Mirrors Binance Dark: near-black canvas, #181A20 cards, #2B3139 lines. The ``html:not([data-theme])`` fallback makes dark the initial paint even if the inline pre-paint script in index.html fails (e.g. very strict CSP) -- product default is dark, so users see dark there too. */ html[data-theme="dark"], html:not([data-theme]) { --bg: #0B0E11; --surface: #181A20; --surface-2: #1E2329; --surface-hi: #2B3139; --text: #EAECEF; --text-muted: #B7BDC6; --text-soft: #848E9C; --border: #2B3139; --divider: #2B3139; --shadow: 0 2px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.6); --chip-bg: #2B3139; --chip-text: #EAECEF; } /* ---------------------------- light (opt-in) -------------------------- Mirrors Binance Light: white surfaces, #EAECEF dividers, charcoal text. */ html[data-theme="light"] { --bg: #FAFAFA; --surface: #FFFFFF; --surface-2: #F5F5F5; --surface-hi: #EFF2F5; --text: #1E2329; --text-muted: #707A8A; --text-soft: #929AA5; --border: #EAECEF; --divider: #EAECEF; --shadow: 0 2px 10px rgba(30, 35, 41, 0.06); --shadow-lg: 0 18px 40px rgba(30, 35, 41, 0.12); --chip-bg: #F5F5F5; --chip-text: #1E2329; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; -webkit-font-smoothing: antialiased; min-height: 100vh; /* 100dvh = dynamic viewport height, covers the whole screen when in Telegram's fullscreen mode. Fallback to 100vh for older clients. */ min-height: 100dvh; overscroll-behavior-y: contain; /* Pinch-zoom + double-tap-zoom kill (CSS layer). ``manipulation`` allows pan / scroll / single-tap but blocks the pinch and the 300 ms double-tap-zoom delay. Paired with the viewport-meta lockout in index.html and the JS gesture / multi-touch guard in app.js -- defence in depth so any one layer holds the line even if another is silently ignored by a webview update. */ touch-action: manipulation; -ms-touch-action: manipulation; } body { padding-top: env(safe-area-inset-top, 0); } button, input, select, textarea { font-family: inherit; color: inherit; } .hidden { display: none !important; } /* ================================================================ header */ .app-header { position: sticky; top: 0; z-index: 10; height: var(--header-h); padding: 0 var(--pad); display: flex; align-items: center; gap: 8px; background: var(--bg); border-bottom: 1px solid var(--divider); backdrop-filter: saturate(1.2); } .app-header h1 { flex: 1; margin: 0; font-size: 16px; font-weight: 600; text-align: center; letter-spacing: 0.1px; } /* (Header-level glyph removed for now -- the Plan badge lives only on the Profile screen via .level-pill below. Add a header-side rule back here if we want a global pill again.) */ /* Brand mark when ``setTitle(..., { logo: true })`` — gradient wordmark + official TredFlex Telegram icon (vector, crisp at any DPI). */ .app-header h1.logo { --logo-gold-1: #F0B90B; --logo-gold-2: #FCD535; --logo-gradient: linear-gradient(135deg, var(--logo-gold-1) 0%, var(--logo-gold-2) 100%); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; background: var(--logo-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 1px 1px rgba(240, 185, 11, 0.25)); } .app-header h1.logo::before { content: ""; flex: 0 0 auto; /* The SVG version carries a couple of ``feGaussianBlur`` glow filters that are fine at 512px but smear noticeably when downscaled to ~28px. Use the pre-rendered PNG and ask the browser for a crisp downscale. */ width: 34px; height: 34px; border-radius: 9px; background: url("/static/brand/tredflex-telegram-icon.png") center / contain no-repeat; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; box-shadow: 0 6px 14px rgba(240, 185, 11, 0.35); } .icon-btn { background: transparent; border: 0; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text); transition: background 0.15s; } .icon-btn:active { background: var(--surface-hi); } /* Empty spacer on the right of the header that mirrors the back-button slot so the centered title stays optically centered regardless of whether the back button is visible. Also keeps the right edge clear for Telegram's native fullscreen controls. */ .header-spacer { display: inline-block; width: 36px; height: 36px; flex: 0 0 auto; } /* Keep the back-button's 36px slot reserved when it's hidden so the ``flex:1`` title sits between equal 36px gutters on the left and right and stays perfectly centered (otherwise ``display:none`` on the back button collapses the left gutter and the title drifts ~18px to the left). The auth-screen rule a few sections down still uses ``display:none`` because it removes the whole header chrome, so this override only takes effect on regular app pages. */ #back-btn.hidden { display: inline-flex !important; visibility: hidden; pointer-events: none; } /* Privacy toggle (eye). Rendered inline inside cards that display money -- NOT in the header, because Telegram's native window chrome (close + minimize buttons in both top corners) overlays any header-edge controls. The two icons are stacked and cross-fade via ``body[data-privacy]`` so there's no JS re-paint on toggle. */ .balance-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .privacy-toggle { appearance: none; -webkit-appearance: none; background: rgba(0, 0, 0, 0.06); border: 0; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text); position: relative; overflow: hidden; flex: 0 0 auto; padding: 0; transition: background 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent; } .privacy-toggle:hover { background: rgba(0, 0, 0, 0.10); } .privacy-toggle:active { transform: scale(0.94); } .privacy-toggle .privacy-icon { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.2s ease, transform 0.2s ease; } .privacy-toggle .privacy-icon svg { width: 18px; height: 18px; } body:not([data-privacy="on"]) .privacy-icon--hide, body[data-privacy="on"] .privacy-icon--show { opacity: 0; transform: scale(0.75); pointer-events: none; } body[data-privacy="on"] .privacy-toggle { color: var(--accent); } /* ``.hero-gradient`` is actually a white card with a gradient BORDER (not a gradient fill), so the default dark icon reads perfectly -- we just make the hover/background a little more prominent so the button is obviously tappable against the bright white card. */ .hero-gradient .privacy-toggle { background: rgba(0, 0, 0, 0.05); } .hero-gradient .privacy-toggle:hover { background: rgba(0, 0, 0, 0.09); } /* Pull-to-refresh indicator. Fixed just below the header, translated off-screen by default (-56px) and pulled into view by touch handlers in app.js. Rotates while armed / refreshing. */ .ptr { position: fixed; top: var(--header-h); left: 0; right: 0; display: flex; justify-content: center; align-items: flex-start; pointer-events: none; z-index: 12; transform: translateY(-56px); opacity: 0; } .ptr.animating { transition: transform 0.24s cubic-bezier(.2,.7,.2,1), opacity 0.24s linear; } .ptr-spinner { width: 40px; height: 40px; margin-top: -28px; /* overlap header so it peeks down as user pulls */ border-radius: 50%; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.24s cubic-bezier(.2,.7,.2,1); } .ptr-spinner svg { width: 22px; height: 22px; transition: transform 0.18s ease; } .ptr.armed .ptr-spinner { transform: scale(1.06); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .ptr.armed .ptr-spinner svg { transform: rotate(180deg); } .ptr.refreshing .ptr-spinner svg { animation: ptr-spin 0.8s linear infinite; transform: none; } @keyframes ptr-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ================================================================ main */ main#app { padding: var(--pad); padding-bottom: calc(var(--nav-h) + var(--pad) + env(safe-area-inset-bottom, 0)); min-height: calc(100vh - var(--header-h) - var(--nav-h)); /* Promote to its own compositor layer so the swipe-driven ``transform: translateX(...)`` stays buttery on mobile -- without this the iOS WebView falls back to repainting on every frame. */ will-change: transform; } /* While the swipe-nav gesture is actively driving the page, suppress text selection (a long-ish horizontal drag would otherwise highlight text underneath the finger) and let the y-axis still scroll if the user changes their mind early. ``touch-action: pan-y`` tells the browser "y-scroll is yours, x-pan is mine" so vertical scrolling inside a swipe-active page still works normally. */ main#app.swipe-dragging { user-select: none; -webkit-user-select: none; touch-action: pan-y; } /* ============================================================ page transitions Top TMAs (Hamster Kombat, Notcoin, the Wallet apps) all share one trick that makes them feel fast even when they aren't: a quick slide+fade as the new page paints, so the user perceives motion instead of waiting for the network. We mirror that here. ``app-enter-forward`` runs on ``navigate(...)`` -- the new page eases in from slightly to the right of center, just like an iOS push. ``app-enter-back`` runs on ``goBack()`` -- mirrored so the incoming content arrives from the left, matching a pop. The distance is intentionally subtle (16 px) -- bigger swings start to feel like a carousel and fight with the existing horizontal-swipe carousel between sibling tabs. Duration is 180ms, snappy enough that even back-to-back taps don't stack up; the easing is a fast-out cubic-bezier so the motion "lands" decisively rather than coasting. Using translate3d (instead of translateX) keeps the transform on the GPU on WebKit-based engines including Telegram's iOS WebView -- avoids a compositor / paint round-trip on every navigation. */ @keyframes app-enter-forward { from { opacity: 0; transform: translate3d(16px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes app-enter-back { from { opacity: 0; transform: translate3d(-16px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } main#app.app-enter-forward { animation: app-enter-forward 180ms cubic-bezier(0.2, 0, 0, 1); } main#app.app-enter-back { animation: app-enter-back 180ms cubic-bezier(0.2, 0, 0, 1); } /* Honour the user's reduce-motion preference. The navigation still happens; we just don't animate the transition. Doing so keeps the app accessible without changing the navigation model. */ @media (prefers-reduced-motion: reduce) { main#app.app-enter-forward, main#app.app-enter-back { animation: none; } } /* ============================================================ breadcrumbs Shown above each non-root view. Matches the form-card padding (var(--pad)) on the sides so the trail lines up with the cards below it; uses ``--surface`` for a subtle separation from the page background so the trail reads as part of the chrome rather than floating content. The whole strip is hidden via the ``.hidden`` utility on root pages -- no padding is "leaked" when there's no trail to render. */ .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px var(--pad); background: var(--surface); border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1.4; /* Sticky just below the header so the user keeps the trail in sight even after scrolling a long page. ``z-index`` sits one below the header so the header still wins if the two ever overlap mid-scroll. */ position: sticky; top: var(--header-h); z-index: 9; } .breadcrumb-item { display: inline-flex; align-items: center; background: transparent; border: 0; padding: 2px 4px; margin: 0; border-radius: 6px; font: inherit; color: var(--text-soft); cursor: default; /* Some Safari builds add a default min-height on