/* cro.trade landing page v2 — Axiom/Phantom clean-but-playful direction.
Depth via dot-grid + soft glows, bento feature grid, prominent product.
Relies on tokens from styles.css. */
/* Two faces the shared tokens do not carry, declared here because only this
page uses them: Archivo for the stop headings and JetBrains Mono for their
counter and label. Both are loaded in index.html; the stacks below are what
render if the request never lands. */
:root {
--font-display: Archivo, 'Helvetica Neue', Arial, sans-serif;
--font-mono-ui: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-sans);
overflow-x: clip;
}
a { color: inherit; }
/* ===== global depth layer ================================================ */
.lp-wrap { position: relative; width: 100%; overflow-x: clip; isolation: isolate; }
.lp-bg {
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(60% 42% at 50% -4%, rgba(16,153,250,0.20), transparent 70%),
radial-gradient(48% 38% at 82% 8%, rgba(0,78,146,0.16), transparent 70%),
radial-gradient(50% 40% at 12% 18%, rgba(0,45,116,0.14), transparent 72%),
#000;
}
.lp-bg::before { /* dot grid */
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.4px);
background-size: 30px 30px;
-webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 62%);
mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 62%);
opacity: 0.7;
}
.lp-container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--page-padding); }
/* ===== header ============================================================ */
.lp-header {
position: sticky; top: 0; z-index: 50;
background: rgba(6,7,9,0.6);
-webkit-backdrop-filter: var(--blur-glass);
backdrop-filter: var(--blur-glass);
border-bottom: 1px solid var(--glass-border);
}
.lp-header-inner {
max-width: var(--content-max); margin: 0 auto;
height: 66px; padding: 0 var(--page-padding);
display: flex; align-items: center; gap: 28px;
}
.lp-logo-link { text-decoration: none; display: inline-flex; }
.lp-nav { display: flex; gap: 6px; margin-left: 16px; }
.lp-nav-link {
font-size: 14px; font-weight: 500; color: var(--text-secondary);
text-decoration: none; padding: 7px 12px; border-radius: 9px;
transition: color var(--dur-base) ease, background var(--dur-base) ease;
}
.lp-nav-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.lp-header-cta { margin-left: auto; }
/* ===== hero ============================================================== */
.lp-hero { position: relative; padding: 72px var(--page-padding) 8px; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* king mascot — the centerpiece */
.lp-hero-king { position: relative; display: flex; justify-content: center; margin: 4px auto 30px; }
.lp-hero-king-glow {
position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%);
width: 130%; height: 130%; z-index: 0; pointer-events: none;
background: radial-gradient(46% 46% at 50% 46%, rgba(16,153,250,0.55), rgba(0,45,116,0.20) 54%, transparent 72%);
filter: blur(18px);
}
.lp-hero-king-img {
position: relative; z-index: 1;
width: clamp(260px, 30vw, 400px); height: auto; display: block;
filter: drop-shadow(0 30px 50px rgba(0,4,40,0.65)) drop-shadow(0 8px 18px rgba(0,0,0,0.5));
animation: cro-float 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .lp-hero-king-img { animation: none; } }
.lp-hero-inner {
position: relative; z-index: 1;
max-width: 880px; margin: 0 auto; text-align: center;
display: flex; flex-direction: column; align-items: center;
}
.lp-hero-badge { margin-bottom: 28px; }
.lp-hero-title {
margin: 0; font-size: clamp(50px, 7.6vw, 92px); font-weight: 800;
line-height: 0.98; letter-spacing: -0.04em; color: var(--text-bright);
text-wrap: balance;
}
.lp-hero-title-accent { color: var(--primary-blue); }
.lp-hero-sub {
margin: 28px 0 0; font-size: clamp(16px, 1.5vw, 19px);
color: var(--text-secondary); max-width: 540px; line-height: 1.55;
}
.lp-hero-actions { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
.lp-hero-note { margin-top: 20px; font-size: 13px; color: var(--text-tertiary); display: flex; align-items: center; gap: 8px; }
.lp-hero-note svg { color: var(--buy-green); }
.lp-marquee {
position: relative; z-index: 1; margin-top: 100px;
border-top: 1px solid var(--glass-border);
border-bottom: 1px solid var(--glass-border);
padding: 24px 0; background: rgba(255,255,255,0.015);
}
/* ===== section heads ===================================================== */
.lp-section-head { text-align: center; margin: 0 auto 56px; max-width: 660px; }
.lp-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--primary-blue); margin-bottom: 16px;
}
.lp-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--primary-blue); opacity: 0.6; }
.lp-eyebrow::after { content: ""; width: 18px; height: 1px; background: var(--primary-blue); opacity: 0.6; }
.lp-section-title {
margin: 0; font-size: clamp(30px, 4vw, 46px); font-weight: 800;
letter-spacing: -0.03em; color: var(--text-bright); line-height: 1.05;
text-wrap: balance;
}
.lp-section-sub { margin: 16px auto 0; font-size: 16px; color: var(--text-secondary); max-width: 480px; line-height: 1.5; }
/* ===== assets band ("everything's tradeable") =========================== */
.lp-assets { max-width: var(--content-max); margin: 0 auto; padding: 150px var(--page-padding) 0; }
.lp-assets .lp-section-head { margin-bottom: 44px; }
.lp-assets-rows {
position: relative; display: flex; flex-direction: column; gap: 8px;
padding: 12px 0;
}
/* ===== bento feature grid ================================================ */
.lp-features { max-width: var(--content-max); margin: 0 auto; padding: 150px var(--page-padding) 0; }
.lp-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento {
position: relative; overflow: hidden; border-radius: var(--radius);
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
border: 1px solid var(--glass-border);
padding: 26px;
transition: border-color var(--dur-base) ease, transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease;
display: flex; flex-direction: column;
}
.bento:hover { transform: translateY(-4px); border-color: var(--glass-border-active); box-shadow: 0 18px 50px -20px rgba(16,153,250,0.45); }
.bento::after { /* soft top glow */
content: ""; position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
width: 70%; height: 100%; background: radial-gradient(ellipse at center, rgba(16,153,250,0.10), transparent 70%);
pointer-events: none; opacity: 0; transition: opacity var(--dur-base) ease;
}
.bento:hover::after { opacity: 1; }
.bento-trade { grid-column: span 3; }
.bento-perps { grid-column: span 3; }
.bento-predict, .bento-social, .bento-launch { grid-column: span 2; }
.bento-rewards { grid-column: span 6; }
.bento-head { display: flex; align-items: center; gap: 12px; }
.bento-icon {
width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 20px;
background: rgba(16,153,250,0.12); border: 1px solid rgba(16,153,250,0.28); color: var(--primary-blue);
}
.bento-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-bright); text-transform: lowercase; }
.bento-desc { margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); max-width: 34ch; }
.bento-visual { margin-top: auto; padding-top: 22px; }
/* trade — big live chart */
.bento-chart { width: 100%; height: 120px; display: block; }
.bento-chart-row { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.bento-chart-price { font: 700 22px var(--font-mono); color: var(--text-bright); }
/* perps */
.bento-perps-stat { display: flex; gap: 26px; margin-top: 14px; }
.bento-perps-stat div { display: flex; flex-direction: column; gap: 3px; }
.bento-perps-stat span { font: 600 11px var(--font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); }
.bento-perps-stat b { font: 700 18px var(--font-mono); color: var(--text-primary); }
.bento-perps-stat .pos { color: var(--buy-green); }
/* predict */
.bento-predict-bars { display: flex; flex-direction: column; gap: 9px; }
.bento-pr-row { display: flex; align-items: center; gap: 10px; font: 600 12px var(--font-sans); color: var(--text-secondary); }
.bento-pr-row > span:first-child { width: 26px; }
.bento-pr-row b { width: 36px; text-align: right; font-family: var(--font-mono); color: var(--text-primary); }
.bento-pr-track { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.bento-pr-track > div { height: 100%; border-radius: 4px; }
/* social */
.bento-avatars { display: flex; }
.bento-av { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #08090b; margin-left: -9px; }
.bento-av:first-child { margin-left: 0; }
.bento-av-more { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1) !important; font: 700 10px var(--font-mono); color: var(--text-primary); }
/* launchpads */
.bento-launch-row { display: flex; gap: 10px; }
.bento-launch-row img { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--glass-border); }
/* rewards banner */
.bento-rewards { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px;
background: linear-gradient(110deg, rgba(16,153,250,0.14), rgba(255,255,255,0.012) 55%); }
.bento-rewards .bento-desc { max-width: 46ch; }
.bento-rewards-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.bento-season { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bento-season b { font: 800 30px var(--font-mono); color: var(--text-bright); letter-spacing: -0.02em; }
.bento-season span { font: 600 11px var(--font-sans); text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); }
/* ===== product showcase ================================================== */
.lp-showcase { max-width: 1080px; margin: 0 auto; padding: 160px var(--page-padding) 0; }
.lp-showcase-frame { position: relative; }
.lp-showcase-frame::before { /* glow bed under window */
content: ""; position: absolute; inset: 6% -6% -10% -6%;
background: radial-gradient(60% 70% at 50% 30%, rgba(16,153,250,0.30), transparent 70%);
filter: blur(20px); pointer-events: none; z-index: 0;
}
.tv-window { position: relative; z-index: 1; border-radius: 18px; overflow: hidden;
border: 1px solid var(--glass-border-active);
box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.10);
background: #07080a; }
.tv-chrome { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--glass-border); background: rgba(255,255,255,0.02); }
.tv-dot { width: 11px; height: 11px; border-radius: 50%; }
.tv-chrome-title { margin-left: 12px; font: 500 12px var(--font-sans); color: var(--text-tertiary); }
.tv-chrome-spacer { flex: 1; }
.tv-chrome-pill { font: 600 11px var(--font-sans); color: var(--text-secondary); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); }
.tv { position: relative; }
.tv-top {
display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 24px;
padding: 16px 22px; border-bottom: 1px solid var(--glass-border);
}
.tv-token { display: flex; align-items: center; gap: 11px; }
.tv-token-mark { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-blue), var(--cro-blue)); display: flex; align-items: center; justify-content: center; font: 800 16px var(--font-sans); color: #fff; }
.tv-token-name { font: 700 16px var(--font-sans); color: var(--text-bright); }
.tv-token-name span { color: var(--text-tertiary); font-weight: 500; }
.tv-token-cap { font: 500 11px var(--font-sans); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.tv-price { display: flex; align-items: center; gap: 10px; }
.tv-price-now { font: 700 20px var(--font-mono); color: var(--text-bright); }
.tv-stats { display: flex; gap: 26px; justify-self: end; }
.tv-stats div { display: flex; flex-direction: column; gap: 2px; }
.tv-stats span { font: 500 10px var(--font-sans); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
.tv-stats b { font: 600 13px var(--font-mono); color: var(--text-secondary); }
.tv-intervals { display: flex; gap: 2px; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); border-radius: 10px; padding: 3px; }
.tv-iv { border: none; background: transparent; color: var(--text-secondary); font: 600 12px var(--font-sans); padding: 6px 11px; border-radius: 7px; cursor: pointer; transition: all var(--dur-base) ease; }
.tv-iv:hover { color: var(--text-primary); }
.tv-iv-on { background: rgba(255,255,255,0.10); color: #fff; }
.tv-body { display: grid; grid-template-columns: 1fr 280px; }
.tv-main { padding: 22px; border-right: 1px solid var(--glass-border); }
.tv-chart { width: 100%; height: 280px; }
.tv-chart-svg { width: 100%; height: 100%; }
.tv-side { display: flex; flex-direction: column; }
.tv-ob { padding: 16px 18px; border-bottom: 1px solid var(--glass-border); }
.tv-ob-head { display: flex; justify-content: space-between; font: 500 10px var(--font-sans); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.tv-ob-row { position: relative; display: flex; justify-content: space-between; font: 500 12px var(--font-mono); padding: 3px 6px; }
.tv-ob-row span:last-child { color: var(--text-secondary); }
.tv-ob-depth { position: absolute; right: 0; top: 0; bottom: 0; border-radius: 3px; }
.tv-ob-mid { display: flex; align-items: center; gap: 6px; font: 700 14px var(--font-mono); color: var(--buy-green); padding: 7px 6px; }
.tv-trade { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.tv-bs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tv-bs-btn { border: none; border-radius: 10px; padding: 11px; font: 700 13px var(--font-sans); cursor: pointer; text-transform: lowercase; }
.tv-bs-buy { background: var(--buy-gradient); color: #fff; }
.tv-bs-sell { background: rgba(239,68,68,0.12); color: var(--sell-red); }
.tv-amount, .tv-lev { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); border-radius: 10px; }
.tv-amount span, .tv-lev span { font: 500 12px var(--font-sans); color: var(--text-tertiary); }
.tv-amount b, .tv-lev b { font: 600 14px var(--font-mono); color: var(--text-primary); }
.tv-amount em { font-style: normal; color: var(--text-tertiary); font-size: 11px; }
.tv-confirm { border: none; border-radius: 10px; padding: 13px; background: var(--primary-blue); color: #fff; font: 700 14px var(--font-sans); cursor: pointer; box-shadow: var(--shadow-accent); transition: background var(--dur-base) ease; }
.tv-confirm:hover { background: var(--primary-blue-hover); }
/* ===== footer ============================================================ */
.lp-footer { margin-top: 56px; border-top: 1px solid var(--glass-border); padding: 36px var(--page-padding) 28px; }
.lp-footer-inner { max-width: var(--content-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; flex-wrap: wrap; }
.lp-footer-left { display: flex; flex-direction: column; gap: 20px; }
.lp-qr { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.lp-qr-svg { display: block; border-radius: 22px; box-shadow: 0 18px 40px -24px rgba(16,153,250,0.5); }
.lp-footer-cols { display: flex; gap: clamp(40px, 6vw, 96px); flex-wrap: wrap; padding-top: 4px; }
.lp-fcol { display: flex; flex-direction: column; gap: 15px; }
.lp-fcol h4 { margin: 0 0 3px; font-size: 14px; font-weight: 600; color: var(--text-bright); }
.lp-fcol a { font-size: 13.5px; color: var(--text-tertiary); text-decoration: none; transition: color var(--dur-base) ease; }
.lp-fcol a:hover { color: var(--text-primary); }
.lp-fcopy { display: flex; flex-direction: column; gap: 14px; padding-top: 36px; text-align: right; margin-left: auto; }
.lp-fcopy span { font-size: 13.5px; color: var(--text-tertiary); }
.lp-fcopy span:first-child { color: var(--text-secondary); }
/* ===== scroll reveal ===================================================== */
.lp-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.lp-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lp-reveal { opacity: 1; transform: none; transition: none; } }
/* ===== mobile gate (disabled — landing is now fully responsive) ========= */
.lp-mobile-gate { display: none !important; }
@media (max-width: 1040px) {
.lp-nav { display: none; }
.tv-stats { display: none; }
}
@media (max-width: 820px) {
.lp-bento { grid-template-columns: repeat(2, 1fr); }
.bento-trade, .bento-perps { grid-column: span 2; }
.bento-predict, .bento-social, .bento-launch { grid-column: span 1; }
.bento-rewards { grid-column: span 2; }
}
/* ========================================================================
v3 premium overhaul — hero shot · features · mobile showcase
======================================================================== */
/* ----- hero: inner mark + wordmark ----- */
.lp-hero-emblem {
position: relative; width: clamp(240px, 30vw, 380px); margin: 24px auto 0;
animation: cro-float 7s ease-in-out infinite;
}
.lp-hero-emblem::before {
content: ""; position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%);
width: 150%; height: 150%; z-index: -1;
background: radial-gradient(46% 46% at 50% 50%, rgba(16,153,250,0.55), rgba(0,45,116,0.18) 55%, transparent 72%);
filter: blur(8px);
}
.lp-mark { display: block; width: 100%; height: auto; overflow: visible; }
.lp-mark-body {
filter:
drop-shadow(0 2px 0 rgba(255,255,255,0.35))
drop-shadow(0 -1px 0 rgba(255,255,255,0.25))
drop-shadow(0 18px 22px rgba(0,4,40,0.65))
drop-shadow(0 44px 60px rgba(0,0,0,0.55));
}
.lp-mark-core { filter: drop-shadow(0 0 26px rgba(16,153,250,0.9)); }
@media (prefers-reduced-motion: reduce) { .lp-hero-emblem { animation: none; } }
@keyframes cro-float {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
.lp-wordmark {
margin: 18px 0 0; font-weight: 800; letter-spacing: -0.05em; line-height: 1;
font-size: clamp(58px, 11vw, 132px);
background: linear-gradient(180deg, #ffffff 0%, #eaf0f6 38%, #b7c2d0 72%, #93a0b1 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
text-shadow:
0 1px 0 rgba(255,255,255,0.4),
0 2px 1px rgba(0,0,0,0.5),
0 8px 24px rgba(0,4,40,0.6);
filter: drop-shadow(0 14px 40px rgba(16,153,250,0.28));
}
.lp-wordmark-dot { color: transparent; -webkit-text-fill-color: var(--primary-blue); }
.lp-hero-shot { position: relative; z-index: 1; max-width: 1120px; margin: 84px auto 0; padding: 0 var(--page-padding); }
.lp-hero-shot::before {
content: ""; position: absolute; inset: -8% 2% 10% 2%; z-index: -1;
background: radial-gradient(58% 64% at 50% 18%, rgba(16,153,250,0.34), transparent 72%);
filter: blur(34px);
}
.lp-browser {
border-radius: 16px; overflow: hidden;
border: 1px solid var(--glass-border-active); background: #07080a;
box-shadow: 0 60px 120px -42px rgba(0,0,0,0.92), 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.10);
}
.lp-browser-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--glass-border); background: rgba(255,255,255,0.02); }
.lp-browser-dot { width: 11px; height: 11px; border-radius: 50%; }
.lp-browser-url { margin-left: 14px; font: 500 12px var(--font-mono); color: var(--text-tertiary); background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); border-radius: 7px; padding: 5px 16px; }
.lp-browser-shot { display: block; width: 100%; height: auto; }
/* ----- features (premium cards, no fake data) ----- */
.lp-features { max-width: var(--content-max); margin: 0 auto; padding: 168px var(--page-padding) 0; }
.lp-feats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.feat {
position: relative; overflow: hidden; border-radius: 20px; padding: 32px;
display: flex; flex-direction: column; gap: 22px;
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
border: 1px solid var(--glass-border);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.feat::after {
content: ""; position: absolute; top: -45%; left: -12%; width: 62%; height: 90%; pointer-events: none;
background: radial-gradient(ellipse at center, rgba(16,153,250,0.22), transparent 70%);
opacity: 0; transition: opacity var(--dur-base) ease;
}
.feat:hover { transform: translateY(-6px); border-color: var(--glass-border-active); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 34px 76px -34px rgba(16,153,250,0.5); }
.feat:hover::after { opacity: 1; }
.feat-icon {
width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: var(--primary-blue);
background: rgba(16,153,250,0.13);
border: 1px solid rgba(16,153,250,0.34);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 26px -12px rgba(16,153,250,0.6);
}
.feat-body { margin-top: auto; }
.feat-title { margin: 0; font: 800 26px var(--font-sans); letter-spacing: -0.02em; color: var(--text-bright); text-transform: lowercase; }
.feat-desc { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--text-secondary); max-width: 38ch; }
.feat-trade, .feat-perps { grid-column: span 3; }
.feat-predict, .feat-social, .feat-launch { grid-column: span 2; }
.feat-rewards {
grid-column: span 6; flex-direction: row; align-items: center; gap: 26px;
background: linear-gradient(110deg, rgba(16,153,250,0.16), rgba(255,255,255,0.015) 56%);
}
.feat-rewards .feat-body { margin-top: 0; flex: 1; }
.feat-rewards .feat-desc { max-width: 64ch; }
.feat-rewards-tag { flex-shrink: 0; }
/* ----- mobile showcase ----- */
.lp-showcase { max-width: var(--content-max); margin: 0 auto; padding: 176px var(--page-padding) 0; }
.lp-showcase-grid { display: grid; grid-template-columns: 1fr 360px; gap: 72px; align-items: center; }
.lp-showcase-copy { max-width: 480px; }
.lp-showcase-copy .lp-eyebrow { margin-bottom: 18px; }
.lp-showcase-list { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.lp-showcase-list li { display: flex; align-items: center; gap: 13px; font-size: 15px; color: var(--text-primary); }
.lp-tick { width: 27px; height: 27px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--buy-green); background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.28); }
.lp-showcase-actions { margin-top: 34px; }
.lp-phone { position: relative; display: flex; justify-content: center; }
.lp-phone::before { content: ""; position: absolute; inset: -12% -22%; background: radial-gradient(50% 50% at 50% 38%, rgba(16,153,250,0.30), transparent 70%); filter: blur(32px); z-index: 0; }
.lp-phone-frame {
position: relative; z-index: 1; width: 326px; border-radius: 46px; padding: 12px;
background: linear-gradient(160deg, #1b1d22, #070809);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 56px 110px -34px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.14);
}
.lp-phone-notch { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 116px; height: 26px; border-radius: 14px; background: #000; z-index: 2; }
.lp-phone-shot { display: block; width: 100%; height: auto; border-radius: 34px; }
.lp-phone-img { position: relative; z-index: 1; width: clamp(280px, 30vw, 340px); height: auto; filter: drop-shadow(0 48px 90px rgba(0,0,0,0.75)); }
@media (max-width: 960px) {
.lp-feats { grid-template-columns: repeat(2, 1fr); }
.feat-trade, .feat-perps, .feat-predict, .feat-social, .feat-launch { grid-column: span 1; }
.feat-rewards { grid-column: span 2; flex-direction: column; align-items: flex-start; }
.lp-showcase-grid { grid-template-columns: 1fr; gap: 52px; justify-items: center; }
.lp-showcase-copy { max-width: 520px; text-align: center; }
.lp-showcase-copy .lp-section-title, .lp-showcase-copy .lp-section-sub { text-align: center !important; }
.lp-showcase-list { align-items: flex-start; display: inline-flex; }
}
/* ========================================================================
v4 — mascot pillars (replaces fake-data bento)
======================================================================== */
.lp-pillars { max-width: var(--content-max); margin: 0 auto; padding: 150px var(--page-padding) 0; }
.lp-pillars .lp-section-head { margin-bottom: 48px; }
.lp-pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pillar {
position: relative; overflow: hidden; border-radius: 24px;
min-height: 440px; padding: 30px 30px 0;
display: flex; flex-direction: column;
background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012));
border: 1px solid var(--glass-border);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.pillar:hover { transform: translateY(-6px); border-color: var(--glass-border-active);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 40px 80px -36px rgba(16,153,250,0.55); }
.pillar-glow {
position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%);
width: 90%; height: 70%; z-index: 0; pointer-events: none; opacity: 0.55;
background: radial-gradient(60% 60% at 50% 80%, rgba(16,153,250,0.34), transparent 72%);
filter: blur(10px); transition: opacity var(--dur-base) ease;
}
.pillar:hover .pillar-glow { opacity: 1; }
.pillar-copy { position: relative; z-index: 2; }
.pillar-eyebrow {
display: inline-block; font: 600 11px var(--font-sans); letter-spacing: 0.14em;
text-transform: uppercase; color: var(--primary-blue); margin-bottom: 10px;
}
.pillar-title { margin: 0; font: 800 30px var(--font-sans); letter-spacing: -0.03em; color: var(--text-bright); text-transform: lowercase; }
.pillar-desc { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-secondary); max-width: 30ch; }
.pillar-art { position: relative; z-index: 1; margin-top: auto; display: flex; justify-content: center; align-items: flex-end; min-height: 230px; }
.pillar-art img {
width: auto; height: 360px; max-width: 108%; object-fit: contain; object-position: bottom; display: block;
filter: drop-shadow(0 30px 44px rgba(0,0,0,0.6));
transition: transform var(--dur-base) var(--ease-out);
}
.pillar:hover .pillar-art img { transform: translateY(-6px) scale(1.03); }
/* native USDC banner */
.pillar-banner {
position: relative; overflow: hidden; border-radius: 24px; margin-top: 18px;
display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: end; gap: 24px;
padding: 44px 44px 0;
background: linear-gradient(110deg, rgba(16,153,250,0.18), rgba(255,255,255,0.015) 58%);
border: 1px solid var(--glass-border-active);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.pillar-banner-glow {
position: absolute; right: 8%; bottom: -20%; width: 50%; height: 120%; z-index: 0; pointer-events: none;
background: radial-gradient(50% 50% at 60% 60%, rgba(16,153,250,0.4), transparent 70%); filter: blur(24px);
}
.pillar-banner-copy { position: relative; z-index: 2; padding-bottom: 44px; align-self: center; }
.pillar-banner-title { margin: 0; font: 800 clamp(28px, 3vw, 40px) var(--font-sans); letter-spacing: -0.03em; color: var(--text-bright); line-height: 1.04; text-transform: lowercase; }
.pillar-banner .pillar-desc { max-width: 44ch; font-size: 16px; }
.pillar-banner-art { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; }
.pillar-banner-art img {
width: auto; height: 380px; max-width: 100%; object-fit: contain; object-position: bottom; display: block;
filter: drop-shadow(0 36px 50px rgba(0,0,0,0.6));
}
@media (max-width: 900px) {
.lp-pillar-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
.pillar { min-height: 400px; }
.pillar-banner { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 40px 28px 0; }
.pillar-banner-copy { padding-bottom: 0; }
.pillar-banner .pillar-desc { margin-left: auto; margin-right: auto; }
}
/* ========================================================================
v5 — scroll-scrub video hero + king CTA
======================================================================== */
.vh-scrub { position: relative; height: 360vh; } /* scroll distance drives the scrub */
.vh-sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; background: #000; }
.vh-head {
flex: none; z-index: 2;
padding: clamp(78px, 12vh, 110px) var(--page-padding) 4px;
max-width: 820px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.vh-stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.vh-stage-glow {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: min(78vh, 92%); height: min(78vh, 92%); z-index: 0; pointer-events: none;
background: radial-gradient(46% 46% at 50% 50%, rgba(16,153,250,0.34), transparent 70%); filter: blur(26px);
}
.vh-video {
position: relative; z-index: 1; height: 62%; aspect-ratio: 1 / 1;
max-width: 78vw; max-height: 62vh;
object-fit: contain; object-position: center; will-change: contents;
image-rendering: -webkit-optimize-contrast;
}
.vh-copy { display: none; }
.vh-badge {
display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px;
border-radius: var(--radius-pill); font-size: 12px; font-weight: 600;
background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border);
-webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
}
.vh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-blue); box-shadow: 0 0 10px var(--primary-blue); }
.vh-title { margin: 0; font-size: clamp(30px, 4.6vw, 60px); font-weight: 800; line-height: 1.0; letter-spacing: -0.035em; color: var(--text-bright); text-wrap: balance; }
.vh-accent { color: var(--primary-blue); }
.vh-sub { margin: 0; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.5; color: var(--text-secondary); max-width: 460px; }
.vh-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.vh-btn {
display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 26px;
border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none;
transition: transform 0.18s var(--ease-out), background 0.18s ease, border-color 0.18s ease;
}
.vh-btn-primary { background: var(--primary-blue); color: #fff; box-shadow: var(--shadow-accent); }
.vh-btn-primary:hover { transform: translateY(-2px); background: var(--primary-blue-hover); }
.vh-btn-ghost { background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border); color: #fff; -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); }
.vh-btn-ghost:hover { transform: translateY(-2px); border-color: var(--glass-border-active); }
.vh-hint {
position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
display: flex; flex-direction: column; align-items: center; gap: 8px;
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary);
transition: opacity 0.4s ease;
}
.vh-mouse { width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.4); position: relative; }
.vh-mouse::after {
content: ""; position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
width: 3px; height: 6px; border-radius: 2px; background: rgba(255,255,255,0.7);
animation: vh-hint-scroll 1.6s ease-in-out infinite;
}
@keyframes vh-hint-scroll { 0%,100% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .vh-mouse::after { animation: none; } }
/* king CTA */
.lp-king-cta {
position: relative; max-width: var(--content-max); margin: 150px auto 0; padding: 0 var(--page-padding);
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
}
.lp-king-cta-glow {
position: absolute; left: 50%; top: 120px; transform: translateX(-50%);
width: min(560px, 80%); height: 420px; z-index: 0; pointer-events: none;
background: radial-gradient(46% 46% at 50% 46%, rgba(16,153,250,0.42), transparent 72%); filter: blur(20px);
}
.lp-king-cta-img {
position: relative; z-index: 1; width: clamp(220px, 26vw, 320px); height: auto; margin-bottom: 8px;
filter: drop-shadow(0 30px 50px rgba(0,4,40,0.6));
}
.lp-king-cta-title { position: relative; z-index: 1; margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 800; letter-spacing: -0.03em; color: var(--text-bright); }
.lp-king-cta-title span { color: var(--primary-blue); }
.lp-king-cta-sub { position: relative; z-index: 1; margin: 0 0 10px; font-size: 17px; color: var(--text-secondary); }
/* ========================================================================
v6 — dreamcash-style header + phone hero (cro.trade dark identity)
======================================================================== */
.lp-hd {
position: sticky; top: 0; z-index: 50;
background: linear-gradient(to bottom, rgba(8,9,11,0.28), rgba(8,9,11,0));
-webkit-backdrop-filter: saturate(120%) blur(6px);
backdrop-filter: saturate(120%) blur(6px);
border: none;
-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.lp-hd.is-scrolled {
border: none;
box-shadow: none;
}
.lp-hd-inner {
max-width: var(--content-max); margin: 0 auto; height: 68px; padding: 0 var(--page-padding);
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.lp-hd-logo { grid-column: 1; justify-self: start; display: inline-flex; text-decoration: none; }
.lp-hd-nav { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 30px; }
.lp-hd-nav a { font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: color var(--dur-base) ease; }
.lp-hd-nav a:hover { color: var(--text-bright); }
.lp-hd-x { display: inline-flex; align-items: center; }
.lp-hd-cta { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.lp-hd-launch, .lp-hd-signup {
display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px;
border-radius: 11px; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
transition: transform 0.16s var(--ease-out), background 0.16s ease, opacity 0.16s ease;
}
.lp-hd-launch { background: #fff; color: #000; }
.lp-hd-launch:hover { transform: translateY(-1px); opacity: 0.9; }
.lp-hd-signup { background: var(--primary-blue); color: #fff; box-shadow: var(--shadow-accent); }
.lp-hd-signup:hover { transform: translateY(-1px); background: var(--primary-blue-hover); }
/* ----- phone hero ----- */
.ph-hero {
position: relative; z-index: 1;
padding: clamp(56px, 9vh, 96px) var(--page-padding) 0;
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.ph-title {
margin: 0; color: var(--text-bright);
font-size: clamp(46px, 8.4vw, 116px); font-weight: 800; line-height: 0.92; letter-spacing: -0.045em;
text-wrap: balance;
}
.ph-accent {
font-family: 'Caveat', cursive; color: var(--primary-blue);
font-weight: 700; font-size: 0.42em; letter-spacing: 0; line-height: 1;
display: inline-block; transform: rotate(-7deg) translateY(0.18em); margin-left: 0.18em;
}
.ph-downloads { display: flex; gap: 14px; margin-top: clamp(34px, 5vh, 52px); flex-wrap: wrap; justify-content: center; }
.ph-badge { display: inline-flex; text-decoration: none; transition: transform 0.18s var(--ease-out), filter 0.18s ease; }
.ph-badge img { height: 58px; width: auto; display: block; border-radius: 13px; }
.ph-badge:hover { transform: translateY(-2px); filter: brightness(1.08); }
.ph-dl {
display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 28px;
border-radius: 13px; font-size: 15.5px; font-weight: 600; text-decoration: none; cursor: pointer;
transition: transform 0.18s var(--ease-out), background 0.18s ease, border-color 0.18s ease;
}
.ph-dl-ios { background: #fff; color: #000; }
.ph-dl-ios:hover { transform: translateY(-2px); background: #e9eef4; }
.ph-dl-and { background: rgba(255,255,255,0.07); border: 1px solid var(--glass-border); color: #fff; }
.ph-dl-and:hover { transform: translateY(-2px); border-color: var(--glass-border-active); background: rgba(255,255,255,0.11); }
.ph-device-wrap { position: relative; margin-top: clamp(48px, 7vh, 80px); display: flex; justify-content: center; }
.ph-glow {
position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
width: 150%; height: 120%; z-index: 0; pointer-events: none;
background: radial-gradient(46% 50% at 50% 42%, rgba(16,153,250,0.4), rgba(0,45,116,0.16) 52%, transparent 72%);
filter: blur(30px);
}
/* Device shell. Proportions are measured off the phone in cro-app-markets.mp4:
a 485 x 1016 body, a 16.5%-of-width corner radius, and a titanium rim 3.1% of the
body wide. The screen inside keeps the true 9:19.5. */
.ph-device {
position: relative; z-index: 1;
width: clamp(266px, 28vw, 341px); aspect-ratio: 485 / 1016;
border-radius: 16.5%/7.9%;
padding: 3.1%;
/* brushed-titanium rim: bright at both edges, dark across the middle */
/* the specular edge is only ~1.4% of the body wide in the video; the rest of the
rim is dark metal, so a wide grey band reads wrong */
background:
linear-gradient(96deg, #34353a 0%, #a2a3a8 1.4%, #55565c 2.6%, #212226 4.2%,
#292a2e 50%, #212226 95.8%, #55565c 97.4%, #a2a3a8 98.6%, #34353a 100%);
box-shadow: 0 30px 70px -28px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06);
}
/* the black bezel between rim and glass */
.ph-screen {
position: relative; width: 100%; height: 100%;
background: #000; border-radius: 13.6%/6.9%; overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.9);
}
/* side buttons — offsets are % of body height, straight off the video frame */
.ph-btn { position: absolute; width: 2px; border-radius: 2px; background: linear-gradient(90deg, #8e8f94, #5a5b60); }
.ph-btn-l { left: -1px; }
.ph-btn-r { right: -1px; }
.ph-btn-action { top: 19.2%; height: 3.8%; }
.ph-btn-volup { top: 26.5%; height: 6.5%; }
.ph-btn-voldn { top: 35.2%; height: 6.4%; }
.ph-btn-power { top: 28.9%; height: 10.4%; }
.ph-video { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.07); display: block; }
.ph-mute {
position: absolute; right: 12px; bottom: 12px; z-index: 4;
width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
display: flex; align-items: center; justify-content: center; color: #fff;
background: rgba(0,0,0,0.5); border: 1px solid var(--glass-border);
-webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
transition: background 0.16s ease, transform 0.16s ease;
}
.ph-mute:hover { background: rgba(0,0,0,0.72); transform: scale(1.06); }
@media (max-width: 900px) {
.lp-hd-nav { display: none; }
}
/* ----- testimonial ----- */
.tm {
position: relative; z-index: 1;
max-width: 760px; margin: clamp(96px, 14vh, 150px) auto 0; padding: 0 var(--page-padding);
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px;
}
.tm-stars { display: flex; gap: 6px; color: #f7b500; }
.tm-quote { margin: 0; font-size: clamp(24px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.18; color: var(--text-bright); text-wrap: balance; }
.tm-trust { margin: 0; font-size: clamp(15px, 1.6vw, 18px); color: var(--text-tertiary); }
.tm-trust b { color: var(--primary-blue); font-weight: 700; }
/* ----- floating download bar (follows everywhere) ----- */
.fdl {
position: fixed; left: 50%; bottom: clamp(16px, 3vh, 26px);
z-index: 60; display: flex; gap: 12px;
transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.fdl.is-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fdl-badge { display: inline-flex; text-decoration: none; transition: transform 0.16s var(--ease-out), filter 0.16s ease; filter: drop-shadow(0 12px 26px rgba(0,0,0,0.55)); }
.fdl-badge img { height: 46px; width: auto; display: block; border-radius: 11px; }
.fdl-badge:hover { transform: translateY(-2px); filter: drop-shadow(0 14px 30px rgba(0,0,0,0.6)) brightness(1.08); }
@keyframes fdl-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.fdl-btn {
display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 22px;
border-radius: 11px; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer;
transition: transform 0.16s var(--ease-out), background 0.16s ease;
}
.fdl-ios { background: #000; color: #fff; }
.fdl-ios:hover { transform: translateY(-1px); background: #1a1a1a; }
.fdl-and { background: rgba(0,0,0,0.06); color: #000; }
.fdl-and:hover { transform: translateY(-1px); background: rgba(0,0,0,0.11); }
.lp-footer { padding-bottom: 56px; } /* clear the floating bar */
/* ----- platform cards (app / web / desktop) ----- */
.pf { max-width: var(--content-max); margin: clamp(80px, 12vh, 140px) auto 0; padding: 0 var(--page-padding); }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: end; }
.pf-card { display: flex; flex-direction: column; align-items: center; }
.pf-tray {
width: 100%; border-radius: 26px; padding: clamp(26px, 3vw, 44px);
min-height: 320px; display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.pf-label { margin-top: 22px; font-size: 18px; font-weight: 700; color: var(--text-tertiary); letter-spacing: -0.01em; }
.pf-label b { color: var(--text-bright); }
.pf-link { margin-top: 6px; font-size: 17px; font-weight: 700; color: var(--primary-blue); text-decoration: none; }
.pf-link:hover { text-decoration: underline; }
/* shared placeholder screen */
.pf-screen-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
background: radial-gradient(80% 80% at 50% 32%, rgba(16,153,250,0.12), #07080a 72%); }
.pf-screen-logo { width: 30px; height: auto; opacity: 0.5; }
.pf-screen-ph span { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); }
/* phone */
.pf-phone { position: relative; width: 134px; aspect-ratio: 9 / 19.3; border-radius: 24px; padding: 6px;
background: linear-gradient(160deg, #1b1d22, #070809); border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 22px 44px -20px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.14); }
.pf-phone-notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 34%; height: 13px; border-radius: 7px; background: #000; z-index: 2; }
.pf-phone-video { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; display: block; background: #000; }
/* laptop */
.pf-laptop { width: 100%; max-width: 300px; display: flex; flex-direction: column; align-items: center; }
.pf-laptop-screen { width: 84%; aspect-ratio: 16 / 10.2; border-radius: 13px; border: 7px solid #0e0f12;
outline: 1px solid rgba(255,255,255,0.12); background: #000; overflow: hidden;
box-shadow: 0 18px 36px -20px rgba(0,0,0,0.85); }
.pf-laptop-base { width: 100%; height: 11px; margin-top: -1px; border-radius: 0 0 13px 13px;
background: linear-gradient(180deg, #d2d6dc, #9aa0a8); position: relative; box-shadow: 0 8px 16px -8px rgba(0,0,0,0.6); }
.pf-laptop-base::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 16%; height: 5px; border-radius: 0 0 7px 7px; background: #b7bcc3; }
/* imac */
.pf-imac { width: 100%; max-width: 300px; display: flex; flex-direction: column; align-items: center; }
.pf-imac-screen { width: 100%; aspect-ratio: 16 / 10.5; border-radius: 15px; border: 9px solid #d8dbe0; background: #000; overflow: hidden;
box-shadow: 0 18px 36px -20px rgba(0,0,0,0.85); }
.pf-imac-neck { width: 16%; height: 22px; background: linear-gradient(180deg, #d0d4da, #aeb4bc); }
.pf-imac-foot { width: 34%; height: 9px; border-radius: 0 0 11px 11px; background: linear-gradient(180deg, #c2c7cd, #a9aeb5); }
@media (max-width: 820px) {
.pf-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; gap: 28px; }
.pf-tray { min-height: 0; }
}
/* ----- colourful feature bento ----- */
.lp-fb { max-width: var(--content-max); margin: clamp(96px, 14vh, 150px) auto 0; padding: 0 var(--page-padding); }
.lp-fb .lp-section-head { margin-bottom: 44px; }
.fb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 820px; margin: 0 auto; }
.fb-card {
position: relative; overflow: hidden; border-radius: 28px;
min-height: 350px; padding: 32px 26px 0;
display: flex; flex-direction: column; align-items: center; text-align: center;
box-shadow: 0 30px 70px -36px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.12);
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease;
}
.fb-usdc { border: 1px solid rgba(255,255,255,0.1); }
.fb-card:hover { transform: translateY(-5px); box-shadow: 0 44px 90px -40px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.16); }
.fb-copy { position: relative; z-index: 2; }
.fb-title { margin: 0; font: 800 clamp(24px, 2.5vw, 34px)/1.04 var(--font-sans); letter-spacing: -0.025em; color: #fff; text-transform: lowercase; }
.fb-desc { margin: 11px auto 0; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,0.84); max-width: 32ch; }
.fb-visual { position: relative; z-index: 1; margin-top: auto; width: 100%; display: flex; justify-content: center; align-items: flex-end; min-height: 180px; }
.fb-char {
width: auto; height: 268px; max-width: 100%; object-fit: contain; object-position: bottom; display: block;
filter: drop-shadow(0 26px 36px rgba(0,0,0,0.4));
transition: transform var(--dur-base) var(--ease-out);
}
.fb-card:hover .fb-char { transform: translateY(-6px) scale(1.03); }
/* coin cluster */
.fb-coins { display: flex; flex-direction: column; align-items: center; padding-bottom: 30px; }
.fb-coin-row { display: flex; }
.fb-coin-row img {
width: 58px; height: 58px; margin: 0 -7px; border-radius: 50%; object-fit: contain;
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35));
}
.fb-coin-row-2 { margin-top: -16px; }
.fb-coin-row-2 img { width: 64px; height: 64px; }
@media (max-width: 760px) {
.fb-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
.fb-card { min-height: 380px; }
}
/* ----- FAQ accordion ----- */
.lp-faq { max-width: 860px; margin: clamp(96px, 14vh, 150px) auto 0; padding: 0 var(--page-padding); }
@media (max-width: 760px) {
.fdl { gap: 10px; }
.fdl-badge img { height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .fdl { animation: none; } }
/* ===== cronos spotlight (video left / copy right) ======================= */
.cs-section {
max-width: var(--content-max); margin: 0 auto; padding: 150px var(--page-padding) 0;
display: grid; grid-template-columns: 0.95fr 1fr; gap: clamp(48px, 6vw, 100px);
align-items: center;
}
.cs-media { position: relative; display: flex; justify-content: center; }
.cs-glow {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 150%; height: 118%; z-index: 0; pointer-events: none;
background: radial-gradient(46% 50% at 50% 46%, rgba(16,153,250,0.42), rgba(0,45,116,0.16) 52%, transparent 72%);
filter: blur(34px);
}
/* same measured device shell as the hero phone — see .ph-device */
.cs-phone {
position: relative; z-index: 1;
width: clamp(288px, 31vw, 383px); aspect-ratio: 485 / 1016;
border-radius: 16.5%/7.9%;
padding: 3.1%;
background:
linear-gradient(96deg, #34353a 0%, #a2a3a8 1.4%, #55565c 2.6%, #212226 4.2%,
#292a2e 50%, #212226 95.8%, #55565c 97.4%, #a2a3a8 98.6%, #34353a 100%);
box-shadow: 0 30px 70px -28px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06);
}
.cs-video { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.07); display: block; }
.cs-copy { max-width: 480px; }
.cs-title {
margin: 14px 0 0; font-size: clamp(30px, 4vw, 48px); font-weight: 800;
letter-spacing: -0.03em; line-height: 1.06; color: var(--text-bright); text-wrap: balance;
}
.cs-accent { color: var(--primary-blue); }
.cs-sub { margin: 22px 0 0; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55; color: var(--text-secondary); max-width: 420px; }
.cs-cta {
display: inline-flex; align-items: center; margin-top: 30px;
padding: 14px 24px; border-radius: 12px; text-decoration: none;
font: 700 15px var(--font-sans); color: #fff; background: var(--primary-blue);
box-shadow: var(--shadow-accent); transition: transform 0.18s var(--ease-out), background 0.18s ease;
}
.cs-cta:hover { transform: translateY(-2px); background: var(--primary-blue-hover); }
@media (max-width: 860px) {
.cs-section { grid-template-columns: 1fr; gap: 44px; justify-items: center; text-align: center; }
.cs-copy { max-width: 520px; order: 1; } /* text on top */
.cs-media { order: 2; } /* video below */
.cs-copy .lp-eyebrow, .cs-sub { margin-left: auto; margin-right: auto; }
}
/* ========================================================================
phone tuning — tighten section rhythm + type for small screens
======================================================================== */
@media (max-width: 640px) {
:root { --page-padding: 20px; }
/* header: logo + single CTA fit on one row */
.lp-hd-inner { height: 60px; }
.lp-hd-launch { height: 36px; padding: 0 14px; font-size: 13px; }
/* phone hero */
.ph-hero { padding-top: 40px; }
.ph-title { font-size: clamp(34px, 10.5vw, 62px); line-height: 0.98; }
/* The aside is a fixed fraction of the line it hangs off, and that line drops
from 116px to 39 on a phone — so the note came out at 16.5px, small enough
to read as a stray mark rather than as handwriting. Caveat also runs small
for its point size, which the desktop ratio absorbs and the mobile one
cannot. A larger fraction on a smaller line, so it lands near 20px. */
.ph-accent { font-size: 0.52em; }
.ph-downloads { margin-top: 30px; gap: 10px; }
.ph-badge img { height: 50px; }
.ph-device-wrap { margin-top: 40px; }
.ph-device { width: min(76vw, 310px); }
/* section rhythm — big desktop top-spacing is too tall on phones */
.lp-assets { padding-top: 90px; }
.cs-section { padding-top: 90px; }
.lp-section-head { margin-bottom: 34px; }
.lp-section-title { font-size: clamp(26px, 7.4vw, 40px); }
.lp-section-sub { font-size: 15px; }
/* features cards */
.fb-card { min-height: 340px; padding: 28px 22px 0; }
.fb-char { height: 220px; }
/* footer stacks cleanly */
.lp-footer-inner { gap: 32px; }
.lp-footer-cols { gap: 40px; }
.lp-fcopy { text-align: left; margin-left: 0; padding-top: 8px; }
}
/* ===== hero phone: live app screen ======================================
Every rule below is the app's own computed style, lifted verbatim from the
mobile explore screen (390px viewport) so this is a copy, not a lookalike.
The screen is laid out at 390px and scaled by --pa-scale (set from JS) to
whatever the phone frame happens to be. */
.pa-wrap { position: absolute; inset: 0; overflow: hidden; background: #000; --pa-scale: 1; }
.pa-screen {
width: 390px; height: calc(100% / var(--pa-scale));
transform: scale(var(--pa-scale)); transform-origin: top left;
display: flex; flex-direction: column; background: #000; color: #fff;
text-align: left; /* the hero section centres its text; the app screen must not inherit that */
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
}
/* status bar */
.pa-statusbar {
flex: 0 0 auto; height: 44px; padding: 0 22px 0 30px;
display: flex; align-items: center; justify-content: space-between;
font-size: 15px; font-weight: 600; letter-spacing: 0.2px;
}
/* Dynamic island. On a real device it is black-on-black; what actually reads is the
lens and a hair of rim light. The video's island only stands out because of the
screen-recording dot, which would be wrong to copy here. */
.pa-island {
position: relative; width: 92px; height: 27px; border-radius: 20px; background: #000;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 0 0 0.5px rgba(255,255,255,0.03);
}
.pa-island::after {
content: ''; position: absolute; top: 50%; right: 9px; transform: translateY(-50%);
width: 9px; height: 9px; border-radius: 50%;
background: radial-gradient(circle at 35% 32%, #2b3542 0%, #131820 45%, #05070a 100%);
box-shadow: 0 0 0 0.5px rgba(255,255,255,0.06);
}
.pa-status-icons { display: flex; align-items: center; gap: 5px; }
.pa-brand { flex: 0 0 auto; padding: 4px 18px 0; }
.pa-brand img { width: 26px; height: 26px; display: block; }
/* ── balance row (_balanceSection_ / _balanceValue_ / _depositBtn_) ── */
.pa-balance-row { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 2px 18px 12px; }
.pa-balance-block { display: flex; flex-direction: column; flex: 1 1 0%; gap: 0; min-width: 0; }
.pa-balance { font-variant-numeric: tabular-nums; letter-spacing: -0.5px; font-size: 36px; font-weight: 700; line-height: 1.1; color: #fff; }
.pa-balance-cents { color: rgba(255,255,255,0.35); }
.pa-deposit {
color: #000; background: #fff; border: none; border-radius: 14px; flex-shrink: 0;
padding: 14px 36px; font-size: 18px; font-weight: 700; letter-spacing: 0.3px;
text-decoration: none; line-height: 1; cursor: pointer;
}
/* ── promo slot (_track_ / _card_ / _art_ / _badge_) ── */
.pa-promo { display: flex; gap: 10px; padding: 2px 18px 12px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.pa-promo::-webkit-scrollbar { display: none; }
.pa-promo-card {
flex: 1 0 100%; display: block; position: relative; overflow: hidden; padding: 0; line-height: 0;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1); transform-origin: 50% center;
-webkit-tap-highlight-color: transparent;
}
.pa-promo-card:active { transform: scale(0.97); transition: transform 50ms ease-out; }
.pa-promo-art { aspect-ratio: 3 / 1; object-fit: cover; object-position: center; width: 100%; height: auto; display: block; }
.pa-promo-badge {
position: absolute; bottom: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px;
padding: 5px 9px; border-radius: 8px; font-size: 11px; font-weight: 600; line-height: 1;
letter-spacing: -0.1px; color: rgba(255,255,255,0.9); pointer-events: none;
background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.14);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pa-promo-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: pa-promo-pulse 2s ease-out infinite; }
@keyframes pa-promo-pulse {
0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
70% { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
/* ── tab pills (_filterTabs_ / _filterTab_) ── */
.pa-tabs { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 4px 18px 8px; background: #000; }
.pa-tab-slot { position: relative; flex: 1 1 0%; }
.pa-tab-slot-star { flex: 0 0 auto; }
.pa-tab-slot-chain { flex: 1.1 1 0%; }
/* display:block matters — these are spans, not buttons, since the phone stopped
being touchable; inline spans ignore the width and mis-render the padding. */
.pa-tab {
display: block; box-sizing: border-box;
width: 100%; padding: 9px 0; border-radius: 10px;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.4); font-size: 14px; font-weight: 600; font-family: inherit;
text-align: center; text-transform: capitalize; white-space: nowrap;
transition: 0.15s;
}
.pa-tab-star { padding: 9px 14px; }
.pa-tab-chain { display: flex; align-items: center; justify-content: center; gap: 5px; position: relative; }
.pa-tab-chain img { width: 14px; height: 14px; }
.pa-tab-chev { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); opacity: 0.4; }
.pa-tab.is-on { color: #fff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); box-shadow: inset 0 1px rgba(255,255,255,0.06); }
/* ── perps sub-tabs (inline-styled in the app) ── */
.pa-subtabs { display: flex; align-items: center; gap: 4px; padding: 6px 16px 4px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.pa-subtabs.is-hidden { display: none; }
.pa-subtabs::-webkit-scrollbar { display: none; }
.pa-subtab {
display: inline-block; box-sizing: border-box;
background: none; border: 1px solid transparent; border-radius: 8px; padding: 5px 14px;
color: rgba(255,255,255,0.4); font-size: 12px; font-weight: 600; font-family: inherit;
flex-shrink: 0; white-space: nowrap;
}
.pa-subtab.is-on { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); color: #fff; }
.pa-subdiv { width: 1px; height: 16px; background: rgba(255,255,255,0.12); flex-shrink: 0; margin: 0 2px; }
.pa-sortbtn { background: none; border: none; border-radius: 6px; padding: 4px 6px; opacity: 0.4; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pa-sortbtn.is-on { background: rgba(255,255,255,0.08); opacity: 1; }
/* ── list + card (_tokenCard_ and friends, at the <=768px sizes) ── */
/* the panel carousel: one track, six 100%-wide panels, the app's own easing */
/* No gesture on this one: the tour drives it, so it must not invite a drag. */
.pa-viewport { flex: 1 1 auto; overflow: hidden; position: relative; -webkit-user-select: none; user-select: none; }
.pa-track { display: flex; width: 2340px; height: 100%; will-change: transform; transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
/* The list does not scroll: the phone plays itself, and a scrollable panel under
the cursor swallowed the wheel that is supposed to advance the pinned stage. */
.pa-panel { width: 390px; flex: 0 0 390px; height: 100%; overflow: hidden; }
.pa-card {
display: flex; justify-content: space-between; align-items: center; gap: 8px;
min-height: 106px; margin: 4px 8px; padding: 12px 10px;
background: #000; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
box-shadow: inset 0 1px rgba(255,255,255,0.05);
position: relative; overflow: visible; text-decoration: none; color: inherit;
transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1);
transform-origin: 50% center; -webkit-tap-highlight-color: transparent;
}
.pa-card:nth-child(2n) { background: #050505; }
.pa-card:last-child { margin-bottom: 8px; }
.pa-card:active { transform: scale(0.97); transition: transform 50ms ease-out; }
.pa-card-left { z-index: 1; display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; max-width: calc(100% - 150px); overflow: visible; position: relative; }
.pa-card-info { display: flex; flex-direction: column; flex: 1 1 auto; gap: 4px; min-width: 0; overflow: visible; }
/* logo: a 56px slot holding a 48px tile, a blurred colour bleed and a 42px mark */
.pa-logo { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: visible; }
.pa-logo-tile { position: relative; width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,0.08); padding: 3px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: visible; }
.pa-logo-glow { position: absolute; inset: 0; z-index: 0; border-radius: 9px; overflow: hidden; pointer-events: none; }
.pa-logo-glow img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200%; height: 200%; object-fit: cover; filter: blur(6px) saturate(400%) brightness(1.2); }
.pa-logo-img { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 9px; object-fit: cover; overflow: hidden; display: block; }
.pa-card-header { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 100%; margin-bottom: 6px; overflow: visible; }
.pa-symbol-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; max-width: calc(100% + 50px); overflow: hidden; }
.pa-symbol { flex: 0 0 auto; margin: 0; color: #fff; text-transform: uppercase; white-space: nowrap; font-size: 16px; font-weight: 700; }
.pa-badge { flex-shrink: 0; font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 4px; letter-spacing: 0.3px; }
.pa-badge-lev { font-size: 9px; font-weight: 500; padding: 1px 5px; background: rgba(255,255,255,0.05); }
.pa-name-row { display: flex; align-items: center; gap: 6px; max-width: 100%; overflow: hidden; }
.pa-name { color: #888; white-space: nowrap; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 500; overflow: hidden; }
.pa-stats { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; margin-top: 4px; }
.pa-stat { white-space: nowrap; background-color: rgba(255,255,255,0.05); border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; gap: 2px; padding: 2px 6px; font-size: 10px; }
.pa-stat-label { color: #888; font-size: 9px; font-weight: 500; }
.pa-stat-value { color: #ccc; white-space: nowrap; text-overflow: ellipsis; max-width: 80px; font-weight: 600; overflow: hidden; }
.pa-card-right { z-index: 1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 140px; position: relative; }
.pa-chart { flex-shrink: 0; display: flex; align-items: center; width: 50px; height: 25px; margin-right: 8px; }
.pa-price-section { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pa-price-block { text-align: right; }
.pa-price { color: #fff; white-space: nowrap; margin-bottom: 1px; font-size: 14px; font-weight: 600; }
.pa-change { white-space: nowrap; font-size: 11px; font-weight: 500; }
.pa-trade {
color: #4ade80; background: rgba(22,101,52,0.35); border: 1px solid rgba(74,222,128,0.25);
border-radius: 5px; flex-shrink: 0; display: inline-flex; justify-content: center; align-items: center;
gap: 2px; padding: 3px 6px; font-size: 10px; font-weight: 600; white-space: nowrap;
}
.pa-empty { padding: 60px 24px; text-align: center; color: #666; font-size: 14px; line-height: 1.5; }
.pa-empty-star { display: block; font-size: 26px; color: #333; margin-bottom: 10px; }
.pa-skeletons { padding: 4px 8px; }
.pa-skel { height: 106px; margin: 8px 0; border-radius: 14px; background: linear-gradient(90deg, #070707, #101010, #070707); background-size: 200% 100%; animation: pa-shimmer 1.4s linear infinite; }
@keyframes pa-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* ── bottom nav (_bottomBar_ / _navItem_ / _feedCenter_ / _searchCircle_) ── */
.pa-navwrap { flex: 0 0 auto; display: flex; justify-content: center; padding: 0 0 12px; margin-top: -70px; z-index: 2; }
.pa-navbar { display: flex; align-items: center; gap: 8px; width: 92%; max-width: 420px; }
.pa-nav { flex: 1 1 0%; display: flex; justify-content: center; align-items: center; gap: 0; padding: 4px; position: relative; }
.pa-nav-bg {
position: absolute; inset: 0; z-index: -1; border-radius: 16px; overflow: hidden;
background: rgba(12,12,16,0.65); border: 1px solid rgba(255,255,255,0.12);
/* -webkit- first: LightningCSS drops the standard property if it comes first */
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px rgba(255,255,255,0.06);
}
.pa-nav-bg::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(120deg, rgba(0,0,0,0) 40%, rgba(255,255,255,0.05) 50%, rgba(0,0,0,0) 60%); }
.pa-nav-item {
color: rgba(255,255,255,0.35); z-index: 1; border-radius: 12px;
display: flex; flex-direction: column; flex: 1 1 0%; justify-content: center; align-items: center;
gap: 3px; min-height: 48px; padding: 10px 4px 8px;
}
.pa-nav-item svg { width: 24px; height: 24px; }
.pa-nav-item.is-on { color: #fff; background: rgba(255,255,255,0.1); }
.pa-nav-perps { flex-direction: row; gap: 4px; min-width: 0; }
.pa-nav-perps-label { letter-spacing: 0.3px; opacity: 0.7; font-size: 10px; font-weight: 700; line-height: 1; }
.pa-nav-center { color: rgba(255,255,255,0.7); z-index: 1; border-radius: 14px; flex: 1 1 0%; display: flex; justify-content: center; align-items: center; min-height: 48px; position: relative; overflow: hidden; }
.pa-nav-center img {
width: 45px; height: 45px; object-fit: contain;
filter: drop-shadow(0 -1px rgba(255,255,255,0.4)) drop-shadow(0 1px rgba(0,0,0,0.6)) drop-shadow(0 3px 6px rgba(0,0,0,0.7)) drop-shadow(0 -1px 2px rgba(255,255,255,0.15));
}
.pa-search { color: rgba(255,255,255,0.45); border-radius: 14px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 56px; height: 56px; position: relative; }
.pa-search svg { position: relative; z-index: 2; width: 20px; height: 20px; }
.pa-search-bg {
position: absolute; inset: 0; z-index: 0; border-radius: 14px; overflow: hidden;
background: rgba(12,12,16,0.65); border: 1px solid rgba(255,255,255,0.12);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px rgba(255,255,255,0.06);
}
@media (prefers-reduced-motion: reduce) { .pa-skel { animation: none; } }
/* ===== second phone: the app's buy screen, playing itself ================
Values lifted from src/styles/cronosBuySell.module.css so this matches the
real order form rather than approximating it. */
.bf-screen { position: relative; }
/* header — TokenHeaderRow's collapsed geometry */
.bf-header {
flex: 0 0 auto; padding: 9px 11px 8px;
background: rgba(0,0,0,0.92); border-bottom: 1px solid rgba(255,255,255,0.06);
-webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.bf-header-row { display: flex; align-items: center; gap: 8px; }
.bf-back { color: rgba(255,255,255,0.55); flex-shrink: 0; }
.bf-logo { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.bf-price { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }
.bf-change { font-size: 12px; font-weight: 600; }
.bf-sides { display: flex; gap: 6px; margin-top: 8px; }
.bf-side {
font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 6px;
color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05);
}
.bf-side.is-on { color: #22c55e; background: rgba(34,197,94,0.14); }
/* amount (.polyBuyAmount / .polyBuyAmountNum) */
.pa-buy-amount { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0 4px; flex: 1 1 0; min-height: 64px; }
.pa-buy-amount-num { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1; transition: font-size 0.15s ease; }
.pa-buy-unit { color: rgba(255,255,255,0.4); font-weight: 600; align-self: center; }
.pa-buy-char-new { animation: pa-char-in 0.15s ease-out; }
@keyframes pa-char-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* flex-shrink:0 matters: the app reserves this line's height up front so typing
the first digit does not shift the bar and numpad. As a shrinkable flex item it
was being crushed to 0 and the line vanished. */
.pa-buy-est { flex-shrink: 0; height: 18px; line-height: 18px; text-align: center; font-size: 13px; color: rgba(255,255,255,0.35); margin-top: -4px; margin-bottom: 4px; overflow: hidden; }
/* segmented amount bar */
.pa-buy-barwrap { padding: 6px 16px 8px; flex-shrink: 0; }
.pa-buy-barhead { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.3); font-weight: 600; margin-bottom: 4px; }
.pa-buy-barpct { font-weight: 700; font-size: 11px; }
.pa-buy-bar { display: flex; gap: 2px; height: 28px; position: relative; padding: 4px 0; }
.pa-buy-seg { flex: 1; height: 20px; border-radius: 2px; transition: background 0.12s ease; }
.pa-buy-barknob { position: absolute; top: 50%; transform: translateY(-50%); width: 6px; height: 26px; border-radius: 3px; background: #fff; pointer-events: none; }
/* numpad (.polyBuyNumpad / .polyBuyNumpadKey) */
.pa-buy-numpad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); padding: 0 12px; flex: 1 1 0; min-height: 272px; }
.pa-buy-key { color: #fff; font-size: 30px; font-weight: 400; display: flex; align-items: center; justify-content: center; min-height: 62px; border-radius: 12px; }
.pa-buy-balance { flex-shrink: 0; text-align: center; font-size: 12px; color: rgba(255,255,255,0.35); padding: 6px 0 2px; }
/* slide to buy (.swipeTrack + Long variants) */
.pa-buy-submit { flex-shrink: 0; padding: 12px 16px 16px; background: #000; }
.pa-swipe-track {
position: relative; width: 100%; height: 68px; border-radius: 16px; overflow: hidden;
background: rgba(10,10,10,0.95); border: 1.5px solid rgba(34,197,94,0.6);
box-shadow: 0 0 20px rgba(34,197,94,0.15);
}
.pa-swipe-fill { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 16px; background: linear-gradient(90deg, #16a34a, #22c55e); transition: width 0.55s cubic-bezier(0.32, 0.72, 0, 1); }
.pa-swipe-label {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
padding-left: 58px; font-size: 17px; font-weight: 600; color: rgba(34,197,94,0.45);
letter-spacing: 0.5px; transition: color 0.2s ease;
}
.pa-swipe-thumb {
position: absolute; top: 4px; left: 14px; width: 60px; height: 60px; border-radius: 12px;
background: #22c55e; display: flex; align-items: center; justify-content: center; z-index: 2;
box-shadow: 0 2px 16px rgba(34,197,94,0.5);
transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}
.pa-swipe-spinner { width: 32px; height: 32px; border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff; border-radius: 50%; animation: pa-spin 0.7s linear infinite; }
@keyframes pa-spin { to { transform: rotate(360deg); } }
/* processing / confirmed overlay (.orderScreen and friends) */
.pa-order-screen { position: absolute; inset: 0; z-index: 200; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: pa-order-in 0.4s ease forwards; }
@keyframes pa-order-in { from { opacity: 0; } to { opacity: 1; } }
.pa-order-center { display: flex; flex-direction: column; align-items: center; z-index: 2; max-width: 100%; padding: 0 16px; }
.pa-order-label { font-size: 15px; color: rgba(255,255,255,0.45); font-weight: 500; margin-bottom: 8px; }
.pa-order-amount { font-size: 54px; font-weight: 800; letter-spacing: -2px; color: #fff; margin-bottom: 14px; text-align: center; word-break: break-word; }
.pa-order-pop { animation: pa-order-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes pa-order-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.pa-order-token { display: flex; align-items: center; gap: 8px; }
.pa-order-token-icon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; }
.pa-order-token-icon img { width: 24px; height: 24px; border-radius: 6px; }
.pa-order-token-name { font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.7); }
.pa-order-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 48px; }
.pa-order-again { font-size: 16px; font-weight: 600; color: #e8e8e8; padding: 8px 16px; }
.pa-order-alpha { display: flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 8px; border: 1px solid rgba(99,102,241,0.4); background: rgba(99,102,241,0.1); color: #a5b4fc; font-size: 14px; font-weight: 600; }
.pa-order-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; }
.pa-order-close { width: 100%; height: 60px; border-radius: 16px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; }
.pa-order-close span { font-size: 17px; font-weight: 600; color: rgba(255,255,255,0.5); }
@media (prefers-reduced-motion: reduce) {
.pa-swipe-fill, .pa-swipe-thumb { transition: none; }
.pa-swipe-spinner { animation: none; }
}
/* floating marks on a settled buy — ProcessingFx's fxFloat / fxBurst, verbatim */
.pa-fx-mark { position: absolute; opacity: 0; pointer-events: none; z-index: 1; }
.pa-fx-inner { display: block; width: 100%; height: 100%; }
.pa-fx-inner img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.pa-fx-burst { animation: pa-fx-burst 0.72s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes pa-fx-float {
0% { transform: translateY(0) rotate(0deg); opacity: 0; }
15% { opacity: 0.55; }
70% { opacity: 0.45; }
100% { transform: translateY(-120px) rotate(15deg); opacity: 0; }
}
@keyframes pa-fx-burst {
0% { transform: scale(1) rotate(0deg); }
35% { transform: scale(1.55) rotate(-8deg); }
60% { transform: scale(0.92) rotate(4deg); }
100% { transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
.pa-fx-mark { animation: none !important; opacity: 0.4 !important; }
.pa-fx-burst { animation: none; }
}
/* ===== pinned phone stage ==============================================
One phone that holds still while the page scrolls past it, changing screen
at each stop. The section is as tall as the number of stops; the sticky
layer inside it is exactly one viewport. */
/* one viewport of travel per stop; the sticky layer inside is exactly one viewport
and overlaps that travel rather than adding to it */
.st-section { position: relative; height: 600vh; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--page-padding); }
/* dvh, not vh. On iOS Safari 100vh is the LARGE viewport — the height the page
would have if the address bar were hidden — so a layer sized to it is taller
than the glass while the bar is showing, and the phone inside it runs off the
top. dvh tracks what is actually visible. vh stays as the fallback for the
engines that do not know dvh. */
.st-sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; align-items: center; }
.st-inner {
width: 100%; display: grid; grid-template-columns: 0.95fr 1fr;
gap: clamp(48px, 6vw, 100px); align-items: center;
}
.st-phone-col { position: relative; display: flex; justify-content: center; }
.st-phone-col .cs-phone { width: clamp(250px, 25vw, 330px); }
/* both screens live in the same frame; only one is visible */
.st-screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.st-screen.is-on { opacity: 1; visibility: visible; }
/* the copy column cross-fades in place, so the phone never shifts */
/* The cast slot is added on top of the copy's own 260px: .st-copy is absolute
inside this column and .st-dots hangs off its bottom edge, so a column that
did not account for the figure put the dots on top of the sub-line. */
/* The column is a rail and a window. The copy is not cross-faded in place any
more — it rides a track that the scroll drives, so a stop leaving actually
leaves, upward, and the next one arrives from below. --st-block is one stop's
height and everything here is expressed in it. */
.st-copy-col {
--st-block: calc(272px + clamp(96px, 11vw, 148px));
position: relative; display: flex; gap: clamp(18px, 2vw, 28px);
align-items: stretch; height: var(--st-block);
}
.st-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.st-track { display: flex; flex-direction: column; will-change: transform; }
.st-copy {
flex: 0 0 var(--st-block); height: var(--st-block); max-width: 640px;
display: flex; flex-direction: column; justify-content: center;
/* A block can never show its neighbour, whatever anyone writes in it later.
The measured --st-block above should make this never fire; it is here so
that if it ever does, a stop is clipped rather than two stops overlapping. */
overflow: hidden;
}
.st-accent { color: var(--primary-blue); }
@media (prefers-reduced-motion: reduce) {
.st-screen, .st-copy { transition: none; }
}
/* ===== third stop: cross-chain cash =====================================
Values from AddFromChainPanel / CronosCrossWithdrawPanel and
styles/hl/hlDeposit.module.css. */
.df-screen { padding: 0; }
.df-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 4px 18px calc(24px); gap: 14px; overflow: hidden; }
.df-head { display: flex; align-items: center; gap: 10px; padding: 10px 0 4px; flex-shrink: 0; }
.df-back { color: rgba(255,255,255,0.55); flex-shrink: 0; }
.df-title { font-size: 18px; font-weight: 800; color: #fff; }
/* deposit list — DepositChainSheet's rows, white chain marks and all */
.df-chains { display: flex; flex-direction: column; flex-shrink: 0; }
.df-chain {
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 13px 12px; border-radius: 13px; color: #fff;
transition: background 0.3s ease;
}
.df-chain.is-on { background: rgba(255,255,255,0.06); }
.df-chain-mark { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.df-chain-mark img { display: block; width: 100%; height: 100%; }
.df-chain-text { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 1px; }
.df-chain-text b { font-size: 15px; font-weight: 700; }
.df-chain-text em { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,0.4); font-weight: 600; }
.df-chain-chev { color: rgba(255,255,255,0.3); display: flex; }
.df-warn { margin: 10px 4px 0; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,0.38); font-weight: 600; flex-shrink: 0; }
.df-amount-block { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; opacity: 0; transition: opacity 0.3s ease; flex-shrink: 0; }
.df-amount-block.is-on { opacity: 1; }
.df-amount-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255,255,255,0.4); font-weight: 500; }
.df-amount-head span:last-child { color: rgba(255,255,255,0.5); }
.df-input-row { position: relative; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; }
.df-input { display: block; padding: 14px 16px; font-size: 18px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; min-height: 51px; box-sizing: border-box; }
.df-max { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); padding: 5px 10px; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.06); border-radius: 6px; letter-spacing: 0.05em; }
.df-toggle { display: flex; background: rgba(255,255,255,0.03); border-radius: 10px; padding: 3px; border: 1px solid rgba(255,255,255,0.04); }
.df-toggle-opt { flex: 1; text-align: center; padding: 9px 0; font-size: 12px; font-weight: 600; border-radius: 8px; color: rgba(255,255,255,0.4); }
.df-toggle-opt.is-on { background: rgba(255,255,255,0.08); color: #fff; }
.df-spacer { flex: 1 1 auto; min-height: 8px; }
.df-cta {
flex-shrink: 0; text-align: center; padding: 16px 0; border-radius: 14px;
background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.35);
font-size: 16px; font-weight: 800; transition: background 0.3s ease, color 0.3s ease;
}
.df-cta.is-on { background: #e8e8ea; color: #0a0a0c; }
/* burn / attest / mint */
.df-progress { display: flex; flex-direction: column; gap: 14px; padding: 18px 0; flex: 1 1 auto; }
.df-step { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.4); }
.df-step-active { color: #fff; }
.df-step-done { color: #22c55e; }
.df-step-dot {
width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 11px; color: #fff; background: rgba(255,255,255,0.06); flex-shrink: 0;
}
.df-step-active .df-step-dot { background: rgba(255,255,255,0.15); }
.df-step-done .df-step-dot { background: #22c55e; }
.df-step-note { margin-left: auto; font-size: 12px; color: rgba(255,255,255,0.45); font-weight: 400; }
.df-spinner { display: inline-block; width: 12px; height: 12px; border: 1.5px solid rgba(255,255,255,0.15); border-top-color: #fff; border-radius: 50%; animation: pa-spin 0.7s linear infinite; }
.df-brought { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #fff; text-align: center; }
/* withdraw confirm */
.df-sum { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0 8px; flex-shrink: 0; }
.df-sum-amount { font-size: 40px; font-weight: 800; color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.df-rows { display: flex; flex-direction: column; gap: 1px; border-radius: 14px; overflow: hidden; flex-shrink: 0; }
.df-row { display: flex; align-items: center; justify-content: space-between; padding: 14px; background: rgba(255,255,255,0.04); }
.df-row span:first-child { font-size: 13.5px; color: rgba(255,255,255,0.5); font-weight: 600; }
.df-row span:last-child { font-size: 13.5px; color: #fff; font-weight: 700; }
.df-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.45); flex-shrink: 0; }
.df-send {
flex-shrink: 0; text-align: center; padding: 16px 0; border-radius: 14px;
background: #e8e8ea; color: #0a0a0c; font-size: 16px; font-weight: 800;
transition: background 0.25s ease, color 0.25s ease;
}
.df-send.is-running { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.35); }
/* the chosen chain, carried onto the amount screen */
.df-picked { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 13px; background: rgba(255,255,255,0.04); flex-shrink: 0; }
/* ── add withdrawal address (PerpsWithdrawForm) ── */
.df-head-plain { border-bottom: none; background: transparent; }
.df-title-sm { font-size: 17px; letter-spacing: -0.01em; }
.df-field { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.df-field-net { margin-top: 10px; }
.df-field-label { font-size: 11.5px; color: rgba(255,255,255,0.42); }
.df-input-wrap { position: relative; display: block; }
.df-addr {
display: block; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px; padding: 12px 46px 12px 13px; color: #fff; font-size: 14px; font-weight: 600;
min-height: 43px; box-sizing: border-box; word-break: break-all; line-height: 1.35;
}
.df-addr.is-empty { color: rgba(255,255,255,0.25); }
.df-qr {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.75); display: flex; align-items: center; justify-content: center;
}
.df-netrow {
display: flex; align-items: center; gap: 10px; padding: 11px;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
}
.df-netrow-name { flex: 1; text-align: left; font-size: 14px; font-weight: 700; color: #fff; }
.df-netrow-chev { color: rgba(255,255,255,0.3); font-size: 17px; line-height: 1; }
.df-cashmark { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.df-save { display: flex; align-items: center; gap: 9px; margin-top: 14px; color: rgba(255,255,255,0.75); font-size: 13.5px; font-weight: 600; flex-shrink: 0; }
.df-check {
width: 19px; height: 19px; border-radius: 5px; flex-shrink: 0; font-size: 12px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
background: #60a5fa; border: 1px solid #60a5fa; color: #0b0b0f;
}
.df-caution {
margin: 12px 0; font-size: 11.5px; line-height: 1.5; color: #F0B45C;
background: rgba(240,180,92,0.09); border: 1px solid rgba(240,180,92,0.22);
border-radius: 12px; padding: 10px 12px; flex-shrink: 0;
}
.df-use {
flex-shrink: 0; text-align: center; padding: 15px 0; border-radius: 14px;
background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.35);
font-size: 15px; font-weight: 800; transition: background 0.25s ease, color 0.25s ease;
}
.df-use.is-on { background: #fff; color: #0b0b0f; }
/* ── select network sheet + wheel ── */
.df-sheet { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-end; background: rgba(0,0,0,0.55); animation: df-sheet-fade 0.25s ease; }
@keyframes df-sheet-fade { from { opacity: 0; } to { opacity: 1; } }
.df-sheet-card {
width: 100%; background: #121216; border-radius: 20px 20px 0 0; padding: 10px 18px 24px;
box-shadow: 0 -12px 40px rgba(0,0,0,0.6); animation: df-sheet-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes df-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.df-sheet-handle { width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); margin: 0 auto 14px; }
.df-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.df-sheet-head > span:first-child { font-size: 17px; font-weight: 800; color: #fff; }
.df-sheet-done { font-size: 15px; font-weight: 700; color: #60a5fa; }
.df-wheel-row { display: flex; align-items: center; gap: 12px; }
.df-wheel {
position: relative; flex: 1; min-width: 0; overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.df-wheel-band { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); border-radius: 10px; border: 1px solid; pointer-events: none; transition: border-color 0.2s ease, background 0.2s ease; }
.df-wheel-track { position: relative; will-change: transform; }
.df-wheel-item { display: flex; align-items: center; gap: 10px; padding: 0 10px; transform-origin: left center; will-change: opacity, transform, filter; }
.df-wheel-name { flex: 1; font-size: 17px; font-weight: 700; color: #fff; white-space: nowrap; }
.df-wheel-dots { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.df-wheel-dots span { transition: height 0.2s ease, background 0.2s ease; }
.df-sheet-foot { margin-top: 10px; font-size: 11.5px; color: rgba(255,255,255,0.35); text-align: center; }
/* ── withdraw form (PerpsWithdrawForm) ── */
.df-form { padding: 4px 0 0; gap: 0; position: relative; }
.df-form > .df-head { padding: 10px 18px 4px; }
.df-wamount { min-height: 76px; align-items: center; gap: 6px; flex: 0 0 auto; }
.df-wdollar { color: rgba(255,255,255,0.4); font-weight: 700; align-self: center; font-size: 29px; }
.df-wamount .pa-buy-amount-num { font-size: 64px; }
.df-available { text-align: center; font-size: 13px; color: rgba(255,255,255,0.4); flex-shrink: 0; min-height: 20px; }
.df-available b { color: rgba(255,255,255,0.7); font-weight: 700; }
.df-maxlink { color: #60a5fa; font-weight: 800; }
.df-dest { padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 9px; flex-shrink: 0; }
.df-dest-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.4); }
.df-dest-row {
display: flex; align-items: center; gap: 10px; padding: 11px;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px;
}
.df-dest-empty { border-style: dashed; border-color: rgba(255,255,255,0.14); }
.df-dest-tile {
width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex;
align-items: center; justify-content: center; background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.6); font-size: 18px; font-weight: 700;
}
.df-dest-text { display: flex; flex-direction: column; flex: 1; min-width: 0; text-align: left; }
.df-dest-text b { font-size: 14px; font-weight: 700; color: #fff; }
.df-dest-text em { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,0.4); }
.df-dest-chain { color: rgba(255,255,255,0.62); font-weight: 700; }
.df-change { font-size: 12.5px; font-weight: 700; color: #60a5fa; flex-shrink: 0; }
.df-swipe { height: 68px; }
.df-disabled {
padding: 15px 0; border-radius: 16px; text-align: center;
background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.35);
font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
}
/* the add-address screen sits over the form */
.df-over {
position: absolute; inset: 0; z-index: 30; background: #000;
display: flex; flex-direction: column; gap: 14px; padding: 4px 18px 24px;
animation: df-over-in 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes df-over-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.df-save-off { color: rgba(255,255,255,0.75); }
.df-check-off { background: transparent; border: 1px solid rgba(255,255,255,0.22); color: transparent; }
.df-result-sub { font-size: 12.5px; color: rgba(255,255,255,0.42); font-weight: 600; margin-top: 6px; }
.df-label-input { padding-right: 13px; }
/* ===== fourth stop: perps ===============================================
From HLMobileBuySellTest + styles/hl/hlOutcome.module.css and trade.module.css. */
.pf-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px 6px; flex-shrink: 0; }
.pf-back { color: rgba(255,255,255,0.55); flex-shrink: 0; }
.pf-logo { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; }
.pf-price { font-size: 23.4px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; line-height: 1; color: #fff; white-space: nowrap; }
.pf-change { font-size: 13px; font-weight: 600; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.pf-ob { color: rgba(255,255,255,0.5); display: flex; margin-left: auto; }
.pf-controls { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 6px; gap: 8px; flex-shrink: 0; }
.pf-sides { display: flex; gap: 2px; background: rgba(255,255,255,0.04); border-radius: 8px; padding: 2px; }
.pf-side { padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.35); }
.pf-side.is-long { background: rgba(34,197,94,0.15); color: #22c55e; }
.pf-chips { display: flex; align-items: center; gap: 6px; }
.pf-chip {
display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 6px;
border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
color: #fff; font-size: 11px; font-weight: 700;
}
.pf-chip-dim { color: rgba(255,255,255,0.4); font-size: 10px; font-weight: 600; }
.pf-amount { min-height: 76px; align-items: center; gap: 0; flex: 0 0 auto; }
.pf-dollar { color: rgba(255,255,255,0.3); font-weight: 700; margin-right: 2px; font-size: 27px; align-self: center; }
.pf-amount .pa-buy-amount-num { font-size: 60px; }
/* the numpad's blinking caret */
.pf-caret { display: inline-block; width: 2px; height: 44px; background: #fff; border-radius: 1px; margin-left: 2px; align-self: center; flex-shrink: 0; animation: pf-caret 1.06s steps(1) infinite; }
@keyframes pf-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
/* take profit / stop loss */
.pf-tpsl { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 2px 16px 0; flex-shrink: 0; }
.pf-tpsl-track { width: 28px; height: 16px; border-radius: 8px; position: relative; background: rgba(255,255,255,0.08); flex-shrink: 0; }
.pf-tpsl-knob { width: 12px; height: 12px; border-radius: 6px; position: absolute; top: 2px; left: 2px; background: rgba(255,255,255,0.3); }
.pf-tpsl-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.35); white-space: nowrap; }
/* divider carrying the numpad ↔ chart pill */
.pf-divider { position: relative; display: flex; align-items: center; justify-content: center; margin: 4px 16px 8px; height: 34px; flex-shrink: 0; }
.pf-divider-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,0.08); }
.pf-modes { position: relative; display: flex; gap: 2px; padding: 3px; background: #0d0d0f; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; }
.pf-mode { display: flex; align-items: center; justify-content: center; width: 40px; height: 26px; border-radius: 7px; }
.pf-mode.is-on { background: rgba(255,255,255,0.1); }
.pf-avail-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 20px 4px; flex-shrink: 0; }
.pf-avail { font-size: 13px; color: rgba(255,255,255,0.4); font-weight: 500; }
.pf-avail b { color: rgba(255,255,255,0.6); font-weight: 700; }
/* leverage sheet */
.pf-lev-value { text-align: center; margin-bottom: 20px; }
.pf-lev-value b { font-size: 48px; font-weight: 800; color: #fff; letter-spacing: -1px; }
.pf-lev-value i { font-style: normal; font-size: 28px; font-weight: 700; color: rgba(255,255,255,0.5); margin-left: 2px; }
.pf-lev-ends { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,0.35); font-weight: 600; margin-bottom: 6px; }
.pf-lev-bar { display: flex; gap: 2px; height: 28px; padding: 4px 0; }
/* processing bar (orderProcessingBar + Yes) */
.pf-processing {
width: 100%; height: 60px; border-radius: 16px; display: flex; align-items: center;
justify-content: center; gap: 12px;
background: linear-gradient(135deg, #d4d4d4, #e8e8e8);
box-shadow: 0 0 40px rgba(200,200,200,0.25);
}
.pf-processing span { font-size: 17px; font-weight: 700; color: #000; }
.pf-processing-spin {
width: 22px; height: 22px; border: 2.5px solid rgba(0,0,0,0.15); border-top-color: #000;
border-radius: 50%; animation: pa-spin 0.7s linear infinite;
}
.pf-order-icon { width: 24px; height: 24px; border-radius: 6px; }
/* order sheet's mini chart — HLPerpMiniChart's frame */
.pf-chart { position: relative; flex: 1 1 0; min-height: 300px; padding: 0 4px; background: #000; }
.pf-chart-grid {
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
background-size: 15px 15px; background-position: -1px -1px;
}
.pf-chart-svg { position: relative; width: 100%; height: 100%; display: block; }
.pf-chart-scale { position: absolute; inset: 0; pointer-events: none; }
.pf-chart-scale span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; color: #888; font-variant-numeric: tabular-nums; }
.pf-chart-axis { position: absolute; left: 0; right: 0; bottom: 4px; height: 14px; pointer-events: none; }
.pf-chart-axis span { position: absolute; transform: translateX(-50%); font-size: 11px; color: #666; font-variant-numeric: tabular-nums; }
/* ===== fifth stop: predict ==============================================
pages/predict/PMTradePage at 390px. */
.pd-screen { overflow: hidden; }
.pd-topbar { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; flex-shrink: 0; }
.pd-round {
width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85);
}
.pd-topface { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pd-chance { font-size: 22px; font-weight: 800; color: #22c55e; letter-spacing: -0.5px; }
.pd-chance-dim { font-size: 15px; color: rgba(255,255,255,0.45); font-weight: 500; }
.pd-actions { margin-left: auto; display: flex; gap: 6px; }
.pd-actions .pd-round { width: 30px; height: 30px; border-radius: 10px; }
.pd-event { display: flex; gap: 12px; padding: 6px 14px 4px; flex-shrink: 0; }
.pd-event-icon { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.pd-event-text { min-width: 0; }
.pd-title { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.14; letter-spacing: -0.02em; color: #fff; }
.pd-sub { margin-top: 4px; font-size: 14px; color: rgba(255,255,255,0.45); }
.pd-sub b { color: #22c55e; font-weight: 700; }
.pd-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 14px 4px; flex-shrink: 0; }
.pd-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,0.75); }
.pd-legend-item i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pd-chart { position: relative; flex: 1 1 auto; min-height: 210px; }
.pd-chart-svg { width: 100%; height: 100%; display: block; }
.pd-chart-scale { position: absolute; inset: 0; pointer-events: none; }
.pd-chart-scale span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11.5px; color: rgba(255,255,255,0.35); }
.pd-chart-axis { position: absolute; left: 0; right: 0; bottom: 2px; height: 14px; pointer-events: none; }
.pd-chart-axis span { position: absolute; transform: translateX(-50%); font-size: 11.5px; color: rgba(255,255,255,0.3); }
/* Pinned to the right edge of the plot, all three on the same x — the way the
app parks them against the price scale. Positioned from the right so they
cannot drift apart as the plot width changes. */
.pd-chart-face { position: absolute; right: 34px; width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }
.pd-predictions { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 14px 2px; flex-shrink: 0; }
.pd-predictions-title { font-size: 18px; font-weight: 800; color: #fff; }
.pd-all { font-size: 14px; color: rgba(255,255,255,0.45); font-weight: 600; }
.pd-rows { display: flex; flex-direction: column; flex-shrink: 0; }
.pd-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px; }
.pd-row-face { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.pd-row-name { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-row-pct { font-size: 17px; font-weight: 800; color: rgba(255,255,255,0.5); }
.pd-sides { display: flex; gap: 6px; padding: 6px 12px 0; flex-shrink: 0; }
.pd-side { flex: 1; text-align: center; padding: 11px 0; border-radius: 12px; font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.4); }
.pd-side.is-on { background: rgba(255,255,255,0.07); color: #fff; }
.pd-cta { display: flex; gap: 10px; padding: 10px 12px 16px; flex-shrink: 0; }
.pd-yes, .pd-no {
flex: 1; display: flex; align-items: center; justify-content: space-between;
padding: 15px 16px; border-radius: 14px; font-size: 17px; font-weight: 800; letter-spacing: 0.3px;
}
.pd-yes { background: #f3f4f6; color: #0b0b0f; }
.pd-no { background: #f0a11c; color: #1a1204; }
/* ── AlphaFlow ─────────────────────────────────────────────────────────────
cro.trade Alpha: /feed and the CRONUS room. Every rule below is transcribed
from the app's own modules — feedPage.module.css, tokenPnlCard.module.css,
chatPage.module.css, chatRail.module.css, chatMessage.module.css and
chatComposer.module.css — at the values they hold at 390px. Interaction-only
declarations (cursor, :active, tap-highlight, focus rings) are dropped: this
screen cannot be touched. */
/* ---- feed page ---- */
.af-page {
flex: 1; min-height: 0; display: flex; flex-direction: column;
background: #000; color: #fff;
}
.af-header {
flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
padding: 10px 16px 10px;
background: rgba(0,0,0,0.82);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.af-header-title { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -0.3px; }
.af-filter {
flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 8px 16px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.af-scopewrap { position: relative; flex-shrink: 0; }
.af-scopebtn {
display: flex; align-items: center; gap: 5px;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px; padding: 6px 12px;
color: rgba(255,255,255,0.85); font-size: 12.5px; font-weight: 600;
}
.af-friends { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.af-friends-label { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.5); }
.af-switch {
position: relative; display: block; width: 38px; height: 22px; flex-shrink: 0;
border-radius: 11px; background: rgba(255,255,255,0.1);
}
.af-switch-knob {
position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
border-radius: 50%; background: #fff;
}
.af-list-clip { flex: 1; min-height: 0; overflow: hidden; }
.af-list { display: flex; flex-direction: column; will-change: transform; }
.af-card {
display: flex; gap: 10px; padding: 14px 16px 10px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.af-card-avatar {
width: 38px; height: 38px; border-radius: 22%; overflow: hidden; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.af-card-avatar svg, .af-card-pfp { width: 100%; height: 100%; border-radius: 22%; object-fit: cover; }
.af-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.af-trhead { display: flex; align-items: center; gap: 6px; min-width: 0; }
.af-card-name {
font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.92);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.af-badge-buy, .af-badge-sell {
font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 5px;
white-space: nowrap; flex-shrink: 0; line-height: 1; letter-spacing: 0.4px;
}
.af-badge-buy { color: #00C46C; background: rgba(0,196,108,0.15); }
.af-badge-sell { color: #ef4444; background: rgba(239,68,68,0.15); }
.af-rowlike {
display: flex; align-items: center; flex-shrink: 0;
padding: 2px 0 2px 6px; color: rgba(255,255,255,0.3);
}
.af-rowtime {
margin-left: auto; flex-shrink: 0; font-size: 12px; color: rgba(255,255,255,0.3);
white-space: nowrap; font-variant-numeric: tabular-nums;
}
.af-trrow { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 1px 0; }
.af-tricon { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.af-trsym { font-size: 13px; font-weight: 700; color: #e8e8ea; white-space: nowrap; flex-shrink: 0; }
.af-trval {
font-size: 13px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.af-trval-buy { color: #00C46C; }
.af-trval-sell { color: #ef4444; }
.af-trmeta {
font-size: 12px; color: #6b6b70; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; min-width: 0;
}
.af-trpnl-up, .af-trpnl-down {
font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.af-trpnl-up { color: #22c55e; }
.af-trpnl-down { color: #ef4444; }
.af-cardpnl { margin-top: 8px; }
/* /feed's nav: the centre mark is what carries .active there, and the app's
own .feedCenter.active — a 10% white plate plus the mark's four drop
shadows. The side items stay at rest. */
.af-page .pa-nav-center.is-on {
color: #fff; background: rgba(255,255,255,0.1);
}
.af-page .pa-nav-center.is-on img {
filter:
drop-shadow(0 -1px 0 rgba(255,255,255,0.6))
drop-shadow(0 1px 0 rgba(0,0,0,0.7))
drop-shadow(0 4px 8px rgba(0,0,0,0.8))
drop-shadow(0 -1px 3px rgba(255,255,255,0.2));
}
/* The list has to stop above the floating pill, which sits over it. */
.af-page .af-list-clip { padding-bottom: 96px; }
/* ---- alpha note (FeedAlphaCard) ---- */
.af-badge-alpha {
font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
padding: 2px 6px; border-radius: 5px;
background: rgba(255,255,255,0.13); color: #EDEDF0; flex-shrink: 0;
}
.af-alpha-bubble {
position: relative; border-radius: 18px; padding: 10px 14px 12px; margin-bottom: 10px;
background: linear-gradient(180deg, #3C3D42 0%, #2A2B30 45%, #1D1E22 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 6px 16px rgba(0,0,0,0.45);
}
.af-alpha-text {
font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,0.95);
white-space: pre-wrap; word-break: break-word;
}
.af-alpha-tail {
position: absolute; left: 16px; bottom: -16px; width: 26px; height: 17px; display: block;
}
.af-alpha-tail path { fill: #1D1E22; }
.af-alpha-pnl { margin-top: 2px; }
/* ---- position card (tokenPnlCard, compact) ----
Transcribed rule for rule from tokenPnlCard.module.css at 390px — which is
ABOVE its only media query (max-width: 380px), so the 44px logo and the 15px
symbol/PnL are the sizes that apply. The .line rules matter: the price row is
`flex: 1 1 auto; min-width: 0` and ellipsises, and the figure beside it is
`flex: 0 0 auto; margin-left: auto` — without that pair the two collide. */
.af-pnl {
position: relative; overflow: hidden;
border-radius: 16px; clip-path: inset(0 round 16px); padding: 0;
background: rgba(10,11,13,0.92); border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
margin-bottom: 8px; display: flex; flex-direction: column;
}
.af-pnl-glow {
position: absolute; inset: 0; z-index: 0; overflow: hidden;
border-radius: 16px; pointer-events: none;
}
.af-pnl-glowimg {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 250%; height: 250%; object-fit: cover;
filter: blur(16px) saturate(180%) brightness(0.4); opacity: 0.45;
}
.af-pnl-top {
position: relative; z-index: 1;
display: flex; align-items: flex-start; justify-content: space-between;
gap: 6px; padding: 12px 14px 8px;
}
.af-pnl-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.af-pnl-logowrap { position: relative; flex-shrink: 0; }
.af-pnl-logo {
width: 44px; height: 44px; border-radius: 12px;
background: rgba(255,255,255,0.06); object-fit: cover; display: block;
}
.af-pnl-info { flex: 1; min-width: 0; overflow: hidden; }
.af-pnl-line { display: flex; align-items: baseline; gap: 10px; }
.af-pnl-line > .af-pnl-symrow,
.af-pnl-line > .af-pnl-pricerow { flex: 1 1 auto; min-width: 0; }
.af-pnl-line > .af-pnl-val,
.af-pnl-line > .af-pnl-pct { flex: 0 0 auto; margin-left: auto; text-align: right; margin-bottom: 0; }
.af-pnl-symrow { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.af-pnl-sym {
font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em;
line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.af-pnl-val {
display: block; font-size: 15px; font-weight: 700; line-height: 1.1;
letter-spacing: -0.01em; margin-bottom: 2px; font-variant-numeric: tabular-nums;
}
.af-pnl-pricerow {
font-size: 12px; color: rgba(255,255,255,0.35); font-variant-numeric: tabular-nums;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.af-pnl-arrow { color: #fff; margin: 0 1px; }
.af-pnl-now { color: #fff; }
.af-pnl-pct {
display: block; font-size: 11px; font-weight: 600; line-height: 1;
font-variant-numeric: tabular-nums;
}
.af-pos { color: #22c55e; }
.af-neg { color: #ef4444; }
.af-pos-sub { color: rgba(34,197,94,0.6); }
.af-neg-sub { color: rgba(239,68,68,0.6); }
.af-pnl-stats {
position: relative; z-index: 1;
display: flex; align-items: flex-start; justify-content: space-between;
padding: 6px 14px 10px;
}
.af-pnl-stat { display: flex; flex-direction: column; gap: 2px; }
.af-pnl-stats .af-pnl-stat:nth-child(2) { align-items: center; text-align: center; }
.af-pnl-stats .af-pnl-stat:last-child { align-items: flex-end; text-align: right; }
.af-pnl-slabel { font-size: 10px; color: rgba(255,255,255,0.3); font-weight: 500; line-height: 1; }
.af-pnl-svalue {
font-size: 12px; color: rgba(255,255,255,0.8); font-weight: 600;
line-height: 1; font-variant-numeric: tabular-nums;
}
/* ---- chat shell ---- */
.af-shell {
flex: 1; min-height: 0; display: flex; flex-direction: row;
background: #000; color: #fff; position: relative;
/* The phone's own inset, which is what env(safe-area-inset-top) is on a real
device — the room reads it as --chat-safe-top and pushes the back button,
the title and the rail down by it while the artwork stays on inset:0. */
--chat-safe-top: 44px;
--chat-rail-w: 56px; --chat-strip-h: 62px;
/* Derived from --chat-rail-w rather than set beside it, so the two can never
disagree — folding the rail is then one declaration. */
--chat-back-clear: calc(56px - var(--chat-rail-w));
--bub-other: rgba(255,255,255,0.065); --bub-r: 16px; --bub-r-tight: 5px;
}
.af-back {
position: absolute; top: calc(10px + var(--chat-safe-top, 0px)); left: 6px; z-index: 20;
display: flex; align-items: center; justify-content: center;
width: 44px; height: 34px; color: rgba(255,255,255,0.62);
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.85));
}
.af-rail {
flex: 0 0 var(--chat-rail-w); width: var(--chat-rail-w); display: flex; flex-direction: column; align-items: flex-start;
padding-top: calc(10px + var(--chat-safe-top, 0px)); background: #0a0a0a;
border-right: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
}
.af-railhead { flex: 0 0 auto; height: 34px; }
.af-raildiv { flex: 0 0 auto; width: 32px; height: 1px; margin: 7px 0 9px 6px; background: rgba(255,255,255,0.08); }
.af-raillist {
flex: 1; min-height: 0; align-self: stretch; display: flex; flex-direction: column;
align-items: flex-start; gap: 8px; padding: 0 0 72px 6px; overflow: hidden;
}
.af-railslot { position: relative; width: 44px; height: 44px; flex: 0 0 auto; }
.af-railpill {
position: absolute; left: -6px; top: 50%; width: 4px; height: 0;
border-radius: 0 4px 4px 0; background: #fff; transform: translateY(-50%);
}
.af-railpill.is-on { height: 24px; }
.af-railitem {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
border-radius: 30%; overflow: hidden; background: #000; color: #fff;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.af-railitem.is-on { border-radius: 22%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.34); }
.af-railimg { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ChatRail's .item:active — the tile the finger is on. */
.af-railitem.is-pressed { transform: scale(0.94); }
.af-cromark { display: block; width: 34px; height: 34px; object-fit: contain; }
.af-railtoggle {
position: absolute; left: var(--chat-rail-w); top: 50%; transform: translateY(-50%); z-index: 4;
display: flex; align-items: center; justify-content: center;
width: 15px; height: 54px; border-radius: 0 7px 7px 0;
background: rgba(255,255,255,0.075); color: rgba(255,255,255,0.45);
}
.af-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.af-chdr {
position: relative; flex-shrink: 0; display: flex; align-items: flex-end; gap: 10px;
height: calc(92px + var(--chat-safe-top, 0px));
padding: var(--chat-safe-top, 0px) 14px 10px calc(14px + var(--chat-back-clear, 0px));
overflow: hidden;
background: #000; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.af-chdr-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.af-chdr-scrim {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.88) 100%);
}
.af-chdr-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.af-chdr-title {
margin: 0; display: flex; align-items: center; gap: 6px;
font-size: 20px; font-weight: 800; letter-spacing: 0.6px;
text-shadow: 0 2px 12px rgba(0,0,0,0.9);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.af-chdr-titletext { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.af-chdr-info {
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
width: 15px; height: 15px; color: rgba(255,255,255,0.42);
}
.af-chdr-stats {
display: flex; align-items: baseline; gap: 7px; font-size: 12px; font-weight: 600;
line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap;
color: rgba(255,255,255,0.45);
}
.af-chdr-price { color: rgba(255,255,255,0.92); font-weight: 700; }
.af-chdr-up, .af-chdr-down, .af-chdr-flat { font-size: 11px; font-weight: 600; }
.af-chdr-up { color: #22c55e; }
.af-chdr-down { color: #ef4444; }
.af-chdr-actions { position: relative; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.af-chdr-share {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 999px; color: #fff;
border: 1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.45);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.af-chlist {
flex: 1; min-height: 0; overflow: hidden;
display: flex; flex-direction: column-reverse; gap: 2px; padding: 0 16px;
/* The list runs UNDER the strip, exactly as .list does — that negative margin
is what puts a bubble behind the composer's blur instead of above it. The
clearance comes from the .padBottom spacer child, not from padding: on a
column-reverse scroller the scroll-start padding is dropped in several
engines, which is why the app uses spacers too. */
margin-bottom: -62px;
}
.af-padbottom { flex-shrink: 0; height: 66px; }
.af-padtop { flex-shrink: 0; height: 12px; }
/* ---- message rows ---- */
.af-msg { display: flex; align-items: flex-end; gap: 7px; margin-top: 7px; }
.af-msg-avatar { width: 30px; flex-shrink: 0; display: flex; }
.af-msg-avatar svg { border-radius: 22%; }
.af-msg-bubble {
position: relative; min-width: 0; max-width: 78%; padding: 5px 10px;
background: var(--bub-other); border-radius: var(--bub-r);
border-bottom-left-radius: 0; --stamp-w: 46px;
}
.af-msg-bubble::after {
content: ''; position: absolute; bottom: 0; left: -8px; width: 8px; height: 13px;
background: inherit;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: 100% 100%; mask-size: 100% 100%; pointer-events: none;
}
.af-msg-name {
display: block; font-size: 12.5px; font-weight: 700; letter-spacing: -0.1px;
color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; max-width: 100%; margin-bottom: 1px;
}
.af-buyhead { display: flex; align-items: center; gap: 5px; min-width: 0; }
.af-buycount {
flex-shrink: 0; padding: 0 6px; border-radius: 999px;
background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.55);
font-size: 10.5px; font-weight: 700; line-height: 15px; letter-spacing: -0.1px;
margin-bottom: 1px; font-variant-numeric: tabular-nums;
}
.af-buyline {
display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
padding-right: var(--stamp-w); font-size: 14px; line-height: 1.45;
}
.af-buychip { flex-shrink: 0; color: rgba(74,222,128,0.85); font-size: 13px; font-weight: 600; }
.af-buyusd { font-weight: 700; color: #4ade80; font-variant-numeric: tabular-nums; }
.af-buymc { color: rgba(255,255,255,0.45); font-variant-numeric: tabular-nums; }
.af-ticker {
display: inline-flex; align-items: center; gap: 4px; height: 18px; line-height: 18px;
padding: 0 7px 0 4px; border-radius: 999px; background: rgba(255,255,255,0.09);
color: #fff; font-weight: 600; vertical-align: middle;
}
.af-ticker-logo { border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.af-msg-body {
font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.92);
white-space: pre-wrap; overflow-wrap: anywhere; padding-right: var(--stamp-w);
}
.af-msg-meta { position: absolute; right: 9px; bottom: 4px; display: flex; align-items: center; gap: 3px; }
.af-msg-meta-inline { position: static; margin-left: auto; flex-shrink: 0; padding-bottom: 4px; }
.af-msg-time {
font-size: 10.5px; line-height: 1; color: rgba(255,255,255,0.38);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.af-rxrow { display: flex; align-items: flex-end; gap: 6px; margin-top: 4px; }
.af-rx { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.af-chip {
display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px 0 6px;
border-radius: 999px; background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.8);
}
.af-chip-emoji { font-size: 13px; line-height: 1; }
.af-chip-count { font-size: 11.5px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
/* ---- composer ---- */
.af-composer {
flex-shrink: 0; position: relative; z-index: 1;
margin-left: calc(-1 * var(--chat-rail-w));
padding: 10px 16px 10px calc(var(--chat-rail-w) + 16px);
min-height: 62px; box-sizing: border-box;
}
.af-inputrow { display: flex; align-items: flex-end; gap: 6px; }
.af-inputwrap {
flex: 1; min-width: 0; display: flex; align-items: flex-end;
background: rgba(255,255,255,0.11);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-radius: 20px; padding-right: 4px;
}
.af-input {
flex: 1; min-width: 0; padding: 10px 4px 10px 14px;
color: rgba(255,255,255,0.28); font-size: 16px; line-height: 1.35;
}
.af-pill {
flex-shrink: 0; width: 32px; height: 32px; margin-bottom: 5px;
display: flex; align-items: center; justify-content: center;
border-radius: 999px; color: rgba(255,255,255,0.45);
}
.af-pill-ticker { font-size: 19px; font-weight: 800; line-height: 1; }
.af-send {
flex-shrink: 0; width: 38px; height: 38px; margin-bottom: 2px;
display: flex; align-items: center; justify-content: center;
background: #fff; border-radius: 50%; color: #000; opacity: 0.35;
}
.af-send svg { transform: translateX(1px); }
.af-daysep { display: flex; justify-content: center; padding: 12px 0 6px; }
.af-daysep-label {
padding: 3px 11px; border-radius: 999px; background: rgba(0,0,0,0.32);
font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px; color: rgba(255,255,255,0.6);
}
/* The bar over the room. The feed half stacks its own in the flow; here the
banner has to reach the top of the screen, so this floats above it. */
.af-statusbar {
position: absolute; top: 0; left: 0; right: 0; z-index: 25;
pointer-events: none;
}
/* ---- the cro.trade alpha room's header (/chat/alpha) ----
The plain .header, not .headerBanner: 56px, and instead of a room title it
carries the alpha mark on the left with the feed's own two controls, compact,
on the right. */
.af-ahdr {
position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
height: calc(56px + var(--chat-safe-top, 0px));
padding: var(--chat-safe-top, 0px) 14px 0 calc(14px + var(--chat-back-clear, 0px));
background: #000; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.af-ahdr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.af-ahdr-mark {
display: block; height: 34px; width: auto; max-width: 100%;
object-fit: contain; object-position: left center;
}
.af-ahdr-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.af-scopebtn-c { gap: 4px; padding: 5px 9px; font-size: 11.5px; }
.af-friends-c { gap: 6px; margin-left: 0; }
.af-friends-c .af-friends-label { font-size: 11.5px; }
.af-switch-c { width: 32px; height: 19px; border-radius: 10px; }
.af-switch-c .af-switch-knob { width: 15px; height: 15px; }
.af-scroller { flex: 1; min-height: 0; overflow: hidden; padding-bottom: 12px; }
/* Rail folded away. One declaration, exactly as .shellRailCollapsed does it:
the header's left padding, the composer's bleed and the edge tab's own offset
are all written against --chat-rail-w, so nothing else has to know.
Not animated, and that is the app's decision rather than a shortcut: widening
the pane by 56px re-wraps every row in the list, so a transition would be a
dozen full relayouts instead of one. Only the chevron moves. */
.af-shell.is-railfolded { --chat-rail-w: 0px; }
.af-railtoggle svg { transition: transform 0.18s ease; }
.is-railfolded .af-railtoggle svg { transform: rotate(180deg); }
/* ── the marquees, in the hero ────────────────────────────────────────────
The rows moved up out of their own section: the headline above them already
says "trade everything", so they now sit under it as the evidence for it. */
.ph-assets { width: 100vw; margin-top: clamp(20px, 3.5vh, 40px); }
/* ── the cast, over each stop's heading ───────────────────────────────────
A fixed-height slot, empty on the two stops that have no character of their
own — the headline must not move from stop to stop. Left-aligned to the copy
column, centred once the stage stacks. */
.st-cast { height: clamp(96px, 11vw, 148px); display: flex; align-items: flex-end; }
.st-cast-img {
height: 100%; width: auto; display: block;
object-fit: contain; object-position: bottom left;
filter: drop-shadow(0 18px 26px rgba(0,0,0,0.45));
}
/* ── stop copy: the rail, the counter and the headline ────────────────────
Type is Archivo for the headline — a wide, flat-sided grotesk that tightens
as it gets bigger, which is what a heading beside a metal mark wants — with
JetBrains Mono on the counter and the label, so every small element on the
block is monospaced and the headline is the only thing that is not. */
/* The rail runs down, because that is the direction the stops arrive from, and
it IS the progress indicator — six ticks, filled from the top to the one you
are on. That is why the horizontal dots are gone: they counted the same thing
twice, and sideways. */
.st-rail {
position: relative; flex: 0 0 1px; width: 1px; align-self: stretch;
background: rgba(255,255,255,0.12);
}
.st-rail::after { transition: none; } /* scroll-driven: a transition would lag the finger */
.st-rail::after {
content: ''; position: absolute; left: 0; top: 0; width: 1px; height: var(--fill, 6%);
background: linear-gradient(180deg, var(--primary-blue), rgba(16,153,250,0.35));
transition: height 0.4s var(--ease-out);
}
.st-tick {
position: absolute; left: -2px; width: 5px; height: 5px; border-radius: 50%;
background: rgba(255,255,255,0.16);
}
.st-tick.is-on {
left: -3px; width: 7px; height: 7px;
background: var(--primary-blue); box-shadow: 0 0 0 4px rgba(16,153,250,0.14);
}
.st-rail-arrow { position: absolute; left: -4px; bottom: -2px; color: rgba(255,255,255,0.28); }
/* flex: 1 so the block fills the row. Without it the item is shrink-to-fit and
takes its width from its widest child's max-content — which is .st-sub's own
36ch cap, so the sub was deciding how wide the headline could be and the
titles wrapped a line early. */
.st-label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.st-n {
font: 700 12px/1 var(--font-mono-ui); letter-spacing: 0.06em;
color: var(--primary-blue); font-variant-numeric: tabular-nums;
}
.st-n span { color: rgba(255,255,255,0.38); }
.st-word {
font: 500 11px/1 var(--font-mono-ui); letter-spacing: 0.22em;
text-transform: uppercase; color: rgba(255,255,255,0.62);
}
.st-title {
margin: 0; font-family: var(--font-display);
font-weight: 800; font-stretch: 112%;
font-size: clamp(34px, 4.3vw, 62px); line-height: 0.94; letter-spacing: -0.028em;
color: var(--text-bright); text-wrap: balance;
}
.st-sub {
margin: 18px 0 0; max-width: 36ch;
font-size: 16.5px; line-height: 1.5; color: rgba(255,255,255,0.62);
}
/* The hero's aside, a second and last time. Same ratio .ph-accent uses: a
fraction of the line it hangs off, rotated, nudged down. One stop in six —
repeat it and it stops being a note on both ends of the page. */
.st-hand {
font-family: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
font-weight: 700; color: var(--primary-blue);
font-size: 0.44em; letter-spacing: 0; line-height: 1;
font-stretch: normal;
display: inline-block; transform: rotate(-7deg) translateY(0.16em);
margin-left: 0.22em; white-space: nowrap;
}
/* The metal mark stands in for a mascot on the markets stop. Smaller than a
full figure and lit rather than shadowed, because it is an object, not a
character standing on the baseline. */
.st-cast-img.is-mark {
height: 84%;
filter: drop-shadow(0 10px 22px rgba(0,0,0,0.6)) drop-shadow(0 0 26px rgba(16,153,250,0.22));
}
/* Every character asset is 401x536 and every one of them ends in a straight
horizontal cut — they were drawn to sit at the bottom of a bento card, where
the card's own edge hid it. On open black there is no edge to hide it and all
five read as cropped photographs, king (a bust) worst of all.
Fading the last stretch is what puts that right: the cut stops being an edge
and becomes the figure receding into the ground. The metal mark is excluded —
it is a complete object, not a crop. */
.st-cast-img:not(.is-mark) {
-webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
/* king is head-and-shoulders where the others are three-quarter length, so at a
shared height his head comes out twice the size of theirs. Backing him off
is what brings the two crops into the same room. */
.st-cast-img.is-bust {
height: 82%;
-webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
}
/* ── deposit half: the push, and the transfer sheet it opens ───────────────
The banner is OS chrome rather than app markup, so it is drawn to iOS 17:
an inset card on a material fill, a 38px icon at 9px radius, the app name in
caps above a bold title and a two-line body, and the age at the top right. */
.df-push {
position: absolute; top: 52px; left: 10px; right: 10px; z-index: 40;
display: flex; align-items: flex-start; gap: 11px;
padding: 12px 14px 13px; border-radius: 24px;
background: rgba(40, 40, 44, 0.72);
-webkit-backdrop-filter: blur(26px) saturate(180%);
backdrop-filter: blur(26px) saturate(180%);
box-shadow: 0 12px 34px rgba(0,0,0,0.55), inset 0 0 0 0.5px rgba(255,255,255,0.14);
transition: transform 0.12s ease;
}
/* The press iOS gives a banner before it opens — the card takes the finger. */
.df-push.is-pressed { transform: scale(0.97) !important; }
.df-push-icon { width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; display: block; }
.df-push-body { flex: 1; min-width: 0; }
.df-push-app {
font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
color: rgba(255,255,255,0.62); margin-bottom: 1px;
}
.df-push-title { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.df-push-text { font-size: 15px; line-height: 1.28; color: rgba(255,255,255,0.92); }
.df-push-age { font-size: 12px; color: rgba(255,255,255,0.5); flex-shrink: 0; padding-top: 1px; }
/* The sheet the tap opens — CashTransferForm over the wallet. */
/* The sheet covers the app but NOT the phone's own bar — iOS draws that above
everything, so the status bar is lifted over it rather than the sheet being
inset, which is what the app does too (polyBuySheet has paddingTop: 0 and the
header carries the notch inset). */
.df-tsheet {
position: absolute; inset: 0; z-index: 30; background: #07070a;
display: flex; flex-direction: column; padding-top: 44px;
}
.df-screen .pa-statusbar { position: relative; z-index: 45; }
.df-thead { display: flex; align-items: center; gap: 10px; padding: 6px 14px 2px; flex-shrink: 0; }
.df-ttitle { flex: 1; text-align: center; font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.df-thead-ghost { width: 34px; flex-shrink: 0; }
.df-tamount {
flex: 0 0 auto; min-height: 76px; display: flex; align-items: center;
justify-content: center; gap: 6px;
}
.df-tdollar { font-size: 24px; color: rgba(255,255,255,0.4); font-weight: 700; }
.df-tnum { font-size: 54px; font-weight: 800; color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.df-trow { display: flex; align-items: center; gap: 8px; padding: 4px 16px 0; flex-shrink: 0; position: relative; }
.df-bc {
flex: 1; min-width: 0; padding: 12px 14px; border-radius: 14px;
border: 1px solid; display: flex; flex-direction: column; gap: 3px;
}
.df-bc-left { align-items: flex-start; }
.df-bc-right { align-items: flex-end; }
.df-bc-top { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.df-bc-mark { display: flex; }
.df-bc-chev { color: rgba(255,255,255,0.4); display: flex; flex-shrink: 0; }
.df-bc-label {
font-size: 13px; color: rgba(255,255,255,0.55); font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.df-bc-bal { font-size: 17px; color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.df-tswap {
position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
width: 34px; height: 34px; border-radius: 50%;
background: #e8e8ea; color: #0a0a0c; box-shadow: 0 0 0 4px #07070a;
display: flex; align-items: center; justify-content: center; z-index: 1;
}
.df-tswap.is-off { opacity: 0.45; }
.df-tpct { display: flex; gap: 8px; padding: 10px 16px 0; flex-shrink: 0; }
.df-tchip {
flex: 1; padding: 11px 0; border-radius: 12px; text-align: center;
background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.62);
font-size: 15px; font-weight: 800;
}
.df-tchip.is-on { background: rgba(255,255,255,0.14); color: #fff; }
.df-tnumpad { flex: 1 1 auto; }
.df-tfoot {
padding: 6px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0;
}
.df-tprev { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.df-tprev-label { color: rgba(255,255,255,0.5); font-weight: 700; }
.df-tprev-vals { display: flex; align-items: center; gap: 7px; font-weight: 800; }
.df-tprev-was { color: rgba(255,255,255,0.35); }
.df-tprev-now { color: #fff; }
.df-tcta {
width: 100%; padding: 16px 0; border-radius: 16px; text-align: center;
background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.35);
font-size: 16px; font-weight: 800;
}
/* The result screen the transfer ends on. */
.df-tdone {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 10px; padding: 0 20px;
background: #07070a; overflow: hidden;
}
.df-tdone-label { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.01em; }
.df-tdone-amount { font-size: 46px; font-weight: 800; color: #fff; letter-spacing: -0.03em; }
.df-tdone-amount.is-pop { animation: dfPop 0.42s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
@keyframes dfPop { from { transform: scale(0.9); opacity: 0.4 } to { transform: none; opacity: 1 } }
.df-tdone-token { display: flex; align-items: center; gap: 8px; }
.df-tdone-name { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.72); }
.df-tdone-bottom { position: absolute; left: 20px; right: 20px; bottom: 22px; }
.df-tdone-close {
width: 100%; padding: 16px 0; border-radius: 16px; text-align: center;
background: #e8e8ea; color: #0a0a0c; font-size: 16px; font-weight: 800;
}
/* ── SwipeConfirm ──────────────────────────────────────────────────────────
The control BOTH the transfer form and the withdraw form commit with — hl/
SwipeConfirm.tsx, CHIP 52, INSET 2, so the track is 56 tall at radius 16.
Deliberately neutral: the green swipe belongs to CronosBuySell, where green
means buy. Using it here said "buy" on a screen that moves cash. */
.df-sc {
position: relative; width: 100%; height: 56px; border-radius: 16px;
background: rgba(255,255,255,0.05); overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.df-sc-fill {
position: absolute; left: 0; top: 0; bottom: 0; width: 54px;
background: rgba(232,232,234,0.10);
transition: width 0.5s cubic-bezier(0.3, 0, 0.2, 1);
}
.df-sc.is-done .df-sc-fill { width: 100%; }
.df-sc-label {
position: relative; font-size: 16px; font-weight: 800; color: #fff;
padding-left: 52px; white-space: nowrap;
}
.df-sc.is-done .df-sc-label { padding-left: 0; }
.df-sc-chip {
position: absolute; left: 2px; top: 2px; width: 52px; height: 52px;
border-radius: 14px; background: #e8e8ea; color: #0a0a0c;
display: flex; align-items: center; justify-content: center;
transition: transform 0.5s cubic-bezier(0.3, 0, 0.2, 1);
}
.df-sc.is-done .df-sc-chip { transform: translateX(302px); }
/* ── iOS Lock Screen ───────────────────────────────────────────────────────
Where this notification actually finds you: the watcher fires when the USDC
lands on chain, not when the app is next opened. Platform chrome, drawn to
iOS 17 rather than transcribed from anywhere — nothing here is ours. */
.df-lock {
position: absolute; inset: 0; z-index: 60; overflow: hidden;
display: flex; flex-direction: column;
transform-origin: 50% 50%;
}
.df-lock-wall {
position: absolute; inset: 0;
background:
radial-gradient(72% 46% at 50% 8%, rgba(16,153,250,0.20), transparent 68%),
radial-gradient(60% 40% at 82% 78%, rgba(0,78,146,0.26), transparent 70%),
linear-gradient(180deg, #0b1220 0%, #05070c 58%, #000 100%);
}
.df-lock-status { position: relative; z-index: 1; }
.df-lock-head {
position: relative; z-index: 1; flex: 0 0 auto;
display: flex; flex-direction: column; align-items: center;
padding-top: 8px; color: #fff;
}
.df-lock-lockicon { color: rgba(255,255,255,0.9); display: flex; margin-bottom: 12px; }
.df-lock-date { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; color: rgba(255,255,255,0.92); }
/* The clock is the one thing on this screen that is unmistakably iOS: very
large, light, and tracked in rather than out. */
.df-lock-time {
font-size: 84px; font-weight: 300; line-height: 1.02; letter-spacing: -0.02em;
color: #fff; font-variant-numeric: tabular-nums; margin-top: -2px;
}
/* Notifications live in the lower third, not under the clock. */
.df-lock-stack {
position: relative; z-index: 1; flex: 1 1 auto;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 0 10px 14px;
}
.df-lock-actions {
position: relative; z-index: 1; flex: 0 0 auto;
display: flex; justify-content: space-between; padding: 0 34px 10px;
}
.df-lock-btn {
width: 48px; height: 48px; border-radius: 50%;
background: rgba(255,255,255,0.14);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
display: flex; align-items: center; justify-content: center; color: #fff;
}
.df-lock-home {
position: relative; z-index: 1; flex: 0 0 auto;
width: 140px; height: 5px; border-radius: 3px;
background: rgba(255,255,255,0.85); margin: 0 auto 8px;
}
/* On the lock screen the card sits in the stack rather than dropping from the
top, and it arrives from below with the rest of the stack. */
.df-push.is-lock { position: static; margin: 0; }
/* ── FAQ ───────────────────────────────────────────────────────────────────
No fold, and no "frequently asked." banner over it. The questions are the
section: set in the stops' own face, near their size, under the same mono
label every other section wears. The old accordion was a generic widget with
a blue-filled circle on each row — the circle was the one large saturated
accent on a page where blue is otherwise a hairline, a counter and one line
of a headline. */
.faq-label {
display: block;
font: 500 11px/1 var(--font-mono-ui); letter-spacing: 0.22em;
text-transform: uppercase; color: rgba(255,255,255,0.62);
margin-bottom: clamp(22px, 3vh, 34px);
}
.faq-list { display: flex; flex-direction: column; }
/* The fold, with no control drawn for it. The state is the row: the open
question comes to full white and its own rule lights in the accent, the
closed ones sit back at 55%. A circle, a chevron or a +/- on the right was
the thing that read as a generic widget, so there is none. */
.faq-pair {
border-top: 1px solid var(--glass-border);
transition: border-color 0.3s ease;
}
.faq-pair:first-child { border-top: none; }
.faq-pair:last-child { border-bottom: 1px solid var(--glass-border); }
.faq-pair.is-open { border-top-color: var(--primary-blue); }
.faq-pair:first-child.is-open { border-top: 1px solid var(--primary-blue); }
.faq-qh { margin: 0; }
.faq-q {
display: block; width: 100%; text-align: left;
background: none; border: none; cursor: pointer;
padding: clamp(22px, 3vh, 30px) 2px;
font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
font-size: clamp(22px, 2.6vw, 34px); line-height: 1.04; letter-spacing: -0.028em;
color: rgba(255,255,255,0.55); text-wrap: balance;
transition: color 0.22s ease;
-webkit-tap-highlight-color: transparent;
}
.faq-q:hover { color: rgba(255,255,255,0.8); }
.faq-pair.is-open .faq-q { color: var(--text-bright); }
.faq-a-wrap {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows 0.38s var(--ease-out);
}
.faq-pair.is-open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a-clip { overflow: hidden; }
.faq-a {
margin: 0; padding: 0 2px clamp(24px, 3.4vh, 32px);
font-size: 16px; line-height: 1.6;
color: rgba(255,255,255,0.62); max-width: 58ch;
}
.faq-a a { color: var(--primary-blue); text-decoration: none; }
.faq-a a:hover { text-decoration: underline; }
/* The landing's sticky bar steps aside while the phone section is pinned.
Mobile only: on desktop the phone sits well below the bar and nothing is
covered, and hiding the nav there would remove a control for no reason. */
@media (max-width: 900px) {
.lp-hd {
transition: opacity 0.28s ease, transform 0.28s var(--ease-out);
}
html.stage-pinned .lp-hd {
opacity: 0; transform: translateY(-100%); pointer-events: none;
}
/* The download dock goes with it, and for the same reason. It is 96px of a
844px screen — badge, its bottom offset and the gap above it — standing in
front of the one section whose job is showing the app, on every frame of
it. It is back the moment the section is not pinned, so the page still
carries a download button everywhere a reader might decide they want one. */
html.stage-pinned .fdl {
opacity: 0; transform: translate(-50%, 20px); pointer-events: none;
}
}
/* The asset marquee, on a phone.
AssetMarquee sizes its badges from a JS prop (116) and writes it as an inline
style, so this needs !important to reach it — the alternative is threading a
breakpoint through the component, which would put a layout decision in a
place CSS can already see.
Why at all: at 116 the two rows are 368px of a 667px screen. On an iPhone SE
with the TestFlight badge showing — three badges, which wrap to two rows —
the hero came to 709px and the third badge sat below the fold. 72 brings the
marquee to 240 and the whole hero inside the glass, and the badges still read
as the texture they are meant to be rather than as content. */
@media (max-width: 900px) {
.cro-asset-badge { height: 72px !important; width: 72px !important; }
}
@media (max-width: 900px) and (max-height: 720px) {
.cro-asset-badge { height: 60px !important; width: 60px !important; }
}
/* ── the stage's responsive tiers ──────────────────────────────────────────
MOVED to the end of the file, and that is the whole point of this comment.
They used to sit at line ~1320, above the .st-title / .st-sub / .st-cast
declarations that came in with the type revamp. Same specificity, later
source wins, so every property those tiers tried to override was silently
dead: the mobile title rendered at the desktop clamp's floor and the figure
at its desktop height. Anything added below here must go BEFORE these. */
@media (max-width: 900px) {
.st-inner { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: center; }
/* `justify-items: center` takes `stretch` off both grid items, and this one's
children are absolutely positioned — so without a width of its own the
column measured ~0 and the copy inside it wrapped one word per line and ran
off the right edge. The phone column has real content and does not need it. */
.st-copy-col {
--st-block: calc(196px + clamp(64px, 17vw, 96px));
width: 100%; gap: 0;
}
/* The headline was running edge to edge at 390: the column is full width
here and nothing was holding the type off the glass. */
.st-copy { align-items: center; text-align: center; max-width: none; padding: 0 18px; }
/* 250px of phone plus a figure, a counter, a three-line headline and two
lines of sub do not fit in 844px minus the dock — the phone's top edge was
going off the top of the viewport. */
/* The nav steps aside on this section now, so the phone takes back the
49px it was hiding behind. 55vw/220 is the widest that still leaves the
whole frame on screen at 390x844 — measured, not guessed: 58vw put the
phone's top edge 6px above the viewport. */
/* The third term is the one that matters on a short phone. A frame 9:19.2
needs 0.469 x its height in width, so capping the WIDTH at a share of the
viewport height is what stops the phone outgrowing the screen it is drawn
on — a width-only rule cannot see that a 375px-wide SE is 177px shorter
than a 375px-wide 13 mini. */
.st-phone-col .cs-phone { width: min(64vw, 260px, 30dvh); }
.st-cast { height: clamp(64px, 17vw, 96px); justify-content: center; }
.st-cast-img { object-position: bottom center; }
.st-rail { display: none; } /* the column is centred here; a left rail would not be */
.st-label { justify-content: center; }
.st-sub { margin-left: auto; margin-right: auto; }
/* No padding for the dock any more: it hides while this section is pinned,
so reserving 96px for something that is not on screen was 96px the phone
could have had. A small floor remains so the sub-line never sits on the
very edge of the glass. */
.st-sticky { padding-bottom: 18px; }
}
/* Short viewports — a 740px-tall phone cannot take the 226px frame plus a
figure plus a three-line headline. The phone gives up the difference: it is
the one element in the stop whose size carries no information. */
/* 820, not 800. An iPhone 13 mini is 812 tall and was missing this tier by 12px.
Not higher than that: 850 would have swept in the 844-tall iPhone 14/15/16 as
well, which has the room and was rendering correctly at the full size. The
cutoff sits between the two, deliberately. */
@media (max-width: 900px) and (max-height: 820px) {
.st-phone-col .cs-phone { width: min(56vw, 210px, 27dvh); }
.st-cast { height: clamp(52px, 13vw, 74px); }
.st-copy-col { --st-block: calc(176px + clamp(52px, 13vw, 74px)); }
.st-title { font-size: clamp(27px, 8vw, 40px); }
.st-sub { font-size: 15px; }
}