/* Global interaction feel — user-facing app. --------------------------------------------------------------------------- Deliberately restrained. An earlier version of this file fired four effects on a single tap (scale + brightness + ripple + expanding ring), plus a hover shimmer and a vibration. Stacked effects read as a free template; one precise motion reads as expensive. Everything below is transform/opacity only, so it never touches layout and is safe on every page. Note: nothing here animates `transform` on . A transform on an ancestor re-bases `position: fixed` children, which would detach the bottom nav while the animation ran. Page entry is opacity only for that reason. */ /* ── Substrate ─────────────────────────────────────────────────────────────── None of this is visible on its own. Together it is most of the difference between an app that feels built and one that feels assembled. */ :root { /* Tells the browser this is a dark UI. Without it, native parts stay light: scrollbars, date pickers, form controls, and the autofill highlight — which is why autofilled fields flash bright yellow-white on a black page. That single detail makes a site look broken more than any layout flaw. */ color-scheme: dark; } html { /* Over-scroll past the top or bottom exposes the page canvas. Left at the default it flashes white on a black app every time a customer flicks a list — extremely visible, and read as a rendering bug. */ background-color: #060606; -webkit-text-size-adjust: 100%; /* iOS rescales text on rotate otherwise */ } body { /* Dark backgrounds make normal antialiasing look thick and slightly blurred. Greyscale smoothing is what makes text on this palette look sharp. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* The default blue browser selection on a gold-on-black app is jarring. */ ::selection { background: rgba(229,188,52,.28); color: #fff; } /* Chrome forces its own background on autofilled inputs and ignores background rules. A long inset shadow is the only thing it honours. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset; caret-color: #e5bc34; transition: background-color 9999s ease-in-out 0s; } /* Scrollbars: default light ones on a dark page are the classic giveaway. Kept neutral rather than gold — the Forex screens run a blue palette, and a gold scrollbar there would look like a leftover from another page. */ html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); } /* Long-pressing anything on iOS pops the grey selection callout, which makes a card or nav item feel like a web page rather than an app control. Text that customers may genuinely want to copy is exempted below. */ body { -webkit-touch-callout: none; } input, textarea, [contenteditable], .selectable, code, pre, .wallet-address, .copyable { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; } /* ── Page entry ────────────────────────────────────────────────────────────── Server-rendered pages snap in. A short fade is what removes the "document" feel and makes navigation read as an app. CSS-only on purpose: if scripting fails the page is simply visible, never stuck invisible. */ @keyframes pfx-page-in { from { opacity: 0; } to { opacity: 1; } } body { animation: pfx-page-in .22s ease-out both; } /* ── Press feedback ────────────────────────────────────────────────────────── One scale, no colour shift. Down fast, back slowly — equal timing in both directions is what makes a press feel mechanical instead of physical. */ button, .btn, a.btn, input[type="submit"], input[type="button"], [role="button"], .tool-btn, [onclick] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* :where() holds this at zero specificity on purpose. This file loads after each page's own