/* ========================================================================== Design system -------------------------------------------------------------------------- Brand colours are injected as custom properties by the layout, sourced from the `settings` table. Nothing here hardcodes a brand colour, so rebranding from the admin panel restyles the whole platform. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Fallbacks — overridden by the inline block in . */ --brand: #0B5FFF; --brand-dark: #0742B8; --accent: #00C689; --danger: #FF4D4F; --ink: #0A0F1C; --surface: #FFFFFF; --canvas: #F5F7FB; --radius: 14px; /* Derived neutrals */ --ink-2: color-mix(in srgb, var(--ink) 68%, transparent); --ink-3: color-mix(in srgb, var(--ink) 46%, transparent); --ink-4: color-mix(in srgb, var(--ink) 28%, transparent); --line: color-mix(in srgb, var(--ink) 11%, transparent); --line-soft: color-mix(in srgb, var(--ink) 6%, transparent); --brand-soft: color-mix(in srgb, var(--brand) 10%, transparent); --brand-softer: color-mix(in srgb, var(--brand) 5%, transparent); --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent); --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent); --warn: #F59E0B; --warn-soft: color-mix(in srgb, #F59E0B 14%, transparent); --radius-sm: calc(var(--radius) * 0.5); --radius-lg: calc(var(--radius) * 1.6); --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(10, 15, 28, .05), 0 1px 3px rgba(10, 15, 28, .04); --shadow: 0 4px 12px rgba(10, 15, 28, .06), 0 1px 3px rgba(10, 15, 28, .04); --shadow-lg: 0 18px 48px rgba(10, 15, 28, .12), 0 4px 12px rgba(10, 15, 28, .06); --shadow-brand: 0 10px 30px color-mix(in srgb, var(--brand) 26%, transparent); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --nav-h: 68px; --wrap: 1240px; --ease: cubic-bezier(.4, 0, .2, 1); } /* Dark theme — toggled by [data-theme] on . */ :root[data-theme="dark"] { --ink: #E9EDF5; --surface: #121826; --canvas: #0A0F1C; --line: color-mix(in srgb, #E9EDF5 13%, transparent); --line-soft: color-mix(in srgb, #E9EDF5 7%, transparent); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 4px 14px rgba(0, 0, 0, .34); --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5); } /* -------------------------------------------------------------------------- 2. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01"; } img, svg, video { max-width: 100%; height: auto; display: block; } /* Author display rules (.alert{display:flex} etc.) otherwise beat the UA stylesheet and leave [hidden] elements visible. */ [hidden] { display: none !important; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4, h5 { margin: 0 0 .5em; line-height: 1.18; font-weight: 700; letter-spacing: -.021em; } h1 { font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.6rem); letter-spacing: -.032em; } h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem); letter-spacing: -.026em; } h3 { font-size: clamp(1.18rem, 1.05rem + .5vw, 1.45rem); } h4 { font-size: 1.05rem; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } ::selection { background: color-mix(in srgb, var(--brand) 24%, transparent); } /* -------------------------------------------------------------------------- 3. Layout primitives -------------------------------------------------------------------------- */ .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .wrap-narrow { width: min(100% - 2.5rem, 820px); margin-inline: auto; } .section { padding: clamp(3.5rem, 2rem + 6vw, 6.5rem) 0; } .section-sm { padding: clamp(2.5rem, 1.5rem + 3.5vw, 4rem) 0; } .section-tint { background: var(--surface); } .grid { display: grid; gap: 1.5rem; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .stack { display: flex; flex-direction: column; gap: 1rem; } .row { display: flex; align-items: center; gap: .75rem; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .spacer { flex: 1; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); padding: .4rem .85rem; border-radius: var(--radius-pill); margin-bottom: 1.1rem; } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .section-head { max-width: 660px; margin-bottom: 2.75rem; } .section-head.center { margin-inline: auto; text-align: center; } .section-head p { color: var(--ink-2); font-size: 1.06rem; } .lede { font-size: 1.12rem; color: var(--ink-2); } .muted { color: var(--ink-3); } .small { font-size: .875rem; } .tiny { font-size: .8rem; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .center { text-align: center; } /* -------------------------------------------------------------------------- 4. Buttons -------------------------------------------------------------------------- */ .btn { --btn-bg: var(--brand); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.5rem; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); font-weight: 620; font-size: .95rem; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease); } .btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-brand); } .btn:active { transform: translateY(0); } .btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } .btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); } .btn-ghost:hover { box-shadow: none; background: var(--brand-softer); border-color: var(--brand); color: var(--brand); } .btn-soft { --btn-bg: var(--brand-soft); --btn-fg: var(--brand); } .btn-soft:hover { box-shadow: none; background: color-mix(in srgb, var(--brand) 17%, transparent); } .btn-accent { --btn-bg: var(--accent); } .btn-accent:hover { box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 30%, transparent); } .btn-danger { --btn-bg: var(--danger); } .btn-danger:hover { box-shadow: 0 10px 30px color-mix(in srgb, var(--danger) 30%, transparent); } .btn-lg { padding: 1rem 2rem; font-size: 1.02rem; } .btn-sm { padding: .5rem 1rem; font-size: .85rem; } .btn-block { width: 100%; } /* Download APK. It sits in every header, including the narrow ones, so the label shortens to just "APK" rather than the button disappearing. */ .btn-apk { padding-left: .85rem; padding-right: .95rem; } .btn-apk svg { opacity: .9; } .btn-buy { --btn-bg: var(--accent); border-radius: var(--radius-sm); } .btn-sell { --btn-bg: var(--danger); border-radius: var(--radius-sm); } .link-arrow { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .93rem; } .link-arrow::after { content: "→"; transition: transform .18s var(--ease); } .link-arrow:hover { text-decoration: none; } .link-arrow:hover::after { transform: translateX(4px); } /* -------------------------------------------------------------------------- 5. Header & navigation -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line-soft); } .site-header .wrap { display: flex; align-items: center; gap: 1.5rem; height: 100%; } .brand-logo { display: inline-flex; align-items: center; gap: .6rem; flex-shrink: 0; } .brand-logo:hover { text-decoration: none; } .brand-logo-img { height: 34px; width: auto; } .brand-logo-text { font-size: 1.32rem; font-weight: 800; letter-spacing: -.035em; color: var(--ink); } .brand-logo-text span { color: var(--brand); } .nav { display: flex; align-items: center; gap: .25rem; height: 100%; } .nav-item { position: relative; height: 100%; display: flex; align-items: center; } .nav-link { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .85rem; border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 550; font-size: .94rem; transition: color .15s var(--ease), background .15s var(--ease); } .nav-link:hover, .nav-link.is-active { color: var(--brand); background: var(--brand-softer); text-decoration: none; } .nav-link .chev { width: 10px; height: 10px; opacity: .6; transition: transform .2s var(--ease); } .nav-item:hover .chev { transform: rotate(180deg); } /* Mega menu */ .mega { position: absolute; top: 100%; left: 50%; translate: -50% 0; min-width: 620px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.4rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem 1.5rem; opacity: 0; visibility: hidden; translate: -50% 8px; transition: opacity .18s var(--ease), translate .18s var(--ease), visibility .18s; } .nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; translate: -50% 0; } .mega-col-head { grid-column: 1 / -1; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); padding: .5rem .7rem .3rem; } .mega-link { display: flex; flex-direction: column; gap: .12rem; padding: .6rem .7rem; border-radius: var(--radius-sm); color: var(--ink); transition: background .14s var(--ease); } .mega-link:hover { background: var(--brand-softer); text-decoration: none; } .mega-link strong { font-size: .92rem; font-weight: 620; } .mega-link span { font-size: .8rem; color: var(--ink-3); line-height: 1.4; } .nav-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; } .theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; color: var(--ink-2); transition: background .15s var(--ease), color .15s var(--ease); } .theme-toggle:hover { background: var(--brand-softer); color: var(--brand); } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } .nav-burger { display: none; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; cursor: pointer; } .nav-burger span { display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: background .15s; } .nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; width: 17px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s var(--ease); } .nav-burger span::before { top: -6px; } .nav-burger span::after { top: 6px; } .nav-burger.is-open span { background: transparent; } .nav-burger.is-open span::before { transform: translateY(6px) rotate(45deg); } .nav-burger.is-open span::after { transform: translateY(-6px) rotate(-45deg); } /* -------------------------------------------------------------------------- 6. Hero -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(1100px 620px at 78% -12%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 62%), radial-gradient(760px 520px at 6% 108%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), linear-gradient(168deg, #060B18 0%, #0C1425 52%, #0A1020 100%); color: #E9EDF5; padding: clamp(3.5rem, 2rem + 7vw, 6.5rem) 0 clamp(3rem, 2rem + 5vw, 5rem); } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, #fff 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, #fff 4%, transparent) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(circle at 50% 40%, #000 8%, transparent 72%); -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 8%, transparent 72%); } .hero > * { position: relative; z-index: 1; } .hero .eyebrow { background: color-mix(in srgb, #fff 12%, transparent); color: #fff; } .hero h1 { color: #fff; margin-bottom: 1.1rem; } .hero h1 em { font-style: normal; color: var(--accent); } .hero-sub { font-size: clamp(1rem, .95rem + .35vw, 1.16rem); color: #A9B4C8; max-width: 40rem; margin-bottom: 2rem; } .hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; } .hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2.25rem; } .hero-trust { display: flex; gap: 1.75rem; flex-wrap: wrap; } .hero-trust div { display: flex; flex-direction: column; } .hero-trust dt { font-size: 1.45rem; font-weight: 750; color: #fff; letter-spacing: -.02em; } .hero-trust dd { margin: 0; font-size: .82rem; color: #8894AB; } .hero-risk { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; color: #7E8BA3; line-height: 1.55; max-width: 40rem; } /* Floating quote panel in the hero */ .hero-panel { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.11); border-radius: var(--radius-lg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 1.35rem; box-shadow: 0 28px 70px rgba(0,0,0,.42); } .hero-panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .9rem; margin-bottom: .35rem; border-bottom: 1px solid rgba(255,255,255,.09); } .hero-panel-head strong { font-size: .95rem; color: #fff; } .live-dot { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--accent); font-weight: 600; } .live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); animation: pulse 2s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .hero-quote { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; padding: .72rem .3rem; border-bottom: 1px solid rgba(255,255,255,.055); } .hero-quote:last-child { border-bottom: 0; } .hero-quote-sym { display: flex; flex-direction: column; } .hero-quote-sym strong { font-size: .9rem; color: #fff; font-weight: 620; } .hero-quote-sym span { font-size: .74rem; color: #7E8BA3; } .hero-quote-price { font-family: var(--mono); font-size: .93rem; color: #E9EDF5; font-variant-numeric: tabular-nums; } .hero-quote-chg { font-size: .78rem; font-weight: 650; font-variant-numeric: tabular-nums; padding: .2rem .5rem; border-radius: var(--radius-sm); min-width: 62px; text-align: right; } /* -------------------------------------------------------------------------- 7. Ticker -------------------------------------------------------------------------- */ .ticker { background: var(--ink); color: #fff; overflow: hidden; border-block: 1px solid rgba(255,255,255,.08); } :root[data-theme="dark"] .ticker { background: #060B18; } .ticker-track { display: flex; gap: 2.5rem; padding: .7rem 0; width: max-content; animation: marquee 46s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } .ticker-item { display: inline-flex; align-items: baseline; gap: .5rem; font-size: .83rem; white-space: nowrap; } .ticker-item b { font-weight: 650; letter-spacing: .01em; } .ticker-item .px { font-family: var(--mono); color: #B8C2D4; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 8. Cards -------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); } .card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 32%, transparent); } .card-flat { box-shadow: none; } .card-pad-lg { padding: 2rem; } .feature-card .feature-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand); margin-bottom: 1.1rem; } .feature-card h3 { font-size: 1.1rem; margin-bottom: .45rem; } .feature-card p { color: var(--ink-2); font-size: .93rem; margin: 0; } /* Account tier cards */ .tier { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); } .tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .tier.is-featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow); } .tier-badge { position: absolute; top: -11px; left: 50%; translate: -50% 0; background: var(--brand); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: .3rem .8rem; border-radius: var(--radius-pill); white-space: nowrap; } .tier h3 { margin-bottom: .2rem; } .tier-tagline { font-size: .86rem; color: var(--ink-3); margin-bottom: 1.2rem; } .tier-price { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .25rem; } .tier-price b { font-size: 1.95rem; font-weight: 760; letter-spacing: -.03em; } .tier-price span { font-size: .85rem; color: var(--ink-3); } .tier-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; padding: 1.05rem 0; margin: 1.05rem 0; border-block: 1px solid var(--line-soft); } .tier-meta div span { display: block; font-size: .74rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; } .tier-meta div b { font-size: .96rem; font-weight: 650; font-variant-numeric: tabular-nums; } .tier-features { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .55rem; } .tier-features li { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--ink-2); line-height: 1.45; } .tier-features li::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-top: .18rem; border-radius: 50%; background: var(--accent-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2300C689' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5'/%3E%3C/svg%3E"); background-size: 12px; background-repeat: no-repeat; background-position: center; } .tier .btn { margin-top: auto; } /* Stat tiles */ .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem; } .stat-label { font-size: .78rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .4rem; } .stat-value { font-size: 1.7rem; font-weight: 740; letter-spacing: -.028em; font-variant-numeric: tabular-nums; line-height: 1.15; } .stat-sub { font-size: .82rem; color: var(--ink-3); margin-top: .25rem; } /* -------------------------------------------------------------------------- 9. Tabs -------------------------------------------------------------------------- */ .tabs { display: flex; gap: .35rem; flex-wrap: wrap; padding: .35rem; background: var(--brand-softer); border: 1px solid var(--line-soft); border-radius: var(--radius-pill); width: fit-content; max-width: 100%; margin-bottom: 1.75rem; } .tab { padding: .5rem 1.1rem; border-radius: var(--radius-pill); border: 0; background: transparent; cursor: pointer; font-size: .89rem; font-weight: 570; color: var(--ink-2); transition: background .15s var(--ease), color .15s var(--ease); text-decoration: none; } .tab:hover { color: var(--brand); text-decoration: none; } .tab.is-active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); font-weight: 640; } .tab-panel { display: none; } .tab-panel.is-active { display: block; animation: fade .25s var(--ease); } @keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 10. Tables -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); -webkit-overflow-scrolling: touch; } table.data { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 620px; } table.data th { text-align: left; font-weight: 620; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--brand-softer); white-space: nowrap; } table.data td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } table.data tbody tr:last-child td { border-bottom: 0; } table.data tbody tr { transition: background .12s var(--ease); } table.data tbody tr:hover { background: var(--brand-softer); } table.data .right { text-align: right; } table.data .price { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .89rem; } .sym { display: flex; align-items: center; gap: .7rem; } .sym-badge { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--brand-soft); color: var(--brand); font-size: .68rem; font-weight: 750; letter-spacing: -.02em; } .sym div { display: flex; flex-direction: column; line-height: 1.3; } .sym strong { font-size: .89rem; font-weight: 620; } .sym span { font-size: .76rem; color: var(--ink-3); } /* Gain / loss */ .is-up { color: var(--accent); } .is-down { color: var(--danger); } .is-flat { color: var(--ink-3); } .chg { display: inline-block; padding: .22rem .55rem; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 650; font-variant-numeric: tabular-nums; } .chg.is-up { background: var(--accent-soft); color: var(--accent); } .chg.is-down { background: var(--danger-soft); color: var(--danger); } .chg.is-flat { background: var(--line-soft); color: var(--ink-3); } /* Flash animation when a price updates */ @keyframes flash-up { 0% { background: var(--accent-soft); } 100% { background: transparent; } } @keyframes flash-down { 0% { background: var(--danger-soft); } 100% { background: transparent; } } .tick-up { animation: flash-up .7s var(--ease); } .tick-down { animation: flash-down .7s var(--ease); } /* -------------------------------------------------------------------------- 11. Forms -------------------------------------------------------------------------- */ .field { margin-bottom: 1.15rem; } .field label, .label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: .4rem; color: var(--ink); } .field .hint { font-size: .79rem; color: var(--ink-3); margin-top: .35rem; line-height: 1.45; } .req { color: var(--danger); } .input, .select, .textarea { width: 100%; padding: .78rem .95rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: .95rem; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); } .input::placeholder { color: var(--ink-4); } .input:disabled, .select:disabled { background: var(--line-soft); cursor: not-allowed; color: var(--ink-3); } .textarea { min-height: 110px; resize: vertical; line-height: 1.55; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 12px; padding-right: 2.3rem; } .input.is-error, .select.is-error { border-color: var(--danger); } .field-error { color: var(--danger); font-size: .82rem; margin-top: .35rem; font-weight: 500; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .input-mono { font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; } .check { display: flex; gap: .65rem; align-items: flex-start; font-size: .88rem; line-height: 1.5; cursor: pointer; } .check input { width: 17px; height: 17px; margin-top: .16rem; accent-color: var(--brand); flex-shrink: 0; cursor: pointer; } .input-prefix { position: relative; display: flex; align-items: center; } .input-prefix span { position: absolute; left: .95rem; color: var(--ink-3); font-weight: 600; pointer-events: none; } .input-prefix .input { padding-left: 2.1rem; } /* Password reveal — the wrapper is added by app.js around every input[type=password], so the padding has to come from the wrapper rather than a class on the input itself. */ .pw-field { position: relative; display: flex; align-items: center; } .pw-field .input { padding-right: 2.85rem; } .pw-eye { position: absolute; right: .3rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-3); cursor: pointer; padding: 0; transition: color .15s var(--ease), background .15s var(--ease); } .pw-eye svg { width: 18px; height: 18px; display: block; } .pw-eye:hover { color: var(--ink-2); background: var(--line-soft); } .pw-eye[aria-pressed="true"] { color: var(--brand); } .pw-eye:focus-visible { outline: none; color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 40%, transparent); } /* Edge and older IE put their own reveal control in the field. */ .pw-field .input::-ms-reveal, .pw-field .input::-ms-clear { display: none; } /* Auth / form shell */ .auth-shell { min-height: calc(100vh - var(--nav-h)); display: grid; place-items: center; padding: 3rem 1.25rem; } .auth-card { width: min(100%, 480px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.4rem; box-shadow: var(--shadow-lg); } .auth-card.is-wide { width: min(100%, 720px); } .auth-head { text-align: center; margin-bottom: 1.9rem; } .auth-head h1 { font-size: 1.62rem; margin-bottom: .4rem; } .auth-head p { color: var(--ink-3); font-size: .93rem; margin: 0; } .auth-foot { text-align: center; margin-top: 1.5rem; font-size: .9rem; color: var(--ink-3); } /* Signup stepper */ .stepper { display: flex; align-items: center; margin-bottom: 2.2rem; } .step { display: flex; align-items: center; gap: .6rem; flex: 1; } .step:last-child { flex: 0; } .step-dot { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line); font-size: .82rem; font-weight: 700; color: var(--ink-3); background: var(--surface); transition: all .2s var(--ease); } .step-label { font-size: .82rem; font-weight: 550; color: var(--ink-3); white-space: nowrap; } .step-bar { flex: 1; height: 2px; background: var(--line); margin: 0 .5rem; border-radius: 2px; } .step.is-active .step-dot { border-color: var(--brand); background: var(--brand); color: #fff; } .step.is-active .step-label { color: var(--ink); font-weight: 640; } .step.is-done .step-dot { border-color: var(--accent); background: var(--accent); color: #fff; font-size: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3L12.5 5'/%3E%3C/svg%3E"); background-size: 15px; background-repeat: no-repeat; background-position: center; } .step.is-done .step-bar, .step.is-done + .step .step-bar { background: var(--accent); } /* -------------------------------------------------------------------------- 12. Alerts & badges -------------------------------------------------------------------------- */ .alert { display: flex; gap: .75rem; align-items: flex-start; padding: .95rem 1.15rem; border-radius: var(--radius-sm); font-size: .9rem; line-height: 1.5; margin-bottom: 1.15rem; border: 1px solid transparent; } .alert-icon { flex-shrink: 0; margin-top: .12rem; } .alert p:last-child { margin-bottom: 0; } .alert-success { background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 82%, var(--ink)); border-color: color-mix(in srgb, var(--accent) 26%, transparent); } .alert-error, .alert-danger { background: var(--danger-soft); color: color-mix(in srgb, var(--danger) 84%, var(--ink)); border-color: color-mix(in srgb, var(--danger) 26%, transparent); } .alert-warning { background: var(--warn-soft); color: color-mix(in srgb, var(--warn) 86%, var(--ink)); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .alert-info { background: var(--brand-soft); color: color-mix(in srgb, var(--brand) 84%, var(--ink)); border-color: color-mix(in srgb, var(--brand) 24%, transparent); } .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .26rem .62rem; border-radius: var(--radius-pill); font-size: .74rem; font-weight: 650; letter-spacing: .015em; white-space: nowrap; } .badge-success { background: var(--accent-soft); color: var(--accent); } .badge-danger { background: var(--danger-soft); color: var(--danger); } .badge-warning { background: var(--warn-soft); color: var(--warn); } .badge-info { background: var(--brand-soft); color: var(--brand); } .badge-neutral { background: var(--line-soft); color: var(--ink-3); } .badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* -------------------------------------------------------------------------- 13. Accordion (FAQ) -------------------------------------------------------------------------- */ .accordion { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); } .acc-item { border-bottom: 1px solid var(--line-soft); } .acc-item:last-child { border-bottom: 0; } .acc-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; background: transparent; border: 0; cursor: pointer; font-size: .98rem; font-weight: 600; text-align: left; color: var(--ink); transition: color .15s var(--ease); } .acc-q:hover { color: var(--brand); } .acc-q::after { content: ""; flex-shrink: 0; width: 11px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .22s var(--ease); opacity: .55; } .acc-item.is-open .acc-q::after { transform: rotate(-135deg) translateY(-2px); } .acc-item.is-open .acc-q { color: var(--brand); } .acc-a { display: none; padding: 0 1.4rem 1.3rem; color: var(--ink-2); font-size: .93rem; line-height: 1.65; } .acc-item.is-open .acc-a { display: block; animation: fade .2s var(--ease); } /* -------------------------------------------------------------------------- 14. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--ink); color: #A9B4C8; padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 2rem; font-size: .89rem; } :root[data-theme="dark"] .site-footer { background: #060B18; border-top: 1px solid var(--line-soft); } .footer-top { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.09); } .footer-brand .brand-logo-text { color: #fff; } .footer-brand p { margin: 1rem 0 1.25rem; color: #7E8BA3; line-height: 1.6; max-width: 22rem; font-size: .87rem; } .footer-col h5 { color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; } .footer-col a { color: #A9B4C8; font-size: .87rem; transition: color .14s var(--ease); } .footer-col a:hover { color: #fff; text-decoration: none; } .footer-social { display: flex; gap: .6rem; } .footer-social a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: #A9B4C8; transition: all .15s var(--ease); } .footer-social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; } .footer-legal { padding-top: 2rem; } .footer-risk { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; font-size: .8rem; line-height: 1.65; color: #8894AB; margin-bottom: 1.5rem; } .footer-risk strong { color: #C4CDDD; } .footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: #6D7A93; } .footer-bottom a { color: #8894AB; } .footer-bottom nav { display: flex; gap: 1.25rem; flex-wrap: wrap; } /* -------------------------------------------------------------------------- 15. App shell (dashboard + admin) -------------------------------------------------------------------------- */ .app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; } /* The drawer backdrop must be fixed at every width. If it were static it would become a grid item and consume the sidebar's column. */ .side-scrim { position: fixed; inset: 0; z-index: 150; background: rgba(6, 11, 24, .5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s var(--ease), visibility .25s; } .side-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .side { background: var(--surface); border-right: 1px solid var(--line); padding: 1.25rem 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; } .side-brand { padding: .35rem 1.4rem 1.4rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 1rem; } .side-group { padding: 0 .85rem; margin-bottom: 1.4rem; } .side-group h6 { font-size: .69rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); padding: 0 .6rem; margin: 0 0 .5rem; } .side-link { display: flex; align-items: center; gap: .75rem; padding: .62rem .65rem; border-radius: var(--radius-sm); color: var(--ink-2); font-size: .9rem; font-weight: 540; transition: background .14s var(--ease), color .14s var(--ease); margin-bottom: .12rem; } .side-link:hover { background: var(--brand-softer); color: var(--brand); text-decoration: none; } .side-link.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 640; } .side-link svg { flex-shrink: 0; opacity: .85; } .side-link .count { margin-left: auto; font-size: .72rem; font-weight: 700; background: var(--danger); color: #fff; padding: .1rem .42rem; border-radius: var(--radius-pill); } .side-foot { margin-top: auto; padding: 1rem 1.4rem 0; border-top: 1px solid var(--line-soft); } /* The Open Account button that lives at the foot of the phone menu. */ .nav-signup-mobile { display: none; } /* Bottom bar: the app shell's navigation on a phone, where a drawer that has to be opened before anything can be reached is a tap too many. The drawer stays for everything that does not fit, behind its More button. */ .tabbar { display: none; } .main { min-width: 0; display: flex; flex-direction: column; } .topbar { height: 66px; flex-shrink: 0; display: flex; align-items: center; gap: 1rem; padding: 0 1.75rem; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 40; } .topbar h1 { font-size: 1.12rem; margin: 0; letter-spacing: -.018em; } .content { padding: 1.75rem; flex: 1; } .acct-switch { display: flex; align-items: center; gap: .7rem; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-size: .86rem; } .acct-switch b { font-variant-numeric: tabular-nums; } .avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .82rem; font-weight: 700; } /* Page header inside the app */ .page-head { margin-bottom: 1.6rem; } .page-head h2 { font-size: 1.42rem; margin-bottom: .25rem; } .page-head p { color: var(--ink-3); font-size: .92rem; margin: 0; } /* Empty state */ .empty { text-align: center; padding: 3.5rem 1.5rem; color: var(--ink-3); } .empty svg { margin: 0 auto 1rem; opacity: .35; } .empty h3 { color: var(--ink-2); font-size: 1.05rem; margin-bottom: .35rem; } .empty p { font-size: .9rem; margin-bottom: 1.25rem; } /* Order ticket */ .ticket { position: sticky; top: 86px; } .ticket-side { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1.1rem; } .ticket-side label { display: grid; place-items: center; padding: .78rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-weight: 650; font-size: .92rem; transition: all .15s var(--ease); } .ticket-side input { position: absolute; opacity: 0; pointer-events: none; } .ticket-side label small { display: block; font-size: .74rem; font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; } .ticket-side input:checked + label.buy { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .ticket-side input:checked + label.sell { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); } /* Clients can only buy, so the side selector collapses to a single non-interactive banner rather than a radio pair with one dead option. */ .ticket-side.is-buy-only { grid-template-columns: 1fr; } .ticket-side.is-buy-only .buy { display: grid; place-items: center; padding: .78rem; border: 1.5px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-weight: 650; font-size: .92rem; } .ticket-side.is-buy-only .buy small { display: block; font-size: .74rem; font-weight: 500; opacity: .75; font-variant-numeric: tabular-nums; } /* Copy-paste config snippets, e.g. the .env lines on the updates page. */ .code-block { background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1rem; margin: 0; font-family: var(--mono); font-size: .8rem; line-height: 1.75; color: var(--ink-2); overflow-x: auto; white-space: pre; } .code-block.has-copy { position: relative; padding-right: 4.6rem; } .copy-btn { position: absolute; top: .55rem; right: .55rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); border-radius: var(--radius-sm); padding: .2rem .55rem; font-family: inherit; font-size: .7rem; font-weight: 600; cursor: pointer; transition: all .15s var(--ease); } .copy-btn:hover { color: var(--ink); border-color: var(--ink-4); } .copy-btn.is-done { color: var(--accent); border-color: var(--accent); } /* Five headline cards — never fewer than two per row on a phone. */ .portfolio-totals { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1200px) { .portfolio-totals { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .portfolio-totals { grid-template-columns: repeat(2, 1fr); } } /* ---- Live chart ---- */ .chart-card { padding: 1.1rem 1.2rem 1rem; } .chart-head { align-items: flex-start; margin-bottom: .9rem; gap: 1rem; flex-wrap: wrap; } .chart-head [data-chart-readout] { margin-top: .3rem; font-family: var(--mono); font-size: .74rem; font-variant-numeric: tabular-nums; } .chart-canvas-wrap { position: relative; width: 100%; } .chart-canvas-wrap canvas { display: block; width: 100%; cursor: crosshair; touch-action: pan-y; } .chip { border: 1px solid var(--line); background: none; color: var(--ink-3); border-radius: var(--radius-pill); padding: .3rem .7rem; font-size: .76rem; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; transition: all .15s var(--ease); } .chip:hover { color: var(--ink); border-color: var(--ink-4); } .chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; } .ticket-summary { background: var(--brand-softer); border-radius: var(--radius-sm); padding: .9rem 1rem; margin-bottom: 1.1rem; font-size: .85rem; } .ticket-summary div { display: flex; justify-content: space-between; padding: .22rem 0; } .ticket-summary div span { color: var(--ink-3); } .ticket-summary div b { font-variant-numeric: tabular-nums; } /* Progress bar */ .progress { height: 7px; background: var(--line-soft); border-radius: var(--radius-pill); overflow: hidden; } .progress i { display: block; height: 100%; background: var(--brand); border-radius: inherit; transition: width .4s var(--ease); } .progress.is-warn i { background: var(--warn); } .progress.is-danger i { background: var(--danger); } /* Prose (CMS pages) */ .prose { max-width: 68ch; color: var(--ink-2); line-height: 1.75; } .prose h3 { color: var(--ink); margin: 2rem 0 .6rem; font-size: 1.16rem; } .prose h3:first-child { margin-top: 0; } .prose ul, .prose ol { padding-left: 1.3rem; margin-bottom: 1rem; } .prose li { margin-bottom: .4rem; } .prose .note { background: var(--warn-soft); border-left: 3px solid var(--warn); padding: .95rem 1.15rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .89rem; color: color-mix(in srgb, var(--warn) 88%, var(--ink)); } /* -------------------------------------------------------------------------- 16. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1080px) { .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; } .footer-top { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 960px) { .app { grid-template-columns: 1fr; } .side { position: fixed; inset: 0 auto 0 0; width: 270px; z-index: 200; transform: translateX(-100%); transition: transform .25s var(--ease); box-shadow: var(--shadow-lg); } .side.is-open { transform: none; } /* The bottom bar replaces the topbar burger rather than joining it — two controls opening the same drawer is one too many on a phone. Scoped to the app shell so the public site's own burger is untouched. */ .app .nav-burger { display: none; } .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; inset: auto 0 0 0; z-index: 160; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); } .tab-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 58px; padding: .5rem .2rem; background: none; border: 0; cursor: pointer; color: var(--ink-3); font-size: .68rem; font-weight: 600; font-family: inherit; letter-spacing: .01em; text-align: center; /* A label that wraps makes its own tab taller than the rest and knocks every icon in the bar out of line. Keep them on one line. */ white-space: nowrap; overflow: hidden; min-width: 0; } .tab-link:hover { color: var(--brand); text-decoration: none; } .tab-link.is-active { color: var(--brand); } .tab-link svg { opacity: .9; } .tab-link .count { position: absolute; transform: translate(14px, -8px); font-size: .62rem; font-weight: 700; line-height: 1; background: var(--danger); color: #fff; padding: .15rem .35rem; border-radius: var(--radius-pill); } /* Nothing useful may sit under the bar — the last row of a table and the submit button at the foot of a form both land exactly there. */ .content { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 1.75rem); } } @media (max-width: 860px) { .nav-burger { display: grid; order: 3; } .nav { position: fixed; inset: var(--nav-h) 0 auto; flex-direction: column; align-items: stretch; gap: 0; height: auto; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; background: var(--surface); border-bottom: 1px solid var(--line); padding: .75rem 1.25rem 1.5rem; box-shadow: var(--shadow-lg); display: none; } .nav.is-open { display: flex; } .nav-item { height: auto; flex-direction: column; align-items: stretch; } .nav-link { padding: .85rem .5rem; font-size: 1rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; } .nav-link .chev { margin-left: auto; } .mega { position: static; translate: none; opacity: 1; visibility: visible; min-width: 0; grid-template-columns: 1fr; box-shadow: none; border: 0; border-radius: 0; padding: .35rem 0 .75rem 1rem; display: none; background: transparent; } .nav-item.is-open .mega { display: grid; } .nav-actions { margin-left: auto; } .nav-actions .btn-ghost { display: none; } .nav-actions .btn-apk { display: inline-flex; } /* Only one account button fits beside the logo, the APK button, the theme toggle and the burger. Sign in is the one returning clients come for, so it keeps the slot and Open Account moves into the menu, where it is the last item and full width. */ .nav-actions .nav-signin { display: inline-flex; } .nav-actions .nav-signup { display: none; } .nav-signup-mobile { display: block; padding: .85rem .5rem .35rem; } .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { /* The site header now carries a Download APK button beside the account CTA, the theme toggle and the burger. Everything in the row tightens so it fits a 360px phone — it was already a shade too wide for one, and the extra button would have pushed the whole page sideways. */ .btn-apk .apk-long { display: none; } .site-header .wrap { gap: .6rem; } .site-header .brand-logo-text { font-size: 1.05rem; } .site-header .brand-logo-img { height: 28px; } .nav-actions { gap: .4rem; } .nav-actions .btn { padding: .45rem .75rem; font-size: .8rem; } .nav-actions .theme-toggle { width: 32px; height: 32px; } .wrap, .wrap-narrow { width: calc(100% - 2rem); } .field-row { grid-template-columns: 1fr; } .tier-meta { grid-template-columns: 1fr 1fr; } .content { padding: 1.15rem; padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 1.15rem); } /* The topbar carries the page title, the account switcher, the Download APK button, the theme toggle and the avatar. It was already wider than a phone before the APK button joined it, so the two things repeated elsewhere give way: the account number, which the Balance card shows anyway, and below 480 the title, which every page prints again at the top of its own content. */ .topbar { padding: 0 1.15rem; gap: .6rem; } .topbar h1 { font-size: 1rem; } .acct-switch { gap: .5rem; padding: .45rem .7rem; font-size: .82rem; } .acct-switch .small { display: none; } .auth-card { padding: 1.6rem; } .step-label { display: none; } .hero-trust { gap: 1.25rem; } .footer-top { grid-template-columns: 1fr; gap: 2rem; } .card, .tier { padding: 1.3rem; } } /* Small phones: the site header has five things to fit across 360px, so the APK button drops to its icon and the rest tightens a little more. The button keeps its accessible name, and the full "Download APK" label comes back as soon as there is room for it. */ @media (max-width: 480px) { .topbar h1 { display: none; } .site-header .wrap { gap: .45rem; } .site-header .brand-logo-text { font-size: .95rem; } .nav-actions { gap: .3rem; } .nav-actions .btn { padding: .42rem .65rem; font-size: .78rem; } /* Icon only, in every header — the topbar is as tight as the site header once the account switcher is in it. */ .btn-apk { padding: .42rem .5rem; } .btn-apk > span { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media print { .site-header, .site-footer, .side, .tabbar, .topbar, .ticker, .btn { display: none !important; } body { background: #fff; } }