/* Mirror design system — mobile-first, dark by default, light on request. */ :root { --bg: #07080B; --bg-elev: #0E1016; --surface: #12151D; --surface-2: #171B25; --surface-3: #1E2331; --line: rgba(255, 255, 255, 0.07); --line-strong: rgba(255, 255, 255, 0.13); --text: #F3F5F9; --text-dim: #A2ABBF; --text-faint: #6C7689; --brand: #7C5CFF; --brand-2: #22D3EE; --brand-soft: rgba(79, 123, 255, 0.14); --pos: #2FD98A; --pos-soft: rgba(47, 217, 138, 0.13); --neg: #FF5F6D; --neg-soft: rgba(255, 95, 109, 0.13); --warn: #FFB020; --warn-soft: rgba(255, 176, 32, 0.14); --gold: #F0C24B; --violet: #7FD6D0; --radius: 18px; --radius-sm: 12px; --radius-lg: 26px; --shadow: 0 18px 44px rgba(0, 0, 0, 0.5); --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3); --nav-h: 66px; --maxw: 1240px; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif; /* Names a few rules use that were never defined, so tooltips had no background and some cards no border. Aliases of the real tokens, so they follow the theme. */ --border: var(--line); --card: var(--surface); --muted: var(--text-faint); --r-lg: var(--radius-lg); --green: var(--pos); --red: var(--neg); --amber: var(--warn); --amber-bg: rgba(255, 176, 32, 0.16); --amber-ink: #FFD37A; --amber-line: rgba(255, 176, 32, 0.45); --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; color-scheme: dark; } [data-theme='light'] { --amber-bg: #FFF7E6; --amber-ink: #7A4B00; --bg: #F6F7FB; --bg-elev: #FFFFFF; --surface: #FFFFFF; --surface-2: #F2F4F9; --surface-3: #E8ECF4; --line: rgba(15, 20, 35, 0.09); --line-strong: rgba(15, 20, 35, 0.16); --text: #0E1420; --text-dim: #5B6579; --text-faint: #8A94A8; --brand: #5B3DF5; --brand-soft: rgba(91, 61, 245, 0.1); --pos: #0FA968; --pos-soft: rgba(15, 169, 104, 0.12); --neg: #E23744; --neg-soft: rgba(226, 55, 68, 0.1); --shadow: 0 16px 40px rgba(16, 24, 48, 0.1); --shadow-sm: 0 2px 10px rgba(16, 24, 48, 0.07); color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 640; } p { margin: 0 0 10px; } svg { display: block; } ::selection { background: var(--brand-soft); } .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .pos { color: var(--pos); } .neg { color: var(--neg); } .dim { color: var(--text-dim); } .faint { color: var(--text-faint); } .mono { font-family: var(--mono); } .center { text-align: center; } .row { display: flex; align-items: center; gap: 10px; } .row.wrap { flex-wrap: wrap; } .spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .col { display: flex; flex-direction: column; } .grow { flex: 1; min-width: 0; } .hide { display: none !important; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mt { margin-top: 14px; } .mt-lg { margin-top: 26px; } .mb { margin-bottom: 14px; } /* ---------------------------------------------------------------- layout -- */ .shell { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* One motion vocabulary. Fourteen rules said `transition: .15s` with no curve, which means the browser's default `ease`: it starts slow, and that hesitation at the start of every hover is most of what makes an interface feel cheap. One decisive curve, out fast and settling gently, used everywhere. --fast is for something under the pointer, --base for something that moves across the screen. */ :root { --ease: cubic-bezier(.2, .7, .3, 1); --ease-soft: cubic-bezier(.33, 1, .68, 1); --fast: .14s; --base: .24s; } .page { padding-top: 14px; padding-bottom: 40px; animation: rise .3s var(--ease) both; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* An anchor jump lands under the sticky top bar unless the page is told how tall it is, and it lands with a jolt unless it is told to ease. */ html { scroll-behavior: smooth; scroll-padding-top: 76px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Text rendered the way the rest of the design was drawn. Without this the weights look heavier on a Mac than they were designed to be. */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* The page's own scrollbar, rather than the operating system's. A wide grey default bar down the side of a dark interface is one of the loudest cheap tells there is, and it is two rules to fix. */ * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* One focus ring, on keyboard focus only, in the brand colour. Without this every control gets whatever the browser draws, which differs between them. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } .topbar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); } .topbar-in { max-width: var(--maxw); margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; } .logo { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -0.03em; font-size: 17px; } .logo-mark { width: 27px; height: 27px; border-radius: 9px; flex: none; background: linear-gradient(140deg, var(--brand), var(--brand-2)); display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 4px 14px rgba(79, 123, 255, 0.35); } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .topsearch { display: flex; align-items: center; gap: 6px; margin-left: 14px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text-faint); min-width: 220px; max-width: 320px; flex: 1; } .topsearch input { border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; outline: none; width: 100%; min-width: 0; } .topsearch input::placeholder { color: var(--text-faint); } .topsearch:focus-within { border-color: var(--brand); } .topsearch-btn { display: none; } @media (max-width: 760px) { .topsearch { display: none; } .topsearch-btn { display: inline-flex; } } .iconbtn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); transition: .15s var(--ease); position: relative; } .iconbtn:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-1px); } .iconbtn .dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--neg); border: 2px solid var(--bg); } /* bottom nav (mobile) */ .bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: color-mix(in srgb, var(--bg-elev) 92%, transparent); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); } .bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11.5px; color: var(--text-faint); font-weight: 550; transition: .15s var(--ease); } .bottomnav a.active { color: var(--text); } .bottomnav a.active svg { color: var(--brand); transform: translateY(-1px); } .bottomnav svg { width: 21px; height: 21px; transition: .15s var(--ease); } .sidebar { display: none; } @media (min-width: 1024px) { body { padding-bottom: 0; } .bottomnav { display: none; } .layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 30px; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } .sidebar { display: block; position: sticky; top: 62px; align-self: start; height: calc(100vh - 62px); padding: 18px 0; overflow-y: auto; } .sidebar a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 11px; color: var(--text-dim); font-weight: 550; font-size: 14.5px; margin-bottom: 2px; transition: .14s var(--ease); } .sidebar a:hover { background: var(--surface); color: var(--text); } .sidebar a.active { background: var(--brand-soft); color: var(--text); } .sidebar a.active svg { color: var(--brand); } .sidebar svg { width: 19px; height: 19px; flex: none; } .sidebar .group { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); padding: 16px 12px 6px; font-weight: 650; } /* Beside the sidebar the content column fills its grid cell; `margin: 0 auto` would shrink it to its content. */ .shell { padding: 0; max-width: none; margin: 0; width: 100%; justify-self: stretch; } } /* ----------------------------------------------------------------- cards -- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: relative; } .card.pad-lg { padding: 20px; } .card.flat { background: var(--surface-2); } .card-title { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-weight: 650; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 26px 0 12px; } .section-head h2 { font-size: 19px; } .section-head .link { color: var(--brand); font-size: 13.5px; font-weight: 600; } .grid { display: grid; gap: 12px; } .grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.g3 { grid-template-columns: 1fr; } /* Leaderboard boards: never narrower than a readable row; wrap to as many columns as fit. */ .grid.boards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; } /* minmax(0, 1fr), not 1fr: a grid track's default minimum is the content's own minimum width, so one long word or a wide stat row pushed every card past the phone. At 320 the trader cards ran 33px off the edge and took the Paper copy button with them, and on /sources 83px of every card went, including all 128 values and every health badge. `overflow-x: clip` on the shell meant no scrollbar ever revealed it. */ .grid.auto { grid-template-columns: minmax(0, 1fr); } .grid > * { min-width: 0; } @media (min-width: 760px) { .grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.auto { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); } } /* --------------------------------------------------------------- buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-radius: 12px; font-weight: 620; font-size: 14.5px; border: 1px solid transparent; transition: .16s var(--ease); white-space: nowrap; } /* A press should feel like a press. A button was a rectangle that changed colour; with this there is a moment of give under the finger and the interface feels like it has weight. The transform gets its own 40ms, because the 160ms the rest of the button uses reads as lag on a press rather than as a response. */ .btn:active, .iconbtn:active, .chip:active, .mode-card:active { transform: scale(.972); } .tcard:active { transform: scale(.992); } .btn, .iconbtn, .chip, .mode-card, .tcard { transition-property: transform, background, border-color, color, box-shadow, opacity; transition-duration: .04s, var(--fast), var(--fast), var(--fast), var(--fast), var(--fast); transition-timing-function: var(--ease); } .btn-primary { background: linear-gradient(135deg, var(--brand), #6D4DF2); color: #fff; box-shadow: 0 6px 20px rgba(79, 123, 255,.32); } .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 8px 26px rgba(79, 123, 255,.42); } .btn-ghost { background: var(--surface-2); border-color: var(--line); color: var(--text); } .btn-ghost:hover { border-color: var(--line-strong); background: var(--surface-3); } .btn-outline { border-color: var(--line-strong); color: var(--text); } .btn-outline:hover { background: var(--surface-2); } .btn-danger { background: var(--neg-soft); color: var(--neg); border-color: transparent; } .btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; } .btn-lg { padding: 14px 22px; font-size: 16px; border-radius: 14px; } .btn-block { width: 100%; } .btn[disabled] { opacity: .5; pointer-events: none; } .btn svg { width: 16px; height: 16px; } /* --------------------------------------------------------------- badges --- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 640; letter-spacing: .01em; white-space: nowrap; background: var(--surface-3); color: var(--text-dim); border: 1px solid transparent; } .badge svg { width: 12px; height: 12px; } .badge.green { background: var(--pos-soft); color: var(--pos); } .badge.red { background: var(--neg-soft); color: var(--neg); } .badge.amber { background: var(--warn-soft); color: var(--warn); } .badge.orange { background: rgba(255,138,60,.14); color: #FF8A3C; } .badge.blue { background: rgba(34,211,238,.13); color: var(--brand-2); } .badge.violet { background: var(--brand-soft); color: var(--violet); } .badge.gold { background: rgba(240,194,75,.14); color: var(--gold); } .badge.muted { background: var(--surface-3); color: var(--text-faint); } .badge.lg { padding: 5px 11px; font-size: 12.5px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; font-weight: 570; color: var(--text-dim); transition: .15s var(--ease); white-space: nowrap; } .chip:hover { border-color: var(--line-strong); color: var(--text); } .chip.on { background: var(--brand-soft); border-color: transparent; color: var(--text); } .chiprow { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chiprow::-webkit-scrollbar { display: none; } /* --------------------------------------------------------------- avatars -- */ .avatar { border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; color: #fff; letter-spacing: -.02em; overflow: hidden; width: 44px; height: 44px; font-size: 15px; } .avatar.sm { width: 34px; height: 34px; font-size: 12.5px; } .avatar.lg { width: 68px; height: 68px; font-size: 23px; } .avatar.xl { width: 84px; height: 84px; font-size: 28px; } /* ---------------------------------------------------------- trader cards -- */ .tcard { display: block; transition: .18s var(--ease); } .tcard:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .tcard .head { display: flex; gap: 11px; align-items: center; } .tcard .name { font-weight: 650; font-size: 15.5px; letter-spacing: -.015em; } .tcard .sub { font-size: 12.5px; color: var(--text-faint); } .tcard .ret { font-size: 25px; font-weight: 700; letter-spacing: -.03em; line-height: 1; } .tcard .metrics { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); } .tcard .metrics b { color: var(--text); font-weight: 620; } .rank { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: 12.5px; font-weight: 700; background: var(--surface-3); color: var(--text-dim); } .rank.r1 { background: linear-gradient(140deg, #F0C24B, #E09B2D); color: #241a03; } .rank.r2 { background: linear-gradient(140deg, #D3D9E4, #A8B0BF); color: #1b1f28; } .rank.r3 { background: linear-gradient(140deg, #D08B58, #B4703C); color: #241203; } .lb-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; transition: .15s var(--ease); border: 1px solid transparent; min-width: 0; } .lb-row .lb-stats { flex: none; text-align: right; white-space: nowrap; } .lb-row:hover { background: var(--surface-2); border-color: var(--line); } /* --------------------------------------------------------------- metrics -- */ .metricgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: var(--radius-sm); overflow: hidden; } @media (min-width: 640px) { .metricgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .metricgrid .m { background: var(--surface); padding: 13px 14px; } .metricgrid .m .k { font-size: 11.5px; color: var(--text-faint); font-weight: 560; margin-bottom: 3px; } .metricgrid .m .v { font-size: 17px; font-weight: 660; letter-spacing: -.02em; } .metricgrid .m .v.na { color: var(--text-faint); font-size: 13.5px; font-weight: 500; } /* A prediction contract's two sides, as one bar. */ .prob-bar { position: relative; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--text-faint) 28%, transparent); overflow: hidden; } .prob-bar .prob-yes { position: absolute; inset: 0 auto 0 0; background: var(--good, #17913F); border-radius: 999px; transition: width .25s ease; } /* The "how to send SOL" guide: numbered steps and a coin crossing the wire. */ .sol-anim { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); } .sol-end { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text-dim); font-size: 11.5px; min-width: 64px; } .sol-end b { font-weight: 600; } .sol-wire { position: relative; flex: 1; height: 2px; background: linear-gradient(90deg, var(--line), var(--brand), var(--line)); border-radius: 2px; } .sol-coin { position: absolute; top: -10px; left: 0; font-size: 17px; line-height: 1; color: var(--brand); animation: sol-travel 2.6s ease-in-out infinite; } @keyframes sol-travel { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sol-coin { animation: none; left: 50%; } } .sol-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; } .sol-step { display: flex; gap: 11px; align-items: flex-start; } .sol-n { flex: none; width: 23px; height: 23px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; } .sol-t { font-weight: 640; font-size: 14px; } .sol-b { font-size: 13.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; } .sol-b a { color: var(--brand); } .sol-qr { display: flex; justify-content: center; margin: 9px 0; } .sol-qr svg { background: #fff; padding: 6px; border-radius: 8px; } /* The total on the portfolio page, split into the two places money sits. */ .split-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .split-tile { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: inherit; text-decoration: none; transition: border-color .15s ease, background .15s ease; } .split-tile:hover { border-color: var(--brand); background: var(--surface-2); } .split-tile .k { font-size: 11.5px; color: var(--text-faint); font-weight: 560; } .split-tile .v { font-size: 21px; font-weight: 700; letter-spacing: -.03em; margin-top: 3px; } .split-tile .u { font-size: 12.5px; margin-top: 2px; } /* A label on the left and a figure on the right, and on a narrow screen the figure used to be pushed off the edge rather than wrapping: "97.5% in top 5" ran past 320px with nothing to scroll it. Both halves may shrink, the figure keeps its own line, and a long label wraps instead of shoving. */ .statline { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; min-width: 0; } .statline:last-child { border-bottom: none; } .statline .k { color: var(--text-dim); min-width: 0; overflow-wrap: anywhere; } .statline .v { font-weight: 600; min-width: 0; text-align: right; overflow-wrap: anywhere; } .statline .v.na { color: var(--text-faint); font-weight: 450; font-size: 13px; } .bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .5s cubic-bezier(.2,.8,.3,1); } /* --------------------------------------------------------------- hero ----- */ .hero { padding: 34px 0 26px; } .hero h1 { font-size: clamp(34px, 8.4vw, 62px); line-height: 1.02; letter-spacing: -.04em; font-weight: 760; } .hero h1 .grad { background: linear-gradient(105deg, var(--brand) 10%, var(--brand-2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lede { font-size: 16.5px; color: var(--text-dim); max-width: 560px; margin-top: 16px; } .hero .cta { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; } .statstrip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; } @media (min-width: 700px) { .statstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .statstrip .s { background: var(--surface); padding: 16px; } .statstrip .s .v { font-size: 23px; font-weight: 700; letter-spacing: -.03em; } .statstrip .s .k { font-size: 12px; color: var(--text-faint); margin-top: 2px; } /* ---------------------------------------------------------------- feed ---- */ .feedwrap { max-width: 480px; margin: 0 auto; } .feedcard { border-radius: var(--radius-lg); padding: 22px; border: 1px solid var(--line); background: linear-gradient(165deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow); margin-bottom: 16px; position: relative; overflow: hidden; } .feedcard::before { content: ''; position: absolute; inset: -60% 40% 60% -20%; pointer-events: none; background: radial-gradient(circle, var(--brand-soft), transparent 65%); opacity: .8; } .feedcard > * { position: relative; } .feedcard .big { font-size: 44px; font-weight: 760; letter-spacing: -.045em; line-height: 1; } .feedcard .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 680; text-transform: uppercase; letter-spacing: .07em; color: var(--brand-2); } /* --------------------------------------------------------------- charts --- */ .chartbox { position: relative; width: 100%; } .chartbox svg { width: 100%; height: auto; overflow: visible; } .chart-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-dim); } .chart-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 6px; } .sparkline { width: 88px; height: 30px; flex: none; } /* --------------------------------------------------------------- tables --- */ .tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 640; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; } .tbl td { padding: 11px 10px; border-bottom: 1px solid var(--line); } .tbl tr:last-child td { border-bottom: none; } .tbl tbody tr:hover { background: var(--surface-2); } .tbl .r { text-align: right; } .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* --------------------------------------------------------------- trades --- */ .trade { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .trade:last-child { border-bottom: none; } .trade .act { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 10.5px; font-weight: 720; letter-spacing: .02em; } .act.buy { background: var(--pos-soft); color: var(--pos); } .act.sell { background: var(--neg-soft); color: var(--neg); } .act.up { background: rgba(34,211,238,.12); color: var(--brand-2); } .act.down { background: var(--warn-soft); color: var(--warn); } .timing { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12.5px; padding: 11px 13px; background: var(--surface-2); border-radius: var(--radius-sm); margin-top: 9px; } .timing .k { color: var(--text-faint); } .timing .v { color: var(--text-dim); } /* --------------------------------------------------------------- inputs --- */ .field { margin-bottom: 13px; } .field label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; font-weight: 560; } .input, select.input, textarea.input { width: 100%; padding: 11px 13px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); outline: none; transition: .15s var(--ease); font-size: 16px; } /* Anything under 16px in a field makes iOS Safari zoom the whole page on focus. */ .input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .input::placeholder { color: var(--text-faint); } select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8l3-3.5' stroke='%238A94A8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .searchbar { position: relative; } .searchbar .input { padding-left: 40px; height: 46px; border-radius: 14px; } .searchbar svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-faint); } .switch { width: 42px; height: 25px; border-radius: 999px; background: var(--surface-3); position: relative; transition: .2s var(--ease); flex: none; border: 1px solid var(--line); } .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--text-faint); transition: .2s var(--ease); } .switch.on { background: var(--brand); border-color: transparent; } .switch.on::after { transform: translateX(17px); background: #fff; } input[type='range'] { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 999px; background: var(--surface-3); outline: none; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); cursor: pointer; box-shadow: 0 2px 8px rgba(79, 123, 255,.5); } /* ---------------------------------------------------------------- modal --- */ .modal-bg { position: fixed; inset: 0; z-index: 200; background: rgba(4, 5, 8, .68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; animation: fade .18s ease; /* A blurred backdrop behind a scrolling panel is re-composited on every frame of that scroll, and on some machines that shows as the card flickering. Its own layer, declared up front, keeps it stable. */ will-change: backdrop-filter; transform: translateZ(0); } @keyframes fade { from { opacity: 0; } } @media (min-width: 640px) { .modal-bg { align-items: center; } } .modal { background: var(--bg-elev); border: 1px solid var(--line); width: 100%; max-width: 480px; border-radius: 24px 24px 0 0; padding: 20px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; animation: slideup .26s cubic-bezier(.2,.8,.3,1); box-shadow: var(--shadow); } @media (min-width: 640px) { .modal { border-radius: 22px; } .modal:has(.story-panel) { max-width: 760px; } } .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @keyframes slideup { from { transform: translateY(24px); opacity: 0; } } .modal h3 { font-size: 19px; margin-bottom: 4px; } .toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 16px); z-index: 300; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 420px; } @media (min-width: 1024px) { .toasts { bottom: 20px; left: auto; right: 20px; transform: none; } } .toast { background: var(--surface-3); border: 1px solid var(--line-strong); border-radius: 14px; padding: 12px 14px; font-size: 14px; box-shadow: var(--shadow); animation: slideup .22s ease; display: flex; gap: 10px; align-items: flex-start; } .toast.good { border-left: 3px solid var(--pos); } .toast.bad { border-left: 3px solid var(--neg); } .toast.warn { border-left: 3px solid var(--warn, #d9932b); } /* ---------------------------------------------------------------- misc ---- */ .disclaimer { font-size: 12px; color: var(--text-faint); line-height: 1.5; } .notice { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim); } .notice.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); } .notice.info { background: var(--brand-soft); border-color: transparent; color: var(--text-dim); } .notice svg { width: 17px; height: 17px; flex: none; margin-top: 1px; } .skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.6s var(--ease-soft) infinite; border-radius: 10px; } /* Shaped like the row it stands in for, so nothing moves when the real one arrives and the wait reads as assembly rather than as breakage. */ .skelcard { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .skel-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; } .skel-lines { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; } .skel-line { height: 12px; display: block; } .skel-sub { height: 10px; opacity: .65; } .skel-figure { width: 72px; height: 26px; flex: none; } @media (max-width: 520px) { .skel-figure { width: 52px; } } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } .empty { text-align: center; padding: 44px 20px; color: var(--text-faint); } .empty svg { width: 42px; height: 42px; margin: 0 auto 12px; opacity: .45; } .ticker { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-dim); padding: 8px 12px; background: var(--surface-2); border-radius: 10px; border: 1px solid var(--line); } .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); flex: none; animation: blink 2s infinite; } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } } .tabbar { display: flex; gap: 2px; background: var(--surface-2); padding: 4px; border-radius: 13px; border: 1px solid var(--line); } .tabbar button { flex: 1; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--text-dim); transition: .15s var(--ease); } .tabbar button.on { background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-sm); } .progress-ring { transform: rotate(-90deg); } .score-big { font-size: 40px; font-weight: 760; letter-spacing: -.04em; line-height: 1; } /* One column on a phone, and a column that cannot grow past the screen: a grid track defaults to the width of its widest child, and a grid item to min-width:auto, which together pushed the trader page off the side of an iPhone. */ .split { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } .split > * { min-width: 0; } @media (min-width: 980px) { .split { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; } } /* Sticky, with its own scroll, only where there are two columns. On a phone it is a block in the page's own flow: a nested scroller there traps the thumb. */ @media (min-width: 980px) { .sticky-side { position: sticky; top: 74px; align-self: start; max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } } .footer { border-top: 1px solid var(--line); margin-top: 44px; padding: 24px 0 30px; color: var(--text-faint); font-size: 12.5px; } .footer a { color: var(--text-dim); } .footer .links { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; } /* ---------------------------------------------------------- onboarding --- */ .onboard { max-width: 940px; margin: 0 auto; padding: 40px 20px 60px; } .onboard-head { text-align: center; margin-bottom: 34px; } .onboard-head h1 { font-size: 30px; margin: 16px 0 6px; } .brandmark.lg { width: 52px; height: 52px; border-radius: 15px; margin: 0 auto; display: grid; place-items: center; font-weight: 800; font-size: 24px; color: #fff; background: linear-gradient(140deg, var(--brand), var(--brand-2)); } .choice-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .choice { text-align: left; padding: 26px; border-radius: var(--r-lg); cursor: pointer; background: var(--surface); border: 1.5px solid var(--border); color: inherit; font: inherit; transition: border-color .15s, transform .15s, background .15s; display: flex; flex-direction: column; } .choice:hover:not(:disabled) { border-color: var(--brand); transform: translateY(-2px); } .choice:disabled { opacity: .6; cursor: default; } .choice.accent { background: linear-gradient(155deg, var(--brand-soft), var(--surface)); } .choice h2 { font-size: 20px; margin: 14px 0 8px; } .choice-icon { color: var(--brand); } .choice p { font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; } .choice-cta { margin-top: auto; padding-top: 16px; color: var(--brand); font-weight: 620; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; } .ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .ticks li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--text-dim); line-height: 1.5; } .ticks li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 5px; height: 9px; border: solid var(--pos); border-width: 0 2px 2px 0; transform: rotate(42deg); } .ticks.tight li { font-size: 13px; gap: 6px; } .ticks.muted li::before { border-color: var(--text-faint); } /* The inverse of .ticks — what a plan explicitly does NOT grant. */ .crosses { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .crosses li { position: relative; padding-left: 22px; font-size: 13px; color: var(--text-faint); line-height: 1.5; } .crosses li::before, .crosses li::after { content: ''; position: absolute; left: 3px; top: 9px; width: 10px; height: 1.5px; background: var(--text-faint); border-radius: 1px; } .crosses li::before { transform: rotate(45deg); } .crosses li::after { transform: rotate(-45deg); } /* -------------------------------------------------------------- plans ---- */ .plan-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); } .plan { position: relative; padding: 26px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1.5px solid var(--border); display: flex; flex-direction: column; } .plan.featured { border-color: var(--brand); background: linear-gradient(160deg, var(--brand-soft), var(--surface)); } .plan-badge { position: absolute; top: -10px; right: 18px; padding: 3px 10px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; } .plan-name { font-size: 15px; font-weight: 660; margin-bottom: 6px; } .plan-price { font-size: 34px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .plan-price .faint { font-size: 15px; font-weight: 500; } .plan .ticks { flex: 1; } .split-lite { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .page.narrow { max-width: 780px; margin: 0 auto; } @media (max-width: 560px) { .onboard { padding: 24px 14px 48px; } .onboard-head h1 { font-size: 25px; } .plan-price { font-size: 30px; } } /* ====================================================================== Redesign pass — calmer, higher-contrast, more whitespace, mobile-first. Trust comes from restraint: fewer gradients, clearer hierarchy, one accent. ====================================================================== */ :root { --brand: #6C63FF; --brand-2: #22D3EE; --brand-soft: rgba(79, 123, 255, 0.13); --radius: 16px; --radius-sm: 11px; --radius-lg: 22px; --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.22); } [data-theme='light'] { --brand: #5449E6; --brand-soft: rgba(84, 73, 230, 0.1); } .btn-primary { background: var(--brand); box-shadow: none; } .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(79, 123, 255,.28); } h1 { letter-spacing: -.025em; font-weight: 720; } h2 { letter-spacing: -.015em; font-weight: 680; } .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); font-weight: 650; margin-bottom: 6px; } /* ------------------------------------------------------------ the hub --- */ .hub-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .hub-head h1 { font-size: 28px; margin: 0; } .pill-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; min-width: 150px; } .pill-stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-weight: 650; } .pill-stat .v { font-size: 20px; font-weight: 720; letter-spacing: -.02em; } .mode-grid { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 720px) { .mode-grid { grid-template-columns: 1fr 1fr; } } .mode-card { text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; padding: 22px; border-radius: var(--radius-lg); background: var(--surface); border: 2px solid var(--line); transition: border-color .15s, transform .15s, box-shadow .15s; } .mode-card:hover { border-color: var(--line-strong); transform: translateY(-1px); } .mode-card.on { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } .mode-card.busy { opacity: .6; pointer-events: none; } .mode-top { display: flex; justify-content: space-between; align-items: center; } .mode-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); } .mode-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-top: 14px; } .mode-sub { color: var(--text-dim); font-size: 14px; margin-top: 3px; } .mode-cta { margin-top: auto; padding-top: 16px; font-weight: 640; font-size: 14px; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; } .mode-card.on .mode-cta { color: var(--pos); } .style-grid { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 560px) { .style-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .style-grid { grid-template-columns: repeat(4, 1fr); } } .style-card { text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1.5px solid var(--line); transition: .15s var(--ease); display: flex; flex-direction: column; } .style-card:hover:not(:disabled) { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .style-card:disabled { opacity: .5; cursor: default; } .style-emoji { font-size: 26px; line-height: 1; } .style-title { font-size: 17px; font-weight: 680; margin-top: 12px; letter-spacing: -.01em; } .style-sub { font-size: 13px; color: var(--text-dim); margin-top: 3px; line-height: 1.45; } .style-stats { display: flex; gap: 14px; margin-top: 14px; font-size: 12.5px; color: var(--text-faint); } .style-stats b { color: var(--text); font-size: 15px; margin-right: 3px; } /* ------------------------------------------------- real-money checklist --- */ .progress { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .progress > div { height: 100%; background: var(--brand); border-radius: 999px; transition: width .4s cubic-bezier(.2,.7,.3,1); } .steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .step { display: flex; gap: 14px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); } .step.done { border-color: rgba(47, 217, 138, .35); } .step-mark { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-dim); font-weight: 700; font-size: 13px; } .step.done .step-mark { background: var(--pos-soft); color: var(--pos); } .step-title { font-weight: 650; font-size: 15px; } /* ------------------------------------------------------------ mobile --- */ @media (max-width: 560px) { .hub-head h1 { font-size: 24px; } .mode-card { padding: 18px; } .mode-title { font-size: 18px; } .step { padding: 13px; gap: 11px; } .pill-stat { width: 100%; } } /* ---------------------------------------------------------------- brand --- */ .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } .logo-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--brand), var(--brand-2)); box-shadow: 0 4px 14px rgba(79,123,255,.3); } .logo-word { display: flex; flex-direction: column; line-height: 1.05; font-weight: 720; letter-spacing: -.02em; font-size: 17px; } .logo-word small { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); margin-top: 2px; } @media (max-width: 420px) { .logo-word small { display: none; } } .brandmark.lg { color: #fff; } .site-foot { margin-top: auto; padding: 14px 12px 6px; font-size: 11.5px; color: var(--text-faint); letter-spacing: .01em; } /* ===================================================================== Meror identity. An editor's dark theme and its paper-white twin: ink and panel greys, amber like a string, teal like a keyword, git-green and git-red for gains and losses, monospace for labels and figures. The hero carries a soft glow that follows a fine pointer and a dotted grid that only shows near it — quiet, not tacky. ===================================================================== */ :root { --bg: #0B0E14; --bg-elev: #0F131B; --surface: #121722; --surface-2: #171D2A; --surface-3: #1E2634; --line: rgba(230, 237, 243, 0.08); --line-strong: rgba(230, 237, 243, 0.16); --text: #E6EDF3; --text-dim: #A8B3BF; --text-faint: #7D8590; --brand: #4F7BFF; --brand-2: #39E0CF; --brand-soft: rgba(79, 123, 255, 0.14); --pos: #3FB950; --pos-soft: rgba(63, 185, 80, 0.13); --neg: #F85149; --neg-soft: rgba(248, 81, 73, 0.13); --warn: #D29922; --warn-soft: rgba(210, 153, 34, 0.14); --gold: #E3B341; --violet: #7FD6D0; --ink-on-brand: #FFFFFF; --radius: 14px; --radius-sm: 10px; --radius-lg: 20px; --shadow: 0 24px 60px rgba(0, 0, 0, 0.5); --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.3); --display: var(--sans); --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; } [data-theme='light'] { --bg: #F6F8FA; --bg-elev: #FFFFFF; --surface: #FFFFFF; --surface-2: #F0F3F6; --surface-3: #E6EAEF; --line: rgba(31, 35, 40, 0.10); --line-strong: rgba(31, 35, 40, 0.18); --text: #1F2328; --text-dim: #4B535D; --text-faint: #6E7781; --brand: #2F5BEA; --brand-2: #12A5A0; --brand-soft: rgba(47, 91, 234, 0.11); --pos: #1A7F37; --pos-soft: rgba(26, 127, 55, 0.11); --neg: #CF222E; --neg-soft: rgba(207, 34, 46, 0.11); --warn: #9A6700; --warn-soft: rgba(154, 103, 0, 0.12); --gold: #9A6700; --violet: #0E8F8B; --ink-on-brand: #FFFFFF; --shadow: 0 24px 60px rgba(31, 35, 40, 0.12); --shadow-sm: 0 6px 20px rgba(31, 35, 40, 0.08); } body { font-size: 15px; line-height: 1.55; } h1, h2, h3, h4 { font-weight: 640; letter-spacing: -0.028em; } .section-head h2 { font-size: 21px; } .section-head { margin: 34px 0 14px; } .num, .statstrip .s .v, .lb-stats, .rank { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .statstrip .s .k, .statline .k { font-family: var(--mono); } .badge { font-weight: 600; } .card { background: linear-gradient(180deg, var(--surface), var(--bg-elev)); border: 1px solid var(--line); box-shadow: none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } a.card:hover, .card.hoverable:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn { font-family: var(--sans); } .btn-primary { background: linear-gradient(135deg, #5C86FF, #4F6BFF); color: var(--ink-on-brand); box-shadow: 0 8px 24px rgba(79, 123, 255, 0.25); font-weight: 650; } .btn-primary:hover { filter: brightness(1.05); box-shadow: 0 10px 28px rgba(79, 123, 255, 0.34); } .btn-outline { border-color: var(--line-strong); } .btn-outline:hover { border-color: var(--brand); color: var(--brand); } .badge.red { background: transparent; border: 1px solid rgba(248, 81, 73, .45); color: var(--neg); } .badge.amber { background: transparent; border: 1px solid rgba(210, 153, 34, .5); color: var(--warn); } .badge.violet { background: rgba(57, 224, 207, .12); color: var(--violet); } .badge.blue { background: rgba(79, 123, 255, .13); color: var(--brand); } .rank.r1 { background: linear-gradient(140deg, #EEC257, #D8A128); color: #1A1204; } .rank.r2 { background: linear-gradient(140deg, #D9DEE6, #AEB6C4); color: #1b1f28; } .rank.r3 { background: linear-gradient(140deg, #D2925F, #B57742); color: #241203; } .logo-mark, .brandmark.lg { background: linear-gradient(140deg, #39E0CF, #4F7BFF); color: #06201D; } .section-head .link, a.link { color: var(--brand); } /* ---- hero -------------------------------------------------------------- */ .hero { position: relative; padding: 44px 0 26px; --mx: 50%; --my: 30%; } .hero .dots { position: absolute; inset: -12% -8%; pointer-events: none; } .hero .dots { background-image: radial-gradient(rgba(230, 237, 243, 0.3) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(360px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.4) 40%, transparent 72%); mask-image: radial-gradient(360px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.4) 40%, transparent 72%); opacity: .4; } [data-theme='light'] .hero .dots { background-image: radial-gradient(rgba(31, 35, 40, 0.3) 1px, transparent 1.2px); } .hero > *:not(.dots) { position: relative; } .hero .eyebrow { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; } .hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.06; max-width: 820px; } .hero h1 em { font-style: normal; color: var(--brand); } .hero p.lede { font-size: 17px; line-height: 1.6; max-width: 600px; margin-top: 18px; color: var(--text-dim); } .hero .cta { margin-top: 26px; } .hero .disclaimer { margin-top: 18px; max-width: 560px; } @media (pointer: coarse) { .hero .dots { -webkit-mask-image: none; mask-image: none; opacity: .18; } } /* ---- what copying looks like ------------------------------------------ */ .proof { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 22px; } /* Two up on a tablet, then every card in one row: the panel tells the grid how many it holds. */ @media (min-width: 560px) { .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .proof { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } } .hero .proof-note { margin: 18px 0 0; max-width: 640px; font-size: 12.5px; line-height: 1.55; color: var(--text-faint); } .proof .p { padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--bg-elev)); transition: border-color .18s, transform .18s; } .proof .p:hover { border-color: var(--line-strong); transform: translateY(-2px); } .proof .p .who { font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; min-width: 0; } .proof .p .who .n { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .proof .p .then { font-family: var(--mono); font-size: 12px; color: var(--text-faint); margin-top: 10px; } .proof .p .now { font-family: var(--mono); font-size: 28px; line-height: 1.1; margin-top: 2px; letter-spacing: -.02em; font-weight: 600; } .proof .p .d { font-family: var(--mono); font-size: 12.5px; margin-top: 4px; } .trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 13px; color: var(--text-dim); } .trust span::before { content: '·'; color: var(--brand); margin-right: 8px; font-weight: 700; } /* ---- futurist touches, kept quiet --------------------------------------- */ /* Same reason as the modal backdrop: a blurred bar the page scrolls under is the commonest cause of a page that shimmers while it moves. */ .topbar { backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line); will-change: backdrop-filter; transform: translateZ(0); } .topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(79, 123, 255, .6), rgba(139, 123, 255, .6), transparent); opacity: .7; pointer-events: none; } .card:hover { border-color: rgba(79, 123, 255, .4); } .btn-primary { position: relative; } .btn-primary::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(79, 123, 255, .45); transition: box-shadow .35s ease; pointer-events: none; } .btn-primary:hover::after { box-shadow: 0 0 0 4px rgba(79, 123, 255, .16); } .badge.green.live::before, .livedot::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pos); margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 0 rgba(63,185,80,.6); animation: livepulse 2s ease-out infinite; } @keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(63,185,80,.6); } 70% { box-shadow: 0 0 0 7px rgba(63,185,80,0); } 100% { box-shadow: 0 0 0 0 rgba(63,185,80,0); } } .statstrip { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .statstrip .s .v { color: var(--text); } .statstrip .s:first-child .v { color: var(--brand); } ::selection { background: rgba(79, 123, 255, .3); } /* ---- page glow: one faint light that follows the pointer across the whole home page, under the header and the sidebar, never over content ------- */ /* A full-viewport gradient layer existed on every page and was composited on every scroll even at zero opacity. It belongs to the landing page, so it is only there. */ #pageglow { display: none; } body.glow-on #pageglow { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; background: radial-gradient(760px circle at var(--gx, 50vw) var(--gy, 30vh), rgba(79, 123, 255, 0.05), rgba(57, 224, 207, 0.022) 42%, transparent 66%); } body.glow-on #pageglow { opacity: 1; } [data-theme='light'] #pageglow { background: radial-gradient(760px circle at var(--gx, 50vw) var(--gy, 30vh), rgba(47, 91, 234, 0.05), rgba(18, 165, 160, 0.022) 42%, transparent 66%); } @media (pointer: coarse), (prefers-reduced-motion: reduce) { #pageglow { display: none; } } /* The glow above sits behind everything, so the page's own layers need a stacking context. The top bar and the sidebar already have one from their own `position: sticky`, and naming them here overwrote it: both scrolled away off the top of a seventeen-thousand-pixel page, on every screen size, because this rule comes later at equal specificity. */ #app, main, .page { position: relative; z-index: 1; } .topbar { background: color-mix(in srgb, var(--bg) 62%, transparent); } .sidebar { background: color-mix(in srgb, var(--bg-elev) 92%, transparent); } /* ---- footer links: one quiet line ---------------------------------------- */ .site-foot { font-size: 11px; line-height: 1.5; } .site-foot .foot-links { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-top: 6px; } .site-foot .foot-links a { display: inline; padding: 0; margin: 0; font-size: 11px; color: var(--text-faint); text-decoration: none; border: 0; background: none; line-height: 1.5; } .site-foot .foot-links a:hover { color: var(--text); } .site-foot .foot-links .sep { color: var(--text-faint); opacity: .6; } /* ---- live balance: an odometer in the corner ------------------------------ */ #livebalance { /* Centre, not baseline: the odometer is an inline-flex box with overflow hidden, whose baseline is its bottom edge, which dropped the "paper" label below the figure. Nowrap keeps the pill on one line at every width. */ display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 7px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; transition: border-color .3s, color .3s, background .3s; margin-right: 4px; } #livebalance .lbl { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); } #livebalance .cur { font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); background: var(--surface-3); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; margin-left: 6px; cursor: pointer; } #livebalance .cur:hover { color: var(--text); border-color: var(--line-strong); } #livebalance .lbl::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--pos); margin-right: 5px; vertical-align: middle; animation: livepulse 2s ease-out infinite; } #livebalance.up { color: var(--pos); border-color: rgba(63,185,80,.45); } #livebalance.down { color: var(--neg); border-color: rgba(248,81,73,.45); } #livebalance.up, #livebalance.down { animation: settle 1.8s ease forwards; } @keyframes settle { to { color: var(--text); border-color: var(--line); } } .odo { display: inline-flex; height: 1.15em; line-height: 1.15em; overflow: hidden; } .odo .odo-sep { display: inline-block; } .odo .odo-col { display: inline-block; height: 1.15em; overflow: hidden; width: .62em; text-align: center; } .odo .odo-strip { display: flex; flex-direction: column; transition: transform .55s cubic-bezier(.22,.8,.3,1); will-change: transform; } .odo .odo-strip span { display: block; height: 1.15em; line-height: 1.15em; } @media (max-width: 640px) { #livebalance .lbl { display: none; } #livebalance .cur { margin-left: 4px; } #livebalance { padding: 5px 8px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .odo .odo-strip { transition: none; } } /* A grid item defaults to min-width:auto and will grow past its track to fit content; the main column must yield to the track and let the grid inside it wrap. Without this the rightmost cards were clipped on desktop. */ main, .shell, .page, #results { min-width: 0; max-width: 100%; } /* The board chips sit in a flex row; as a flex item the strip must be allowed to shrink to its track (min-width:0) so it scrolls inside itself instead of pushing the page sideways. On wide screens it simply wraps. */ .chiprow { min-width: 0; flex: 1 1 auto; max-width: 100%; } .spread > .chiprow { min-width: 0; } @media (min-width: 760px) { .chiprow { flex-wrap: wrap; overflow: visible; } } /* A trader card's footer holds badges and the copy button; on a narrow card the button drops to its own line rather than running past the edge. */ .tcard-foot { flex-wrap: wrap; row-gap: 8px; } .tcard-foot .btn { white-space: nowrap; } /* ---- the reader: documents are accepted only after being scrolled to the end */ .reader-steps { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 8px; font-size: 12px; color: var(--text-faint); } .reader-steps .on { color: var(--text); font-weight: 600; } .reader-steps .done { color: var(--pos); } .reader-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 8px 0 6px; } .reader-title { font-weight: 600; font-size: 14px; } .reader { max-height: min(46vh, 420px); overflow-y: auto; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13.5px; line-height: 1.65; outline: none; overscroll-behavior: contain; } .reader:focus-visible { border-color: var(--brand); } .reader h4 { margin: 12px 0 4px; font-size: 13.5px; } .reader h4:first-child { margin-top: 0; } .reader p { margin: 0 0 8px; color: var(--text-dim); } .reader .reader-end { text-align: center; color: var(--text-faint); font-size: 12px; margin: 16px 0 0; } .reader.read { border-color: rgba(63, 185, 80, .5); } .reader-track { height: 3px; background: var(--surface-3); border-radius: 2px; margin-top: 8px; overflow: hidden; } .reader-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .12s linear; } .reader-hint { font-size: 12px; color: var(--text-faint); margin-top: 6px; } .reader.read + .reader-track + .reader-hint { color: var(--pos); } .reader-agree input:disabled + span { opacity: .55; } /* ---- trust pass: quieter surfaces, solid actions, restrained badges ------ */ :root { --radius: 12px; --radius-sm: 9px; --radius-lg: 18px; } h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; } .card { background: var(--surface); border: 1px solid var(--line); } .card:hover { border-color: var(--line); } a.card:hover, .card.hoverable:hover, .style-card:hover, .mode-card:hover, .tcard:hover { border-color: rgba(79, 123, 255, .45); box-shadow: var(--shadow-sm); } .btn-primary { background: var(--brand); box-shadow: none; } .btn-primary:hover { background: color-mix(in srgb, var(--brand) 88%, #000); filter: none; box-shadow: none; } .btn-primary::after { display: none; } .badge { font-weight: 560; letter-spacing: .01em; } .badge.green { background: transparent; border: 1px solid rgba(63, 185, 80, .45); } .badge.violet, .badge.gold { background: transparent; border: 1px solid var(--line-strong); color: var(--text-dim); } .statstrip .s:first-child .v { color: var(--text); } .home-foot { margin-top: 44px; padding: 22px 0 8px; border-top: 1px solid var(--line); } [data-theme='light'] .card { box-shadow: 0 1px 2px rgba(20, 24, 33, .04); } /* --- launch surface: tooltips, field errors, consent, FAQ, thank-you, 404, related links ------------- */ .tip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; color: var(--muted); cursor: help; vertical-align: -3px; outline: none; } .tip:hover, .tip:focus-visible, .tip.open { color: var(--brand); } .tip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: min(280px, 80vw); padding: 8px 10px; border-radius: 9px; background: var(--card); color: var(--text); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.28); font-size: 12.5px; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; z-index: 40; display: none; } .tip:hover::after, .tip:focus-visible::after, .tip.open::after { display: block; } @media (hover: none) { .tip:hover::after { display: none; } .tip.open::after { display: block; } } .field { display: grid; gap: 5px; margin-bottom: 12px; } .field label { font-size: 13px; font-weight: 600; } .input.invalid, .input[aria-invalid="true"] { border-color: #E5484D; box-shadow: 0 0 0 3px rgba(229,72,77,.15); } .field-error { font-size: 12.5px; color: #E5484D; line-height: 1.4; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } @media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } } .contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-form select.input { appearance: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; max-width: 760px; margin: 0 auto; padding: 14px 16px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line-strong, var(--line)); box-shadow: 0 14px 40px rgba(0,0,0,.35); isolation: isolate; } .consent-text { flex: 1 1 360px; font-size: 13px; line-height: 1.5; color: var(--text); } .consent-actions { display: flex; gap: 8px; } @media (max-width: 640px) { .consent { left: 10px; right: 10px; bottom: calc(64px + env(safe-area-inset-bottom)); } } .faq-list { display: grid; gap: 8px; } .faq-item { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 0 16px; } .faq-item summary { cursor: pointer; padding: 13px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; color: var(--muted); font-weight: 500; font-size: 18px; line-height: 1; } .faq-item[open] summary::after { content: '–'; } .faq-item p { margin: 0 0 14px; color: var(--muted); line-height: 1.6; font-size: 14px; } .faq-teaser { margin: 36px 0 12px; } .thanks-mark { width: 56px; height: 56px; margin: 0 auto; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--brand), var(--brand-2)); } .notfound-code { font-size: 64px; font-weight: 800; letter-spacing: -.04em; line-height: 1; background: linear-gradient(140deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .notfound code { font-size: 13px; padding: 2px 6px; border-radius: 6px; background: var(--card); border: 1px solid var(--border); } .related { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; } .related a { color: var(--text); text-decoration: none; } .related a:hover { color: var(--brand); } .public-foot { margin-top: 36px; } .public-foot a { color: inherit; } /* The tab bar is fixed over the bottom of the page below 1024px, and the body's padding reserves exactly its height, so the footer's last lines ended up sitting against the bar with nothing between them. The footer keeps its own gap above the bar, grown by the home-indicator inset on the phones that have one, so the disclaimer and the link row stay readable. Above 1024px the bar is gone and the footer keeps its original spacing. */ @media (max-width: 1023px) { .home-foot, .public-foot { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); } } .home-foot .foot-links, .public-foot .foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; } .home-foot .foot-links .sep, .public-foot .foot-links .sep { margin: 0 7px; opacity: .5; } .home-foot .foot-links a, .public-foot .foot-links a { text-decoration: none; } .home-foot .foot-links a:hover, .public-foot .foot-links a:hover { color: var(--brand); } /* Nothing may widen the page: a stray wide element scrolls inside its own box, never the viewport. */ .layout, main.shell { overflow-x: clip; } @supports not (overflow-x: clip) { .layout, main.shell { overflow-x: hidden; } } .style-emoji { display: inline-grid; place-items: center; color: var(--brand); } .style-emoji svg { display: block; } /* Phone widths: the top bar must never be wider than the screen. The data badge moves out of the bar (the pages still say it), the balance counter tightens and the icon buttons shrink. */ @media (max-width: 560px) { .topbar-in { min-width: 0; gap: 8px; } .topbar-in > .badge { display: none; } .topbar-actions { gap: 6px; min-width: 0; } /* 38, not 32: a 32px control is under every platform's minimum tap target, and the bar has the room once the logo word goes at 380px. */ .iconbtn { width: 38px; height: 38px; } #livebalance { font-size: 12px; padding: 4px 8px; gap: 4px; } #livebalance .lbl { display: none; } } @media (max-width: 380px) { .logo-word { display: none; } #livebalance { font-size: 11.5px; padding: 4px 6px; } } /* The server's crawler-readable copy of a page is for machines and for browsers without JavaScript; people with JavaScript see the app's own version, so the copy stays hidden until the app replaces it (index.html turns it back on inside