/* Figtree, self-hosted. One variable woff2 covers 400-800 weight, so the pages make zero third-party requests and nothing blocks on a DNS + TLS handshake to fonts.googleapis.com on a cellular connection. */ @font-face{ font-family:'Figtree'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/assets/fonts/figtree-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } /* ============================================================ Invo landers — shared design system Mirrors invoapp.com: Figtree, sky-blue gradient, frosted glass cards, white rounded pills. Mobile-first, no scroll effects. ============================================================ */ :root{ color-scheme:light; /* blocks Android WebView force-dark inverting the page */ /* sky — sampled from invoapp.com hero */ --sky-top:#1a5aa6; --sky-deep:#2a7cc8; --sky-mid:#3592d8; --sky-low:#41a3e0; --sky-pale:#4cb0e7; --cloud:#cfe4f6; --ink:#0d1b2a; --ink-soft:#42576b; --white:#ffffff; --glass:rgba(255,255,255,.20); --glass-strong:rgba(255,255,255,.32); --glass-line:rgba(255,255,255,.44); --glass-solid:rgba(255,255,255,.92); --green:#14ca51; --red:#ff5640; --flame:#ff7a2f; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --pad:18px; --maxw:460px; --shadow-card:0 14px 36px rgba(6,32,62,.26); --shadow-cta:0 10px 26px rgba(8,42,80,.28); } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%;overscroll-behavior-y:none} body{ position:relative; font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--white); overflow-x:hidden; -webkit-font-smoothing:antialiased; background-repeat:no-repeat; background-color:var(--sky-mid); background-image: radial-gradient(38% 9% at 12% 3%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 70%), radial-gradient(30% 6% at 88% 7%, rgba(255,255,255,.46) 0%, rgba(255,255,255,0) 72%), radial-gradient(44% 7% at 78% 21%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 74%), radial-gradient(36% 6% at 8% 38%, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 74%), radial-gradient(50% 8% at 92% 56%, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 76%), radial-gradient(42% 7% at 16% 74%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 76%), radial-gradient(150% 14% at 50% 101%, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 70%), linear-gradient(180deg, var(--sky-top) 0%, var(--sky-deep) 18%, var(--sky-mid) 45%, var(--sky-low) 74%, var(--sky-pale) 100%); } /* The sky lives on , not on a child div. With no background on , body's background propagates to the canvas: it paints the full document height AND both overscroll areas, so there is no seam at the bottom and no white flash on an iOS rubber-band pull. It is one continuous gradient down the whole page rather than a fixed layer repeating the same ramp on every screenful, which is what made a long page read flat. Cloud banks are placed by document percentage so each section gets its own piece of sky. */ .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 120px} /* ---------- top bar ---------- */ .bar{ display:flex;align-items:center;justify-content:space-between;gap:10px; margin:12px auto 0;padding:9px 10px 9px 12px; background:linear-gradient(160deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.15) 100%);border:1px solid var(--glass-line); border-radius:var(--r-md); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); box-shadow:0 6px 20px rgba(8,38,72,.16), inset 0 1px 0 rgba(255,255,255,.38); } .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.2px} .brand img{width:28px;height:28px;border-radius:8px;display:block} .bar .mini{ font-size:13.5px;font-weight:700;color:var(--ink); background:var(--white);padding:8px 15px;border-radius:999px; border:0;font-family:inherit;cursor:pointer; } /* ---------- type ---------- */ h1{font-size:34px;line-height:1.08;font-weight:800;letter-spacing:-1px} h2{font-size:22px;line-height:1.18;font-weight:800;letter-spacing:-.5px} h3{font-size:16px;font-weight:700;letter-spacing:-.2px} .sub{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.93);font-weight:400} .eyebrow{ display:inline-flex;align-items:center;gap:7px; font-size:12.5px;font-weight:600;color:rgba(255,255,255,.95); background:var(--glass);border:1px solid var(--glass-line); padding:6px 13px 6px 7px;border-radius:999px; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .section-label{ font-size:11.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase; color:rgba(255,255,255,.82); } /* ---------- avatar stack ---------- */ .stack{display:flex;align-items:center} .stack img{ width:24px;height:24px;border-radius:50%;object-fit:cover; border:2px solid rgba(255,255,255,.9);margin-left:-8px;display:block; } .stack img:first-child{margin-left:0} /* ---------- glass card ---------- */ .card{ background:linear-gradient(160deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.15) 100%); border:1px solid var(--glass-line); border-radius:var(--r-lg);padding:16px; backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1); box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.42); } .card--solid{background:var(--glass-solid);color:var(--ink);border-color:rgba(255,255,255,.7)} .card--solid .sub{color:var(--ink-soft)} /* ---------- trader card (mirrors the app feed) ---------- */ .trader{display:flex;flex-direction:column;gap:11px} .trader-top{display:flex;align-items:center;gap:10px} .trader-top img{width:38px;height:38px;border-radius:11px;object-fit:cover;display:block;flex:0 0 auto} .trader-id{flex:1;min-width:0} .trader-id .nm{font-size:15px;font-weight:700;line-height:1.2} .trader-id .hd{font-size:11.5px;color:rgba(255,255,255,.8);line-height:1.3;margin-top:1px} .streak{ display:inline-flex;align-items:center;gap:5px;flex:0 0 auto; font-size:13px;font-weight:800;letter-spacing:-.2px;color:#fff; background:linear-gradient(135deg,#ff9a3d 0%,#ff5f3a 100%); padding:7px 12px;border-radius:999px;white-space:nowrap; box-shadow:0 4px 14px rgba(255,95,58,.38); } .streak .n{font-size:15px;font-weight:800} /* small version for the compact leaderboard rows */ .streak-sm{ display:inline-flex;align-items:center;gap:3px; font-size:11px;font-weight:800;color:#fff; background:linear-gradient(135deg,#ff9a3d 0%,#ff5f3a 100%); padding:3px 8px;border-radius:999px;white-space:nowrap; vertical-align:middle;margin-left:6px; } .trader-note{font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.96)} .spark{display:block;width:100%;height:46px;overflow:visible} .spark path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .pos{ display:flex;align-items:center;justify-content:space-between;gap:10px; background:linear-gradient(160deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.12) 100%); border:1px solid rgba(255,255,255,.28); border-radius:var(--r-sm);padding:10px 12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.3); } .pos .pair{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700} .pos .lev{ font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:6px; background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.28); } .pos .amt{font-size:13px;font-weight:600;color:rgba(255,255,255,.9);margin-top:3px} .pos .pnl{text-align:right;font-size:11px;color:rgba(255,255,255,.82);font-weight:600} .pos .pnl b{display:block;font-size:15px;font-weight:800;margin-top:1px} .up{color:#d6ffe4} .down{color:#ffd9d3} /* ---------- what a $100 mimic would have returned ---------- */ .mimic-calc{ display:flex;align-items:center;justify-content:space-between;gap:10px; background:linear-gradient(135deg,rgba(20,202,81,.26) 0%,rgba(20,202,81,.13) 100%); border:1px solid rgba(150,255,190,.40); border-radius:var(--r-sm);padding:9px 12px; } .mimic-calc .lbl{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.92);line-height:1.3} .mimic-calc .val{ font-size:17px;font-weight:800;letter-spacing:-.4px;color:#d6ffe4; white-space:nowrap;flex:0 0 auto; } /* ---------- buttons ---------- */ .btn{ display:flex;align-items:center;justify-content:center;gap:8px;width:100%; font-family:inherit;font-size:16.5px;font-weight:700;letter-spacing:-.2px; padding:16px 20px;border-radius:14px;border:0;cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease; text-decoration:none; } .btn:active{transform:scale(.978)} .btn-primary{background:var(--white);color:var(--ink);box-shadow:var(--shadow-cta)} .btn-ghost{ background:rgba(255,255,255,.16);color:#fff; border:1px solid var(--glass-line); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .btn-mimic{ width:100%;background:rgba(255,255,255,.94);color:var(--ink); font-size:14px;font-weight:700;padding:11px;border-radius:11px;border:0; font-family:inherit;cursor:pointer; display:flex;align-items:center;justify-content:center;gap:7px; transition:transform .12s ease; } .btn-mimic:active{transform:scale(.978)} .btn-note{text-align:center;font-size:12px;color:rgba(255,255,255,.88);margin-top:9px;line-height:1.45} /* ---------- sticky CTA dock ---------- */ .dock{ position:fixed;left:0;right:0;bottom:0;z-index:40; padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(79,170,226,0) 0%,rgba(74,163,220,.90) 34%,rgba(74,163,220,.99) 100%); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .dock-inner{max-width:var(--maxw);margin:0 auto} .dock .btn{padding:15px 20px;position:relative;overflow:hidden;animation:dockPulse 2.9s ease-in-out infinite} /* the pulse owns `transform`, so tap feedback has to reclaim it explicitly */ .dock .btn:active{animation:none;transform:scale(.97)} /* gloss sweep. The button is white, so the sweep is a blue tint, not white */ .dock .btn::after{ content:"";position:absolute;top:0;left:-55%;width:42%;height:100%; background:linear-gradient(100deg,rgba(44,118,197,0),rgba(44,118,197,.16),rgba(44,118,197,0)); transform:skewX(-18deg);pointer-events:none; animation:dockShine 3.8s ease-in-out infinite; } @keyframes dockPulse{ 0%,100%{transform:scale(1); box-shadow:0 10px 26px rgba(8,42,80,.30)} 50% {transform:scale(1.022);box-shadow:0 16px 38px rgba(8,42,80,.46)} } @keyframes dockShine{ 0%,58%{left:-55%} 100% {left:135%} } .dock .tiny{ display:block;text-align:center;font-size:11px;color:rgba(255,255,255,.9); margin-top:7px;line-height:1.4; } /* ---------- availability glyphs (not buttons) ---------- */ .store-icons{ display:flex;align-items:center;justify-content:center;gap:14px; color:var(--ink-soft);opacity:.75; } .store-icons svg{width:19px;height:19px;flex:0 0 auto} .store-icons .sep{width:1px;height:16px;background:currentColor;opacity:.3} .store-icons .lbl{font-size:11.5px;font-weight:600;letter-spacing:.1px} /* ---------- store badges (legacy, unused) ---------- */ .stores{display:flex;gap:9px} .store{ flex:1;display:flex;align-items:center;justify-content:center;gap:7px; background:rgba(255,255,255,.16);border:1px solid var(--glass-line); border-radius:12px;padding:11px 8px; font-size:12.5px;font-weight:600;color:#fff; font-family:inherit;cursor:pointer; transition:transform .12s ease; } .store:active{transform:scale(.978)} .store svg{width:16px;height:16px;flex:0 0 auto} /* ---------- stat strip ---------- */ .stats{display:flex;gap:8px} .stat{ flex:1;text-align:center;padding:12px 6px; background:linear-gradient(160deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.14) 100%);border:1px solid var(--glass-line);border-radius:var(--r-md); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); box-shadow:0 6px 20px rgba(8,38,72,.16), inset 0 1px 0 rgba(255,255,255,.38); } .stat b{display:block;font-size:19px;font-weight:800;letter-spacing:-.5px;line-height:1.1} .stat span{display:block;font-size:10.5px;color:rgba(255,255,255,.86);margin-top:4px;font-weight:600;line-height:1.3} /* ---------- step list ---------- */ .steps{display:flex;flex-direction:column;gap:10px} .step{display:flex;gap:12px;align-items:flex-start} .step-n{ flex:0 0 auto;width:26px;height:26px;border-radius:50%; background:var(--white);color:var(--ink); font-size:13px;font-weight:800; display:flex;align-items:center;justify-content:center; } .step-b .t{font-size:15px;font-weight:700;line-height:1.3} .step-b .d{font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.89);margin-top:2px} /* ---------- footer ---------- */ .foot{margin-top:26px;text-align:center} .foot-links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin-bottom:12px} .foot-links a{font-size:12.5px;color:rgba(255,255,255,.93);text-decoration:none;font-weight:500} .risk{ font-size:10.5px;line-height:1.6;color:rgba(255,255,255,.82);text-align:left; background:rgba(8,42,80,.22);border:1px solid rgba(255,255,255,.24); border-radius:var(--r-sm);padding:12px 13px; } .risk b{color:rgba(255,255,255,.88);font-weight:700} /* ---------- no backdrop-filter (older in-app webviews) ---------- Without the blur, translucent panels lose most of their separation from the sky, so everything that relied on it gets opaque enough to read. */ @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ .bar,.eyebrow,.stat,.leaders,.rev,.proof-row{background:rgba(31,96,158,.72)} .card{background:rgba(31,96,158,.66)} .card--solid{background:rgba(255,255,255,.97)} .dock{background:#3f96d6} .trader .pos{background:rgba(255,255,255,.2)} } /* ---------- utilities ---------- */ .gap-8{display:flex;flex-direction:column;gap:8px} .gap-10{display:flex;flex-direction:column;gap:10px} .gap-12{display:flex;flex-direction:column;gap:12px} .gap-14{display:flex;flex-direction:column;gap:14px} .gap-18{display:flex;flex-direction:column;gap:18px} .gap-24{display:flex;flex-direction:column;gap:24px} .center{text-align:center} .mt-6{margin-top:6px}.mt-10{margin-top:10px}.mt-14{margin-top:14px} .mt-22{margin-top:22px}.mt-30{margin-top:30px} /* Desktop. The column stays a column (this is a phone-shaped page and stretching it would wreck the rhythm), but it gets room to breathe and the dock becomes a centred pill instead of a full-bleed bar. */ @media (min-width:768px){ :root{--maxw:520px} body{font-size:17px} h1{font-size:40px} h2{font-size:25px} .wrap{padding-bottom:150px} .bar{margin-top:22px} .dock{ background:none;backdrop-filter:none;-webkit-backdrop-filter:none; padding-bottom:22px;pointer-events:none; } .dock-inner{ pointer-events:auto; background:rgba(24,86,148,.55); border:1px solid rgba(255,255,255,.28); border-radius:20px;padding:10px 12px 8px; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 14px 40px rgba(6,32,62,.34); } } @media (max-width:360px){ :root{--pad:14px} h1{font-size:30px} .stat b{font-size:17px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} } /* ---------- compact leaderboard row (dense proof, low weight) ---------- */ .leaders{ background:linear-gradient(160deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.14) 100%);border:1px solid var(--glass-line); border-radius:var(--r-lg);padding:2px 14px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 6px 20px rgba(8,38,72,.16), inset 0 1px 0 rgba(255,255,255,.38); } .lrow{display:flex;align-items:center;gap:10px;padding:11px 0} .lrow + .lrow{border-top:1px solid rgba(255,255,255,.16)} .lrow img{width:32px;height:32px;border-radius:9px;object-fit:cover;display:block;flex:0 0 auto} .lrow .who{flex:1;min-width:0} .lrow .who b{display:flex;align-items:center;font-size:14px;font-weight:700;line-height:1.2} .lrow .who span{ display:block;font-size:11.5px;color:rgba(255,255,255,.82);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .lrow .res{text-align:right;flex:0 0 auto} .lrow .res b{display:block;font-size:15px;font-weight:800;line-height:1.1} .lrow .res span{display:block;font-size:11px;color:#d6ffe4;margin-top:2px;font-weight:700;white-space:nowrap} /* ---------- review quotes ---------- */ .rev{ background:linear-gradient(160deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.13) 100%);border:1px solid var(--glass-line); border-radius:var(--r-md);padding:13px 14px; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); box-shadow:0 6px 20px rgba(8,38,72,.16), inset 0 1px 0 rgba(255,255,255,.38); } .rev .stars{font-size:11.5px;letter-spacing:1.5px;color:#ffd76a;line-height:1} .rev p{font-size:13.5px;line-height:1.5;margin-top:7px;color:rgba(255,255,255,.97)} .rev .by{font-size:11.5px;color:rgba(255,255,255,.78);margin-top:7px;font-weight:600} /* ---------- trust chips ---------- */ .chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center} .chips span{ font-size:11.5px;font-weight:600;padding:7px 12px;border-radius:999px; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24); color:rgba(255,255,255,.92); }