@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { /* ---- LIGHT (default) ------------------------------------------------- The homepage's light-section values. Two tokens deliberately differ from the homepage because the app tints surfaces the homepage never does: --muted is #5f6175 not #6f7186 (the selected proxy card is a 9% purple wash, where #6f7186 falls to 3.9:1), and --danger is #c62a1e not #d92d20 (4.48:1 over the body wash). --brand-2 is the text-safe purple; --brand is a fill colour that carries white on top. */ --bg: #f6f6fb; --bg-2: #ffffff; --card: #ffffff; --card-2: #f1f0f8; --border: #e3e2ef; --border-2: #d5d2e6; --text: #16172e; /* Body and secondary text. Darker than the homepage's #6f7186 because the app tints surfaces the homepage never does — the selected proxy card is a 9% purple wash. #4a4c5e reads 7.8:1 on the page, 8.5:1 on a white card and 6.9:1 on that tint, while staying clearly secondary to --text at 16.3:1. Light theme only; the dark block below is unchanged. */ --muted: #4a4c5e; --brand: #5a48dc; --brand-2: #4a3ab8; --violet: #6d5ae0; /* Darker than the homepage's #22a35c. That value is a fill/icon green and only reaches 3.2:1 on white — fine for a status dot (a graphical object needs 3:1) but below AA wherever it is used as TEXT, like the spec ticks on the buy page. #16713f holds 6.1:1 on white and 5.3:1 on the tinted card. */ --teal: #16713f; --danger: #c62a1e; --shadow: 0 18px 48px rgba(90,72,220,.12); --body-wash: radial-gradient(760px 520px at 88% -8%, rgba(90,72,220,.10), transparent 60%), radial-gradient(900px 700px at 50% 112%, rgba(90,72,220,.06), transparent 60%); /* Surfaces that cannot be derived from the palette because they invert between themes rather than shifting with it. */ --surface-code: #f1f0f8; /* generated-proxy output box */ --surface-code-fg: #16172e; --surface-alert: rgba(90,72,220,.07); /* one-time API key reveal */ --ring: #ffffff; /* slider thumb ring */ --menu-shadow: 0 18px 44px rgba(22,23,46,.16); --burger-shadow: 0 4px 14px rgba(22,23,46,.10); --radius: 16px; -webkit-font-smoothing: antialiased; } /* ---- DARK --------------------------------------------------------------- The palette the app shipped with before the homepage redesign, kept intact so "dark" is the previous product rather than a mechanical inversion. Set on by /js/theme.js before first paint. */ :root[data-theme="dark"] { --bg: #0d0e1e; --bg-2: #101126; --card: rgba(255,255,255,.045); --card-2: rgba(255,255,255,.07); --border: rgba(255,255,255,.10); --border-2: rgba(255,255,255,.16); --text: #f0effc; --muted: #b6b4d6; --brand: #5a48dc; --brand-2: #a78bfa; --violet: #8f7bff; --teal: #5ee68c; --danger: #ff6b6b; --shadow: 0 20px 60px rgba(0,0,0,.5); /* Indigo top-right and purple bottom. The green top-left glow that used to sit between them is gone — it was the only non-purple note in the app and read as a tint rather than as depth. */ --body-wash: radial-gradient(760px 520px at 88% -8%, rgba(62,54,130,.34), transparent 60%), radial-gradient(900px 700px at 50% 112%, rgba(90,72,220,.16), transparent 60%); --surface-code: #07090d; --surface-code-fg: #ffffff; --surface-alert: #07130d; --ring: #04121a; --menu-shadow: 0 18px 44px rgba(0,0,0,.55); --burger-shadow: none; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Archivo", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background: var(--body-wash), var(--bg); background-attachment: fixed; color: var(--text); line-height: 1.55; min-height: 100vh; } h1, h2, h3, .section-title, .brand { font-family: "Archivo", sans-serif; letter-spacing: -.025em; font-weight: 700; } /* --brand-2 is the text-safe purple in BOTH themes (#4a3ab8 at 7.5:1 on light, #a78bfa at 7.0:1 on dark). --brand is a fill colour; white sits on it. */ a { color: var(--brand-2); text-decoration: none; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; } .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* Nav */ .nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; letter-spacing: -.03em; text-decoration: none; color: inherit; cursor: pointer; } a.brand:hover { opacity: .85; } /* Logo mark. object-fit:contain keeps the mule's aspect ratio at any size. */ .brand-mark { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; display: block; } .brand .dot { width: 26px; height: 26px; border-radius: 8px; background: conic-gradient(from 200deg, var(--brand), var(--brand-2), var(--violet), var(--brand)); box-shadow: 0 0 18px rgba(90,72,220,.45); } .nav-links { display: flex; align-items: center; gap: 22px; } .nav-links a { color: var(--muted); font-size: 15px; } .nav-links a:hover { color: var(--text); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 11px; font-weight: 600; font-size: 15px; font-family: "Archivo", sans-serif; border: 1px solid transparent; cursor: pointer; transition: .18s; white-space: nowrap; } .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 32px rgba(90,72,220,.40); } .btn-primary:hover { transform: translateY(-2px); background: #4d3cc9; box-shadow: 0 10px 38px rgba(90,72,220,.45); } /* Softer glow inside the app only. The marketing homepage keeps the full-blur version — its buttons sit in open space where the glow is the point; in the dashboard the same shadow crowds adjacent panels and reads as haze. */ .dash .btn-primary { box-shadow: 0 4px 14px rgba(90,72,220,.22); } .dash .btn-primary:hover { box-shadow: 0 5px 16px rgba(90,72,220,.26); } .btn-ghost { background: var(--card-2); border-color: var(--border); color: var(--text); } .btn-ghost:hover { border-color: var(--brand); transform: translateY(-1px); } .btn-danger { background: transparent; border-color: var(--border); color: var(--danger); padding: 7px 12px; font-size: 13px; } .btn-danger:hover { border-color: var(--danger); } .btn-sm { padding: 8px 12px; font-size: 13px; } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } /* Hero */ .hero { padding: 70px 0 40px; text-align: center; } .pill { display: inline-block; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 13px; margin-bottom: 22px; background: var(--card); } .hero h1 { font-size: clamp(38px, 6vw, 60px); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 18px; } .grad { background: linear-gradient(110deg, var(--brand) 5%, var(--brand-2) 55%, var(--violet) 98%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { font-size: 19px; color: var(--muted); max-width: 620px; margin: 0 auto 30px; } .hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* Stats */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 56px 0; } .stat { background: var(--card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; text-align: center; } .stat .n { font-size: 30px; font-weight: 700; letter-spacing: -.02em; font-family: "Archivo"; } .stat .l { color: var(--muted); font-size: 14px; margin-top: 4px; } /* Feature cards */ .section-title { text-align: center; margin: 60px 0 8px; font-size: clamp(28px, 4vw, 34px); letter-spacing: -.02em; } .section-sub { text-align: center; color: var(--muted); margin-bottom: 36px; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .card { background: var(--card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); } .card h3 { margin: 12px 0 8px; font-size: 18px; } .card p { color: var(--muted); margin: 0; font-size: 15px; } .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--card-2); display: grid; place-items: center; font-size: 20px; } /* Pricing strip */ .price-strip { margin: 60px 0; background: linear-gradient(135deg, rgba(90,72,220,.16), rgba(167,139,250,.10)); border: 1px solid var(--border); border-radius: 18px; padding: 40px; text-align: center; } .price-strip .big { font-size: 48px; font-weight: 800; letter-spacing: -.03em; font-family: "Archivo"; } .price-strip .big span { font-size: 20px; color: var(--muted); font-weight: 500; } /* Pools */ .pools { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; } .pool { padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 14px; } /* Footer */ .footer { border-top: 1px solid var(--border); margin-top: 70px; padding: 30px 0; color: var(--muted); font-size: 14px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* Theme toggle (injected by /js/theme.js) */ .theme-toggle { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 6px; padding: 9px 12px; border-radius: 10px; background: none; border: 0; cursor: pointer; color: var(--muted); font-family: inherit; font-size: 14.5px; font-weight: 500; transition: background .15s ease, color .15s ease; } .theme-toggle:hover { background: var(--card-2); color: var(--text); } .theme-toggle svg { width: 18px; height: 18px; flex: 0 0 auto; } /* Only one icon is shown at a time; which one depends on the active theme. */ .theme-toggle .t-dark { display: none; } :root[data-theme="dark"] .theme-toggle .t-dark { display: block; } :root[data-theme="dark"] .theme-toggle .t-light { display: none; } /* Pages with no sidebar (login) host it inside the auth card. A fixed corner button overlapped the card on short viewports, covering the submit button. */ .theme-toggle.in-card { justify-content: center; margin-top: 14px; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; padding-top: 14px; } .theme-toggle.in-card:hover { background: none; color: var(--text); } /* Auth */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .auth-card { width: 100%; max-width: 420px; background: var(--card); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--border-2); border-radius: 20px; padding: 34px; box-shadow: var(--shadow); } .auth-card h2 { margin: 6px 0 4px; font-size: 26px; } .auth-card .sub { color: var(--muted); margin-bottom: 24px; font-size: 15px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; } .input { width: 100%; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 15px; outline: none; transition: .15s; } .input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(90,72,220,.22); } .auth-switch { text-align: center; margin-top: 18px; color: var(--muted); font-size: 14px; } .error { color: var(--danger); font-size: 14px; margin-top: 6px; min-height: 18px; } /* Dashboard */ .dash { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } .sidebar { background: var(--card); border-right: 1px solid var(--border); padding: 24px 18px; } .side-link { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 10px; color: var(--muted); cursor: pointer; font-size: 15px; } .side-link:hover, .side-link.active { background: var(--card-2); color: var(--text); } .side-link svg { width: 18px; height: 18px; flex: 0 0 auto; } /* Standalone "Buy data" pinned above the nav — subtle panel that blends with the sidebar; only the icon carries the accent color. */ .side-buy { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; padding: 9px 14px; border-radius: 11px; background: var(--card-2); border: 1px solid var(--border-2); color: var(--text); font-weight: 600; font-size: 14.5px; text-decoration: none; transition: background .15s ease, border-color .15s ease; } .side-buy:hover { background: rgba(90,72,220,.14); border-color: var(--brand); color: var(--text); } /* Second CTA under Buy Proxies. Tighter top margin so the pair reads as one block rather than two unrelated buttons, and a quieter fill so the primary purchase action still leads. */ .side-buy-alt { margin-top: -6px; } .side-buy .plus { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 16px; line-height: 1; font-weight: 700; } /* Sidebar group label (e.g. "Proxies", "Account"). */ .side-cat { margin: 16px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); opacity: .65; } /* min-width:0 is what lets the app fit a phone. .main is a grid item (.dash's 1fr track), and grid items default to min-width:auto — the track can then never shrink below the content's minimum width, EVEN when that content sits inside an overflow-x:auto box. One rigid row anywhere (a fixed-width input, a data table) forced the whole layout wider than the screen, and mobile Chrome responded by expanding the layout viewport: the dashboard loaded zoomed out with scrollbars on both axes. With min-width:0 the track shrinks to the screen and inner scroll containers actually scroll. */ .main { padding: 32px 46px; max-width: 1240px; width: 100%; margin-inline: auto; box-sizing: border-box; min-width: 0; } .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; gap: 12px; flex-wrap: wrap; } .topbar h1 { font-size: 24px; margin: 0; } /* The chip row is a flex line, and each chip is a fixed-height flex box. Both matter: as inline boxes they aligned on the TEXT BASELINE, and an inline-flex chip whose first child is absolutely positioned (the avatar) has no text baseline to offer — so the identity chip floated 7.5px above the balance chip. Centre-alignment plus a shared min-height removes both the baseline question and the 2.5px height difference. */ .topbar > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; line-height: 1; border: 1px solid var(--border); border-radius: 999px; font-size: 14px; color: var(--muted); background: var(--card); } .chip b { color: var(--brand-2); } /* Identity chip with a Discord avatar. The lettered circle sits underneath and shows through only when the is removed by its error handler. */ .chip-id { gap: 9px; padding-left: 6px; } .chip-ava { position: relative; width: 22px; height: 22px; flex: 0 0 auto; } .chip-fallback { position: absolute; inset: 0; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1; } .chip-avatar { position: absolute; inset: 0; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; } .chip-name { color: var(--text); font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; } .metric { background: var(--card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .metric .l { color: var(--muted); font-size: 13px; } .metric .v { font-size: 28px; font-weight: 700; margin-top: 6px; letter-spacing: -.02em; font-family: "Archivo"; } .panel { background: var(--card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 22px; } .panel h3 { margin: 0 0 4px; font-size: 18px; } .panel .desc { color: var(--muted); font-size: 14px; margin-bottom: 18px; } .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .select { padding: 11px 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 15px; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 12px 10px; font-size: 14px; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; } .copy { cursor: pointer; color: var(--brand-2); font-size: 12px; margin-left: 8px; } .badge { padding: 3px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); } .badge.sticky { color: var(--brand-2); } .badge.rotating { color: var(--brand-2); } .empty { color: var(--muted); text-align: center; padding: 30px; } .hidden { display: none !important; } .toast { position: fixed; bottom: 24px; right: 24px; background: rgba(20,22,40,.85); backdrop-filter: blur(16px); border: 1px solid var(--border-2); padding: 14px 18px; border-radius: 12px; box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); transition: .2s; z-index: 100; } .toast.show { opacity: 1; transform: translateY(0); } /* Mobile app-shell drawer (hamburger + slide-in sidebar), injected by /js/appnav.js */ /* --bg-2, not --card: the button floats OVER page content, and dark's --card is rgba(255,255,255,.045) — see-through, like the drawer was. The burger only ever renders on mobile (display:none until .avail under 820px), so this IS its mobile styling. */ .app-burger { display: none; position: fixed; top: 14px; left: 14px; z-index: 60; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--border); background: var(--bg-2); box-shadow: var(--burger-shadow); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; } .app-burger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s, opacity .2s; } body.app-nav-open .app-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.app-nav-open .app-burger span:nth-child(2) { opacity: 0; } body.app-nav-open .app-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .app-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 50; } /* Responsive */ @media (max-width: 900px) { .stats, .grid, .cards-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 820px) { .hero h1 { font-size: 40px; } .dash { grid-template-columns: 1fr; } .app-burger.avail { display: flex; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 264px; max-width: 82vw; z-index: 55; transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); border-right: 1px solid var(--border); overflow-y: auto; /* Opaque, overriding the desktop sidebar's var(--card): in dark mode that is rgba(255,255,255,.045), which reads as a tint against the page background but is SEE-THROUGH when this drawer slides over content. --bg-2 is opaque in both themes (#ffffff / #101126). */ background: var(--bg-2); } body.app-nav-open .sidebar { transform: translateX(0); } body.app-nav-open .app-backdrop { display: block; } .main { padding: 66px 16px 24px; } } @media (max-width: 560px) { .stats, .grid, .cards-row { grid-template-columns: 1fr; } .footer { flex-direction: column; gap: 10px; } .auth-card { padding: 26px 20px; } }