/* ============================================================ QuantLens — Liquid Glass design system A content-first interface with glass reserved for navigation, controls, and transient UI, following Apple's material model. The `` attribute on every page is a design-language marker, not a toggle. To introduce a new design language, target a new `[data-theme="..."]` selector on :root and override tokens there. The current :root tokens below ARE the liquid-glass defaults. ============================================================ */ :root { color-scheme: dark; /* Environment — content continues edge-to-edge beneath glass. */ --canvas: #07090f; --gradient-base: radial-gradient(ellipse 78% 58% at 14% -6%, rgba(63, 106, 255, 0.26), transparent 64%), radial-gradient(ellipse 64% 52% at 94% 20%, rgba(0, 207, 255, 0.13), transparent 63%), radial-gradient(ellipse 72% 62% at 42% 112%, rgba(142, 72, 255, 0.19), transparent 67%), linear-gradient(155deg, #0c1120 0%, var(--canvas) 43%, #090b15 100%); --ambient-orb-1: rgba(57, 126, 255, 0.2); --ambient-orb-2: rgba(174, 92, 255, 0.16); /* Liquid Glass: controls/navigation only. */ --glass-thin: rgba(185, 204, 255, 0.18); --glass-regular: rgba(166, 190, 244, 0.28); --glass-strong: rgba(208, 222, 255, 0.38); --glass-edge: rgba(255, 255, 255, 0.17); --glass-edge-soft: rgba(255, 255, 255, 0.09); --glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.3), 0 3px 10px rgba(0, 0, 0, 0.16); --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.035); --glass-filter: blur(12px) saturate(140%); --glass-filter-compact: blur(8px) saturate(125%); /* Quiet content surfaces — intentionally not glass. */ --surface: rgba(17, 21, 32, 0.74); --surface-raised: rgba(23, 28, 42, 0.88); --surface-hover: rgba(255, 255, 255, 0.048); --surface-pressed: rgba(255, 255, 255, 0.075); --separator: rgba(255, 255, 255, 0.075); /* Control state fills — translucent tints for pressed controls. Visually similar to glass but semantically distinct: no backdrop-filter, so do NOT use these for floating glass surfaces. */ --control-flash: rgba(255, 255, 255, 0.13); --glass-skeleton: rgba(255, 255, 255, 0.11); --accent: #8ea5ff; --accent-bright: #b5c4ff; --accent-fg: #071020; --accent-bg: rgba(111, 141, 255, 0.16); --accent-edge: rgba(145, 169, 255, 0.32); --glow-accent: radial-gradient(circle at center, rgba(111, 141, 255, 0.3), transparent 70%); --up: #57e08a; --down: #ff718c; --up-bg: rgba(87, 224, 138, 0.12); --down-bg: rgba(255, 113, 140, 0.12); --up-fill: linear-gradient(145deg, rgba(87, 224, 138, 0.17), rgba(87, 224, 138, 0.07)); --down-fill: linear-gradient(145deg, rgba(255, 113, 140, 0.17), rgba(255, 113, 140, 0.07)); --up-edge: rgba(87, 224, 138, 0.28); --down-edge: rgba(255, 113, 140, 0.28); --mkt-us: #73d5ff; --mkt-cn: #ffca5c; --mkt-hk: #63e3cf; --text: #f5f7fb; --text-2: rgba(235, 239, 249, 0.68); --text-3: rgba(222, 228, 241, 0.43); --t-price: 22px; --t-body: 15px; --t-caption: 12px; --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace; --pad: 16px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 30px; --r-full: 9999px; --safe-bottom: env(safe-area-inset-bottom, 0px); --space-2xs: 3px; --space-xs: 6px; --space-sm: 10px; --space-md: 14px; --space-lg: 18px; --space-xl: 26px; --space-2xl: 36px; --nav-pill-h: 68px; --icon-btn: 44px; --control-shell-h: 32px; --control-item-h: 26px; --control-font: 11px; --control-pad-x: 9px; --chart-h: 210px; --focus-offset: 2px; --glass-edge-strong: rgba(255, 255, 255, 0.12); --card-shadow: 0 12px 38px rgba(0, 0, 0, 0.08); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-spring: cubic-bezier(0.22, 1.18, 0.36, 1); --dur-fast: 160ms; --dur-med: 320ms; --dur-slow: 520ms; } html.light { color-scheme: light; --canvas: #edf2fa; --gradient-base: radial-gradient(ellipse 80% 58% at 12% -8%, rgba(88, 135, 255, 0.25), transparent 62%), radial-gradient(ellipse 64% 48% at 96% 18%, rgba(66, 208, 244, 0.18), transparent 62%), radial-gradient(ellipse 70% 58% at 46% 112%, rgba(165, 113, 255, 0.18), transparent 66%), linear-gradient(155deg, #f4f7fc 0%, #edf2f9 48%, #f5f1fb 100%); --ambient-orb-1: rgba(68, 126, 255, 0.18); --ambient-orb-2: rgba(157, 86, 255, 0.13); --glass-thin: rgba(255, 255, 255, 0.62); --glass-regular: rgba(255, 255, 255, 0.72); --glass-strong: rgba(255, 255, 255, 0.85); --glass-edge: rgba(255, 255, 255, 0.6); --glass-edge-soft: rgba(62, 78, 110, 0.1); --glass-shadow: 0 18px 48px rgba(48, 70, 112, 0.15), 0 3px 10px rgba(51, 70, 102, 0.08); --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(72, 90, 126, 0.05); --surface: rgba(255, 255, 255, 0.62); --surface-raised: rgba(255, 255, 255, 0.82); --surface-hover: rgba(255, 255, 255, 0.54); --surface-pressed: rgba(115, 137, 180, 0.12); --separator: rgba(48, 60, 88, 0.085); --glass-skeleton: rgba(65, 83, 118, 0.12); --control-flash: rgba(48, 68, 110, 0.17); --accent: #496de2; --accent-bright: #365bcf; --accent-fg: #fff; --accent-bg: rgba(73, 109, 226, 0.12); --accent-edge: rgba(73, 109, 226, 0.25); --glow-accent: radial-gradient(circle at center, rgba(73, 109, 226, 0.22), transparent 70%); --up: #168a4a; --down: #d92e55; --up-bg: rgba(22, 138, 74, 0.09); --down-bg: rgba(217, 46, 85, 0.09); --up-fill: linear-gradient(145deg, rgba(22, 138, 74, 0.12), rgba(22, 138, 74, 0.05)); --down-fill: linear-gradient(145deg, rgba(217, 46, 85, 0.12), rgba(217, 46, 85, 0.05)); --up-edge: rgba(22, 138, 74, 0.22); --down-edge: rgba(217, 46, 85, 0.22); --mkt-us: #087ba8; --mkt-cn: #b56b00; --mkt-hk: #087c6e; --text: #171a21; --text-2: rgba(32, 38, 51, 0.66); --text-3: rgba(42, 50, 66, 0.46); --glass-edge-strong: rgba(72, 90, 126, 0.07); --card-shadow: 0 12px 38px rgba(38, 56, 90, 0.08); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { min-height: 100%; font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--canvas); } body { min-width: 320px; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; background: var(--gradient-base); color: var(--text); font-size: var(--t-body); line-height: 1.45; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; padding-top: env(safe-area-inset-top, 0px); transition: color var(--dur-med) var(--ease-out); } body::before, body::after { content: ""; position: fixed; z-index: -1; width: 46vw; aspect-ratio: 1; border-radius: 50%; filter: blur(56px); pointer-events: none; opacity: 0.72; /* Ambient drift is decorative. Continuous GPU compositing of two huge blurred discs — kept small enough that scrolling stays smooth. */ animation: ambient-drift 16s ease-in-out infinite alternate; } body::before { top: -28vw; left: -14vw; background: var(--ambient-orb-1); } body::after { right: -24vw; bottom: -34vw; background: var(--ambient-orb-2); animation-delay: -8s; animation-direction: alternate-reverse; } button, input, select { font: inherit; } button { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 2px solid var(--accent); outline-offset: var(--focus-offset); } ::selection { background: var(--accent-bg); color: var(--text); } @keyframes ambient-drift { from { transform: translate3d(-2%, -2%, 0) scale(0.94); } to { transform: translate3d(7%, 6%, 0) scale(1.08); } } @media (prefers-reduced-transparency: reduce) { :root { --glass-thin: #171b26; --glass-regular: #202633; --glass-strong: #293141; --glass-filter: none; --glass-filter-compact: none; --surface: #111722; /* Replace glass edge / shadow / inset highlight with quiet card edges so NavBar/TopBar/SegmentedControl degrade to solid cards, not translucent shells with a glassy rim. */ --glass-edge: rgba(255, 255, 255, 0.06); --glass-edge-soft: rgba(255, 255, 255, 0.04); --glass-shadow: 0 4px 14px rgba(0, 0, 0, 0.32), 0 1px 4px rgba(0, 0, 0, 0.18); --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08); --glass-edge-strong: rgba(255, 255, 255, 0.05); } html.light { --glass-thin: #f5f7fb; --glass-regular: #fff; --glass-strong: #fff; --surface: #fff; --glass-edge: rgba(48, 60, 88, 0.1); --glass-edge-soft: rgba(48, 60, 88, 0.06); --glass-shadow: 0 6px 18px rgba(38, 56, 90, 0.08); --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9); --glass-edge-strong: rgba(48, 60, 88, 0.06); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (prefers-contrast: more) { :root { --glass-edge: rgba(255, 255, 255, 0.38); --separator: rgba(255, 255, 255, 0.2); --text-2: rgba(255, 255, 255, 0.82); --text-3: rgba(255, 255, 255, 0.62); } html.light { --glass-edge: rgba(0, 0, 0, 0.28); --separator: rgba(0, 0, 0, 0.18); --text-2: rgba(0, 0, 0, 0.78); --text-3: rgba(0, 0, 0, 0.58); } }