/* ============================================================================ PTDT dApp — DESIGN SYSTEM Brand tokens 1:1 from ptdt-website-new-mockup.html (main revamp website). dApp ships BOTH themes: dark app shell (default) + light twin of the main site. Theme flips via — only the surface tokens change, brand colours stay identical in both. ========================================================================== */ :root { /* ---- Brand palette (identical in both themes) ---- */ --white:#ffffff; --paper:#fbfafc; --mist:#f6f4f8; --soft:#f1eef5; --ink:#101018; --ink-2:#1b1723; --ink-3:#2d2840; --pink:#fb0b8c; --pink-2:#e0087d; --pink-soft:#fff0f8; --pink-line:rgba(251,11,140,0.22); --green:#00a747; --green-2:#0e8f43; --green-soft:#edfff5; --green-light:#2ae97b; --purple:#8057d7; --purple-2:#b993ff; --purple-soft:#f4efff; --gold:#f0b90b; --gold-2:#ffd356; --blue:#38bdf8; --red:#f87171; --bronze:#e9a066; /* ---- Typography ---- */ --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem); --text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem); --text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem); --text-lg:clamp(1.125rem,1rem + 0.75vw,1.5rem); --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem); /* ---- Spacing / radius / motion ---- */ --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-2xl:1.5rem; --radius-full:9999px; --max-w:1240px; --nav-h:76px; --ease:cubic-bezier(0.16,1,0.3,1); } /* ============================ DARK (default) ============================= */ :root, :root[data-theme="dark"] { --app-bg:#0a0a0f; --app-bg-2:#0e0e16; --surface:rgba(255,255,255,0.045); --surface-2:rgba(255,255,255,0.07); --surface-3:rgba(255,255,255,0.10); --edge:rgba(255,255,255,0.09); --edge-2:rgba(255,255,255,0.16); --heading:#ffffff; --txt:rgba(255,255,255,0.94); --txt-2:rgba(255,255,255,0.62); --txt-3:rgba(255,255,255,0.38); --txt-4:rgba(255,255,255,0.24); --nav-bg:rgba(20,18,28,0.72); --nav-scrolled:rgba(10,10,15,0.72); --input-bg:rgba(0,0,0,0.30); --footer-bg:#07070c; --pink-txt:#ff67b7; --green-txt:var(--green-light); --shadow-md:0 4px 16px rgba(0,0,0,0.35); --shadow-lg:0 12px 40px rgba(0,0,0,0.45); --shadow-xl:0 24px 80px rgba(0,0,0,0.55); --glow-a:rgba(251,11,140,0.13); --glow-b:rgba(128,87,215,0.13); --glow-c:rgba(0,167,71,0.07); --hero-dim:.34; color-scheme: dark; } /* ================================ LIGHT ================================== */ :root[data-theme="light"] { --app-bg:#ffffff; --app-bg-2:var(--paper); --surface:rgba(16,16,24,0.028); --surface-2:rgba(16,16,24,0.05); --surface-3:rgba(16,16,24,0.075); --edge:rgba(16,16,24,0.10); --edge-2:rgba(16,16,24,0.18); --heading:var(--ink); --txt:var(--ink-2); --txt-2:#5c5568; --txt-3:#7d7689; --txt-4:#a49dae; --nav-bg:rgba(255,255,255,0.82); --nav-scrolled:rgba(255,255,255,0.72); --input-bg:#ffffff; --footer-bg:var(--mist); --pink-txt:var(--pink); --green-txt:var(--green-2); --shadow-md:0 4px 16px rgba(16,16,24,0.08); --shadow-lg:0 12px 40px rgba(16,16,24,0.10); --shadow-xl:0 24px 80px rgba(16,16,24,0.12); --glow-a:rgba(251,11,140,0.07); --glow-b:rgba(128,87,215,0.06); --glow-c:rgba(0,167,71,0.04); --hero-dim:.72; color-scheme: light; } /* ---------------------------------------------------------------- Base -- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scrollbar-width: thin; scrollbar-color: #c2148a transparent; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--txt); background: var(--app-bg); overflow-x: hidden; min-height: 100vh; transition: background .35s var(--ease), color .35s var(--ease); } body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(900px 520px at 12% -6%, var(--glow-a), transparent 62%), radial-gradient(760px 480px at 92% 4%, var(--glow-b), transparent 60%), radial-gradient(1000px 700px at 50% 108%, var(--glow-c), transparent 66%); } a { color: inherit; text-decoration: none; } button { font: inherit; border: 0; cursor: pointer; background: none; color: inherit; } img, svg, video { display: block; max-width: 100%; } h1,h2,h3,h4,h5,h6 { text-wrap: balance; line-height: 1.12; letter-spacing: -0.03em; color: var(--heading); } p, li { text-wrap: pretty; } input, select, textarea { font: inherit; } table { border-collapse: collapse; width: 100%; } [hidden] { display: none !important; } .mono { font-family: var(--font-mono); } .container { width: min(var(--max-w), calc(100% - 48px)); margin-inline: auto; position: relative; z-index: 1; } ::-webkit-scrollbar { width: 12px; height: 8px; } ::-webkit-scrollbar-track { background: var(--surface-2); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #fb0b8c 0%, #c2148a 50%, #6b21a8 100%); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#ff2aa0 0%,#d81995 50%,#7c2bc1 100%); background-clip: padding-box; } ::selection { background: rgba(251,11,140,0.32); color: var(--heading); } :focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 6px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* hidden loses to any explicit display, and several blocks here are flex/grid */ [hidden] { display: none !important; } /* ---- connected view inside the wallet modal ---- */ .wm-account { display: grid; gap: 10px; } .wm-acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: 12px; background: var(--surface-2, rgba(255,255,255,.04)); border: 1px solid var(--edge, rgba(255,255,255,.10)); } .wm-acct-k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3); } .wm-acct-v { font-size: 13.5px; font-weight: 800; color: var(--heading); } .wm-acct-addr { font-family: var(--font-mono); font-size: 13px; font-weight: 800; color: var(--pink); background: none; border: 0; cursor: pointer; border-bottom: 1px dashed rgba(251,11,140,.4); } .wm-acct-link { display: block; text-align: center; padding: 9px; border-radius: 12px; font-size: 12.5px; font-weight: 800; color: var(--txt-2); border: 1px solid var(--edge, rgba(255,255,255,.10)); transition: color .2s, border-color .2s; } .wm-acct-link:hover { color: var(--pink); border-color: rgba(251,11,140,.4); } .wm-disconnect { width: 100%; min-height: 46px; border-radius: 12px; background: rgba(224,72,63,.12); color: #ff6b61; border: 1px solid rgba(224,72,63,.36); font-size: 13.5px; font-weight: 800; cursor: pointer; transition: background .2s, color .2s; } .wm-disconnect:hover { background: #e0483f; color: #fff; } .wm-confirm { padding: 14px; border-radius: 12px; background: rgba(224,72,63,.10); border: 1px solid rgba(224,72,63,.30); } .wm-confirm p { font-size: 13px; color: var(--txt-2); line-height: 1.6; margin-bottom: 12px; } .wm-confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .wm-confirm-no, .wm-confirm-yes { min-height: 42px; border-radius: 12px; font-size: 13px; font-weight: 800; cursor: pointer; } .wm-confirm-no { background: var(--surface-2, rgba(255,255,255,.05)); color: var(--txt); border: 1px solid var(--edge, rgba(255,255,255,.10)); } .wm-confirm-yes { background: #e0483f; color: #fff; border: 0; } .wm-confirm-yes:hover { background: #c93a32; } /* ---- holdings in the wallet popup ---- PTDT gets its own card above the divider; BNB and USDT sit inside the "Other BNB Chain assets" card. Both use the same .wm-asset row: mark, name over 24h move on the left, USD value over token amount on the right. No scroller and no max-height — the list is exactly two rows by design. */ .wm-holding, .wm-assets { padding: 11px 13px; border-radius: 12px; background: var(--surface-2, rgba(255,255,255,.04)); border: 1px solid var(--edge, rgba(255,255,255,.10)); } .wm-assets-hd { font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 10px; } .wm-assets-list { display: grid; gap: 12px; } .wm-asset { display: flex; align-items: center; gap: 11px; min-width: 0; } .wm-asset-ic { flex-shrink: 0; width: 30px; height: 30px; display: block; } .wm-asset-ic svg { width: 100%; height: 100%; display: block; border-radius: 50%; } .wm-asset-meta { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; } .wm-asset-name { font-size: 13.5px; font-weight: 800; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wm-asset-chg { font-size: 11.5px; font-weight: 700; color: var(--txt-3); } .wm-asset-chg.is-up { color: var(--green-txt); } .wm-asset-chg.is-down { color: #e0483f; } .wm-asset-nums { display: grid; gap: 2px; justify-items: end; text-align: right; flex-shrink: 0; } .wm-asset-usd { font-size: 14px; font-weight: 900; color: var(--heading); letter-spacing: -.02em; } .wm-asset-amt { font-size: 11.5px; font-weight: 700; color: var(--txt-3); white-space: nowrap; } /* exit icon beside the connected address — the visible way into the wallet panel, since a bare address looked like a label rather than a control */ [data-wallet-btn] { display: inline-flex; align-items: center; gap: 7px; } .wallet-out { width: 15px; height: 15px; flex-shrink: 0; opacity: .75; transition: opacity .2s, transform .2s; } [data-wallet-btn]:hover .wallet-out { opacity: 1; transform: translateX(1px); } /* on-chain position line under the amount field */ .pos-note { margin-top: 8px; padding: 9px 11px; border-radius: 10px; background: rgba(42,233,123,.08); border: 1px solid rgba(42,233,123,.22); color: var(--green-txt, #2ae97b); } /* ------------------------------------------------------- Announcement -- */ .live-strip { position: relative; z-index: 31; min-height: 35px; display: grid; place-items: center; padding: 5px 24px; text-align: center; color: rgba(255,255,255,0.96); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; background: linear-gradient(180deg, #9250f2 0%, #7d39d6 45%, #69349d 72%, #59515a 100%); box-shadow: inset 0 12px 20px rgba(255,255,255,0.08), inset 0 -18px 22px rgba(0,0,0,0.34); } .live-strip strong { color: #fff; font-weight: 900; } .live-strip a { color: #fff; font-weight: 900; border-bottom: 1px solid rgba(255,255,255,0.55); } /* --------------------------------------------------------------- Nav --- */ .nav-wrap { position: sticky; top: 0; z-index: 50; padding: 12px 0; transition: padding .28s var(--ease), background .28s var(--ease); } .nav-wrap.is-scrolled { background: var(--nav-scrolled); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 1px 0 var(--edge); padding: 8px 0; } /* Brand sits outside the pill, exactly as on the main site: the band starts at the White Paper card and ends on the page grid's right edge. */ /* gap 32px, not the main site's 14px: the old PTDT-only artwork was letterboxed inside a fixed-width box, so ~90px of that box was empty and read as breathing room. The new lockup fills its box edge-to-edge, so the gap has to be real. .nav pulls back 2mm, making the visible gap 32 - 7.6 = ~24px. ── This is the ONE number to tune if the final artwork carries its own padding. */ .nav-shell { display: flex; align-items: center; gap: 32px; min-width: 0; } .nav { flex: 1; min-width: 0; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 8px; /* 2mm left of the grid, matching the main site */ margin-left: -2mm; margin-right: 2mm; padding: 0 16px; border: 1px solid var(--edge); border-radius: var(--radius-full); background: var(--nav-bg); box-shadow: var(--shadow-lg); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); transition: background .35s var(--ease), border-color .35s var(--ease); } .brand { display: inline-flex; align-items: center; flex-shrink: 0; /* fixed to the band height so the taller logo overflows it rather than growing the whole header */ height: var(--nav-h); margin-left: max(0px, calc((100% - 1240px) / 2)); } /* The artwork is the combined ptdt + dApp lockup (391x205), wider than the old PTDT-only mark (512x349). Sizing is HEIGHT-driven, not width-driven: the old rule's max-height always bound, so its width clamp never actually showed, and the extra width now comes out of the band's LEFT edge — .nav is flex:1 inside .nav-shell, so the band's RIGHT edge stays locked to the page grid. 101px, not 97px, and that is measured rather than eyeballed: the "ptdt" mark inside the new lockup has the same aspect ratio as the old standalone file, and at 101px it renders at 142.3 x 93.4 — pixel for pixel what the live site shows today. The PTDT wordmark does not change size at all; "dapp" is simply added beside it. */ .brand-img { width: auto; height: 101px; object-fit: contain; } .nav-left { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } /* White Paper call-out — reversed out on solid purple, same as the main site */ .nav-wp { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 11px; border-radius: var(--radius-full); background: linear-gradient(135deg, #8057d7, #9a76e6); border: 1.5px solid #5f3ba8; color: #fff; white-space: nowrap; flex-shrink: 0; text-decoration: none; box-shadow: 0 8px 22px -6px rgba(128,87,215,0.55); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); } .nav-wp:hover { transform: translateY(-1px); border-color: #4d2f8c; box-shadow: 0 12px 30px -6px rgba(128,87,215,0.68); } .nav-wp-ic { width: 17px; height: 17px; flex-shrink: 0; color: #fff; fill: none; stroke: currentColor; } .nav-wp-txt { display: grid; text-align: left; line-height: 1.1; } .nav-wp-kicker { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.74); } .nav-wp-name { font-size: 12.5px; font-weight: 900; letter-spacing: -0.02em; } /* Sign in / Sign up */ .acct-btn { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2, rgba(255,255,255,.06)); border: 1px solid var(--edge); color: var(--txt-2); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .acct-btn svg { width: 18px; height: 18px; } .acct-btn:hover { background: var(--pink); color: #fff; border-color: transparent; } /* .brand-tag (the pink "dApp" chip) was removed — the word now lives in the brand artwork itself, and the ~63px it occupied went back to the band. */ .nav-links { display: flex; align-items: center; gap: 0; min-width: 0; padding: 4px 3px; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--edge); } .nav-links a { padding: 9px 8px; border-radius: var(--radius-full); color: var(--txt-2); font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease); } .nav-links a:hover { background: var(--surface-3); color: var(--heading); } .nav-links a.active { color: #fff; background: linear-gradient(135deg, var(--pink), #ff4bad); box-shadow: 0 12px 26px rgba(251,11,140,0.28), inset 0 1px 0 rgba(255,255,255,0.22); } .nav-actions { display: flex; align-items: center; gap: 5px; min-width: 0; justify-content: flex-end; } /* Quick-jump chips in the nav: Main Site (pink) / PTDT Apps (green) */ .nav-chips { display: inline-flex; align-items: center; gap: 4px; margin-right: 0; } .nav-chip { font-family: var(--font-mono); font-size: 12.5px; font-weight: 800; /* was 0.14em — read as gappy at this size */ letter-spacing: 0.01em; text-transform: uppercase; min-height: 39px; /* same box as .nav-wp */ padding: 0 11px; border-radius: var(--radius-full); line-height: 1; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .nav-chip-main { color: #fff; background: var(--pink); border: 1px solid rgba(140,4,80,0.42); box-shadow: 0 6px 18px -5px rgba(251,11,140,0.55); } .nav-chip-main:hover { background: var(--pink-2, #e0087d); border-color: rgba(140,4,80,0.62); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(251,11,140,0.20); } .nav-chip-apps { color: #fff; background: #00a747; border: 1px solid rgba(3,80,47,0.42); box-shadow: 0 6px 18px -5px rgba(0,167,71,0.55); } .nav-chip-apps:hover { background: #05934b; border-color: rgba(3,80,47,0.62); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11,232,129,0.20); } :root[data-theme="dark"] .nav-chip-apps { color: #0be881; } /* duplicates of the two chips that live inside the mobile dropdown */ .nav-only-mobile { display: none; } .menu-btn { display: none; width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--edge); color: var(--heading); font-size: 17px; line-height: 1; } /* ---- Theme toggle ---- */ .theme-toggle { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--edge); color: var(--txt-2); transition: transform .3s var(--ease), color .25s, border-color .25s, background .25s; } .theme-toggle:hover { color: var(--gold); border-color: rgba(240,185,11,0.4); background: rgba(240,185,11,0.10); transform: rotate(-18deg) scale(1.06); } :root[data-theme="light"] .theme-toggle:hover { color: var(--purple); border-color: rgba(128,87,215,0.35); background: var(--purple-soft); } .theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun, :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon, :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } /* ------------------------------------------------------------ Buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--radius-full); font-size: 14px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; transform: none; } .btn-sm { min-height: 38px; padding: 0 14px; font-size: 13px; } .btn-lg { min-height: 52px; padding: 0 28px; font-size: 15px; } .btn-block { width: 100%; } .btn-primary { color: #fff; background: linear-gradient(135deg, var(--pink), #ff4bad); box-shadow: 0 12px 26px rgba(251,11,140,0.28); } .btn-primary:hover { background: linear-gradient(135deg, var(--pink-2), #f5329b); box-shadow: 0 18px 38px rgba(251,11,140,0.38); } .btn-green { color: #04180d; background: linear-gradient(135deg, var(--green-light), #6bffab); box-shadow: 0 12px 26px rgba(42,233,123,0.24); } .btn-green:hover { box-shadow: 0 18px 38px rgba(42,233,123,0.34); } .btn-ghost { background: var(--surface-2); border: 1px solid var(--edge-2); color: var(--txt); } .btn-ghost:hover { border-color: var(--pink-line); color: var(--pink-txt); background: rgba(251,11,140,0.10); } .btn-muted { background: var(--surface); border: 1px solid var(--edge); color: var(--txt-2); } .btn-muted:hover { color: var(--heading); border-color: var(--edge-2); } .btn-goplus-verify { background: linear-gradient(135deg, #0be881, #00b855); color: #000; border: none; box-shadow: 0 6px 20px rgba(11,232,129,0.28); font-weight: 800; } .btn-goplus-verify:hover { background: linear-gradient(135deg, #1af590, #00c96b); box-shadow: 0 10px 30px rgba(11,232,129,0.40); color: #000; } /* -------------------------------------------------------------- Tags --- */ .tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--radius-full); font-size: 11px; font-weight: 800; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.07em; } .tag-pink { background: rgba(251,11,140,0.12); color: var(--pink-txt); border: 1px solid var(--pink-line); } .tag-green { background: rgba(42,233,123,0.11); color: var(--green-txt); border: 1px solid rgba(42,233,123,0.26); } .tag-purple { background: rgba(128,87,215,0.14); color: var(--purple); border: 1px solid rgba(128,87,215,0.26); } .tag-gold { background: rgba(240,185,11,0.13); color: #b98a05; border: 1px solid rgba(240,185,11,0.30); } .tag-gray { background: var(--surface-2); color: var(--txt-2); border: 1px solid var(--edge); } :root[data-theme="dark"] .tag-purple { color: var(--purple-2); } :root[data-theme="dark"] .tag-gold { color: var(--gold-2); } .pulse-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--green-light); animation: pulse-anim 2s ease-in-out infinite; } @keyframes pulse-anim { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.45;transform:scale(1.35);} } /* ---------------------------------------------------------- Sections --- */ .section { padding: clamp(var(--space-12), 6vw, var(--space-20)) 0; position: relative; z-index: 1; } .section-tight { padding: clamp(var(--space-8), 4vw, var(--space-12)) 0; } .section-head { margin-bottom: var(--space-6); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .section-h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 900; color: var(--heading); } .section-h2 em { font-style: normal; color: var(--pink); } .section-sub { font-size: 14px; color: var(--txt-3); margin-top: 6px; max-width: 62ch; } /* -------------------------------------------------------------- Card --- */ .card { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-2xl); padding: clamp(20px, 2.4vw, 28px); position: relative; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .card-flat { padding: 0; overflow: hidden; } .card-hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: var(--space-5); } /* The bare text node beside is an anonymous flex item, so in a narrow column "Amount to stake —" broke across three lines. min-width:0 plus nowrap keeps the whole heading on one line and ellipsises instead. */ .card-title { font-size: 16px; font-weight: 800; color: var(--heading); display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; } .card-title > span { overflow: hidden; text-overflow: ellipsis; } .card-note { font-size: 12px; color: var(--txt-3); font-family: var(--font-mono); } /* ------------------------------------------------------- Stat cards ---- */ .stat-grid { display: grid; gap: 14px; } .stat-grid-5 { grid-template-columns: repeat(5, 1fr); } .stat-grid-4 { grid-template-columns: repeat(4, 1fr); } .stat-grid-3 { grid-template-columns: repeat(3, 1fr); } .stat { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-xl); padding: 20px; transition: transform .25s var(--ease), background .25s, border-color .25s; position: relative; overflow: hidden; } .stat::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--accent, var(--pink)), transparent); opacity: .65; } .stat:hover { transform: translateY(-3px); background: var(--surface-2); border-color: var(--edge-2); } .stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--txt-3); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; } .stat-label .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-light); animation: pulse-anim 2s ease-in-out infinite; } .stat-val { font-size: clamp(20px, 2.1vw, 26px); font-weight: 900; letter-spacing: -0.045em; line-height: 1.05; color: var(--heading); margin-bottom: 6px; } .stat-val small { font-size: 12px; font-weight: 700; color: var(--txt-3); letter-spacing: 0; margin-left: 4px; } .stat-sub { font-size: 11.5px; color: var(--txt-3); line-height: 1.45; } .stat-sub .up { color: var(--green-txt); font-weight: 800; } .stat-sub .down { color: #e0483f; font-weight: 800; } :root[data-theme="dark"] .stat-sub .down { color: var(--red); } .stat.accent-pink { --accent: var(--pink); } .stat.accent-green { --accent: var(--green-light); } .stat.accent-purple { --accent: var(--purple-2); } .stat.accent-gold { --accent: var(--gold); } .stat.accent-blue { --accent: var(--blue); } /* ------------------------------------------------------------- Table --- */ .table-wrap { overflow-x: auto; border: 1px solid var(--edge); border-radius: var(--radius-xl); background: var(--surface); } .tbl { min-width: 640px; } .tbl thead th { text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt-3); padding: 14px 18px; background: var(--surface-2); border-bottom: 1px solid var(--edge); white-space: nowrap; } .tbl tbody td { padding: 15px 18px; font-size: 14px; color: var(--txt); border-bottom: 1px solid var(--edge); white-space: nowrap; } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl tbody tr { transition: background .18s ease; } .tbl tbody tr:hover { background: var(--surface-2); } .tbl .num { font-family: var(--font-mono); font-weight: 600; } .tbl .dim { color: var(--txt-3); } .tbl a.txlink { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--purple); border-bottom: 1px dashed rgba(128,87,215,0.45); } :root[data-theme="dark"] .tbl a.txlink { color: var(--purple-2); border-bottom-color: rgba(185,147,255,0.4); } .tbl a.txlink:hover { color: var(--heading); border-bottom-color: currentColor; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 800; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; } .pill-active { background: rgba(42,233,123,0.14); color: var(--green-txt); border: 1px solid rgba(42,233,123,0.30); } .pill-locked { background: rgba(240,185,11,0.14); color: #b98a05; border: 1px solid rgba(240,185,11,0.30); } .pill-gold { background: rgba(240,185,11,0.14); color: #b98a05; border: 1px solid rgba(240,185,11,0.30); } .pill-silver { background: var(--surface-3); color: var(--txt); border: 1px solid var(--edge-2); } .pill-bronze { background: rgba(205,127,50,0.16); color: #b2652a; border: 1px solid rgba(205,127,50,0.34); } :root[data-theme="dark"] .pill-locked, :root[data-theme="dark"] .pill-gold { color: var(--gold-2); } :root[data-theme="dark"] .pill-bronze { color: var(--bronze); } @keyframes row-in { from { opacity: 0; transform: translateY(-8px); background: rgba(42,233,123,0.14); } to { opacity: 1; transform: none; } } .row-new { animation: row-in .7s var(--ease); } /* ========================================================================== GOPLUS FLOATING BADGE — sticky, right edge ========================================================================== */ /* Collapsed by default (logo + score only); expands on hover/focus so it never sits on top of page content. */ /* ========================================================================== FOOTER — pink/purple vignette panel + info strip (content lifted from goplus-audit.html, re-designed for the dApp) ========================================================================== */ .site-footer { position: relative; z-index: 1; padding-top: clamp(40px, 6vw, 72px); } /* ---- vignette panel ---- */ .foot-vignette { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(26px, 3.4vw, 42px); background: radial-gradient(900px 340px at 8% -30%, rgba(255,255,255,0.20), transparent 60%), linear-gradient(112deg, #ec4899 0%, #d4359f 42%, #9333ea 100%); box-shadow: 0 26px 70px rgba(147,51,234,0.30); } .foot-vignette::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 300px at 100% 120%, rgba(0,0,0,0.22), transparent 62%); } .foot-vg-head { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; } .foot-vg-title { font-size: clamp(19px, 2.2vw, 25px); font-weight: 900; color: #fff; letter-spacing: -0.035em; } .foot-vg-sub { font-size: 13px; color: rgba(255,255,255,0.78); margin-top: 5px; max-width: 56ch; } .foot-vg-status { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: var(--radius-full); background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.30); font-family: var(--font-mono); font-size: 11px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; } .foot-vg-status .pulse-dot { background: #7dffb8; } .foot-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 16px; } .foot-card { background: rgba(255,255,255,0.11); border: 1px solid rgba(255,255,255,0.20); border-radius: 18px; padding: 18px 20px 22px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .3s var(--ease), background .3s, box-shadow .3s; display: flex; flex-direction: column; } .foot-card:hover { transform: translateY(-5px); background: rgba(255,255,255,0.17); box-shadow: 0 20px 34px rgba(0,0,0,0.18); } .foot-card h3 { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 13px; display: flex; align-items: center; gap: 8px; } .foot-card h3::before { content: ''; width: 3px; height: 15px; border-radius: 2px; background: rgba(255,255,255,0.75); } .foot-list { display: flex; flex-direction: column; gap: 9px; } .foot-list a { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(255,255,255,0.90); line-height: 1.45; transition: transform .3s var(--ease), color .3s; } .foot-list a:hover { color: #fff; transform: translateX(4px); } .foot-list .ic { flex-shrink: 0; font-size: 14px; width: 18px; text-align: center; } .foot-socials { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .foot-social { width: 37px; height: 37px; border-radius: 12px; display: grid; place-items: center; font-size: 15px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); color: #fff; transition: transform .25s var(--ease), background .25s; } .foot-social:hover { transform: translateY(-3px) scale(1.06); background: rgba(255,255,255,0.28); } .foot-dl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: var(--radius-full); background: #fff; color: #9333ea; font-size: 13.5px; font-weight: 800; transition: transform .25s var(--ease), box-shadow .25s; } .foot-dl:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,0.22); } .foot-devmail { margin-top: 16px; font-size: 12.5px; color: rgba(255,255,255,0.82); line-height: 1.7; } .foot-devmail strong { display: block; color: #fff; font-weight: 700; margin-bottom: 2px; } .foot-devmail a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.45); } /* ---- info strip ---- */ .foot-info { background: var(--footer-bg); border-top: 1px solid var(--edge); margin-top: clamp(36px, 5vw, 60px); padding: clamp(34px, 4.5vw, 54px) 0 30px; } .foot-info-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 3vw, 44px); } /* grid items default to min-width:auto — the nowrap contract address blows past that and pushes the whole footer column outside the viewport without this */ .foot-info-grid > * { min-width: 0; } .foot-info h4 { font-size: 13px; font-weight: 800; color: var(--heading); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.07em; display: flex; align-items: center; gap: 8px; } .foot-company p { font-size: 13.5px; color: var(--txt-2); line-height: 1.85; } .foot-company p strong { color: var(--heading); font-weight: 800; } .foot-company p span { color: var(--txt-3); } .foot-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; } /* zero-height flex item that forces everything after it onto a new row */ .foot-badges .badge-break { flex-basis: 100%; height: 0; margin: 0; padding: 0; } .badge-v { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-full); font-size: 11px; font-weight: 800; font-family: var(--font-mono); letter-spacing: 0.03em; } .badge-v.bsc { background: rgba(240,185,11,0.13); color: #b98a05; border: 1px solid rgba(240,185,11,0.32); } .badge-v.audit { background: rgba(42,233,123,0.13); color: var(--green-txt); border: 1px solid rgba(42,233,123,0.32); } .badge-v.gov { background: rgba(128,87,215,0.14); color: var(--purple); border: 1px solid rgba(128,87,215,0.30); } :root[data-theme="dark"] .badge-v.bsc { color: var(--gold-2); } :root[data-theme="dark"] .badge-v.gov { color: var(--purple-2); } .foot-contract { margin-bottom: 12px; } .foot-contract-label { font-family: var(--font-mono); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt-3); margin-bottom: 5px; } .foot-contract-box { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--edge); } .foot-contract-box code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .foot-copy-btn { flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; font-weight: 800; padding: 5px 10px; border-radius: var(--radius-full); background: rgba(251,11,140,0.13); color: var(--pink-txt); border: 1px solid var(--pink-line); text-transform: uppercase; letter-spacing: 0.06em; } .foot-copy-btn:hover { background: rgba(251,11,140,0.24); color: #fff; } :root[data-theme="light"] .foot-copy-btn:hover { color: #fff; background: var(--pink); } /* ---- bottom ---- */ .foot-bottom { margin-top: clamp(28px, 3.5vw, 42px); padding-top: 26px; border-top: 1px solid var(--edge); text-align: center; } .foot-safety { font-size: 14px; font-weight: 800; color: var(--heading); margin-bottom: 8px; } .foot-safety .heart { color: var(--pink); } .foot-tagline { font-size: 13px; color: var(--txt-3); max-width: 100%; margin: 0 auto 22px; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .foot-linkrows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } .foot-linkrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; } .foot-linkrow a { font-size: 12.5px; color: var(--txt-2); font-weight: 600; transition: color .2s; } .foot-linkrow a:hover { color: var(--pink); } .foot-linkrow .sep { color: var(--txt-4); font-size: 11px; } .foot-copyright { font-size: 12px; color: var(--txt-3); } .foot-version { font-family: var(--font-mono); font-size: 11px; color: var(--txt-4); margin-top: 6px; } .foot-legal { font-size: 11.5px; color: var(--txt-4); line-height: 1.7; max-width: 92ch; margin: 20px auto 0; } /* -------------------------------------------------------------- Toast -- */ /* bottom: 96px, not 20px — the Peether AI launcher now owns the bottom-right corner, and a toast landing on top of it hid the button entirely. */ .toast-stack { position: fixed; right: 20px; bottom: 96px; z-index: 200; display: flex; flex-direction: column; gap: 10px; } .toast { min-width: 260px; max-width: 360px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--app-bg); border: 1px solid var(--edge-2); box-shadow: var(--shadow-lg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 13px; color: var(--txt); animation: toast-in .4s var(--ease); } .toast strong { display: block; font-size: 13px; font-weight: 800; color: var(--heading); margin-bottom: 3px; } .toast.ok { border-color: rgba(42,233,123,0.40); } .toast.warn { border-color: rgba(240,185,11,0.40); } .toast.err { border-color: rgba(248,113,113,0.40); } @keyframes toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------- Wallet Modal -- */ .wm-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; animation: wm-fade .22s var(--ease); } .wm-overlay[hidden] { display: none !important; } @keyframes wm-fade { from { opacity: 0; } to { opacity: 1; } } .wm-panel { width: min(440px, 100%); background: var(--app-bg); border: 1px solid var(--edge-2); border-radius: var(--radius-2xl); padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow-xl); animation: wm-slide .32s var(--ease); } @keyframes wm-slide { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } } .wm-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .wm-title { font-size: 18px; font-weight: 900; letter-spacing: -0.04em; color: var(--heading); } .wm-x { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: var(--surface-2); border: 1px solid var(--edge); color: var(--txt-3); transition: background .2s, color .2s; } .wm-x:hover { background: var(--surface-3); color: var(--heading); } .wm-sub { font-size: 13.5px; color: var(--txt-2); margin-bottom: 22px; line-height: 1.55; } .wm-sub strong { color: var(--heading); } .wm-opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .wm-opt { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--edge); text-align: left; transition: transform .22s var(--ease), background .22s, border-color .22s, box-shadow .22s; } .wm-opt:hover { background: var(--surface-2); border-color: var(--pink-line); transform: translateY(-2px); box-shadow: var(--shadow-md); } .wm-opt:disabled { opacity: .5; cursor: not-allowed; transform: none !important; pointer-events: none; } .wm-opt-logo { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; letter-spacing: 0.03em; } .wm-mm-logo { background: linear-gradient(135deg, #f6851b, #e2761b); } .wm-wc-logo { background: linear-gradient(135deg, #3b99fc, #1170dc); } .wm-opt-info { flex: 1; min-width: 0; } .wm-opt-name { display: block; font-size: 15px; font-weight: 800; color: var(--heading); letter-spacing: -0.02em; } .wm-opt-desc { display: block; font-size: 11.5px; color: var(--txt-3); margin-top: 2px; } .wm-opt-arrow { color: var(--txt-4); font-size: 18px; flex-shrink: 0; transition: transform .2s var(--ease), color .2s; } .wm-opt:hover .wm-opt-arrow { transform: translateX(5px); color: var(--pink-txt); } .wm-status { padding: 11px 14px; border-radius: var(--radius-lg); font-size: 13px; color: var(--txt-2); margin-bottom: 14px; background: var(--surface-2); border: 1px solid var(--edge); display: flex; align-items: center; gap: 10px; } .wm-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green-light); flex-shrink: 0; animation: pulse-anim 1.5s ease infinite; } .wm-status.err { background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.30); color: var(--red); } .wm-status.err::before { background: var(--red); animation: none; } .wm-legal { font-size: 11.5px; color: var(--txt-4); text-align: center; line-height: 1.65; } .wm-legal a { color: var(--pink-txt); border-bottom: 1px solid transparent; transition: border-color .2s; } .wm-legal a:hover { border-bottom-color: currentColor; } /* --------------------------------------------------------- Responsive -- */ @media (max-width: 1080px) { .stat-grid-5 { grid-template-columns: repeat(3, 1fr); } .foot-info-grid { grid-template-columns: minmax(0, 1fr); } } /* 1260, not 900: the brand now sits outside the band and the chips are full-size, so the row runs out of space far earlier than before. */ @media (max-width: 1260px) { .container { width: calc(100% - 32px); } .nav-links { display: none; } .menu-btn { display: grid; place-items: center; } .nav-chips { display: none; } .nav-links.is-open .nav-only-mobile { display: block; } .nav-links.is-open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: calc(var(--nav-h) + 16px); left: 16px; right: 16px; padding: 10px; border-radius: var(--radius-xl); background: var(--app-bg); border: 1px solid var(--edge-2); box-shadow: var(--shadow-xl); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; z-index: 100; } /* The same containing-block trap the main site hit: .nav carries a backdrop-filter, which makes it the containing block for its positioned descendants — so left:16px/right:16px resolved against the 249px nav band instead of the page, and the panel rendered shoved to the right. Turning the filter off while the menu is open hands the containing block back to .nav-wrap. Two selectors: the :root class comes from initNav(), :has() covers the moment before that script has run. */ :root.nav-menu-open .nav, .nav:has(.nav-links.is-open) { backdrop-filter: none; -webkit-backdrop-filter: none; } /* the AI bubble is z-index 9998 and would sit on top of the open panel */ :root.nav-menu-open .ptdt-ai-bubble { display: none !important; } .stat-grid-4 { grid-template-columns: repeat(2, 1fr); } .stat-grid-3 { grid-template-columns: 1fr; } .foot-vignette { border-radius: 20px; } } @media (max-width: 620px) { :root { --nav-h: 64px; } .stat-grid-5, .stat-grid-4 { grid-template-columns: repeat(2, 1fr); } .live-strip { font-size: 12px; padding: 6px 16px; line-height: 1.5; } .nav { padding: 0 8px 0 12px; gap: 8px; } .brand { min-width: 0; flex-shrink: 1; } .brand-img { width: auto; height: 42px; } .nav-actions { gap: 6px; flex-shrink: 0; } .nav-actions .btn { min-height: 34px; padding: 0 11px; font-size: 12px; max-width: 124px; min-width: 0; overflow: hidden; white-space: nowrap; } .theme-toggle, .menu-btn { width: 34px; height: 34px; font-size: 14px; } .theme-toggle svg { width: 15px; height: 15px; } .card, .stat { padding: 16px; } .tbl thead th, .tbl tbody td { padding: 12px 14px; font-size: 13px; } .toast-stack { left: 16px; right: 16px; bottom: 152px; } .toast { max-width: none; } .foot-linkrow { gap: 5px 8px; } .foot-linkrow a { font-size: 11.5px; } } @media (max-width: 400px) { .stat-grid-5, .stat-grid-4 { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } } .bar { position: relative; width: 100%; min-height: 99px; border-radius: 20px; padding: 18px 32px; display: flex; align-items: center; gap: 32px; backdrop-filter: blur(22px) saturate(155%); -webkit-backdrop-filter: blur(22px) saturate(155%); overflow: hidden; text-decoration: none; --gp: #22E07A; --gp-soft: #7FE9AC; --gp-deep: #0B9E52; --md: #F5C242; --md-soft: #FFD97A; --md-deep: #C8890C; --bar-ink: #ffffff; --bar-ink-2: #9aa6c4; --bar-ink-3: #63708f; --bar-edge: rgba(130,150,200,.14); --bar-sans: 'Space Grotesk', var(--font-body); --bar-mono: 'JetBrains Mono', var(--font-mono); font-family: var(--bar-sans); color: var(--bar-ink); transition: transform .26s var(--ease), box-shadow .26s var(--ease); } a.bar:hover { transform: translateY(-2px); } .bar--gp { background: linear-gradient(112deg, rgba(16,38,32,.92) 0%, rgba(13,24,40,.86) 58%, rgba(11,18,34,.82) 100%); border: 1px solid rgba(34,224,122,.26); box-shadow: 0 24px 60px -34px rgba(34,224,122,.55); } .bar--md { background: linear-gradient(112deg, rgba(40,31,12,.92) 0%, rgba(22,22,38,.86) 58%, rgba(13,17,33,.82) 100%); border: 1px solid rgba(245,194,66,.26); box-shadow: 0 24px 60px -34px rgba(245,194,66,.5); } /* brand block */ .bar .brand { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; } .bar .brand-row { display: flex; align-items: center; gap: 11px; } .bar .logo-gp { height: 29px; width: auto; display: block; } .bar .logo-md { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(245,194,66,.4), 0 4px 14px rgba(0,0,0,.5); } .bar .wordmark { font-size: 22px; font-weight: 700; letter-spacing: -.025em; color: var(--bar-ink); line-height: 1; white-space: nowrap; } .bar .wordmark .thin { font-weight: 400; color: var(--bar-ink-2); } .bar .pill { font-family: var(--bar-mono); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; padding: 5px 11px; border-radius: 99px; white-space: nowrap; line-height: 1; display: inline-flex; align-items: center; gap: 6px; } .pill--gp { background: var(--gp); color: #04301b; box-shadow: 0 0 18px rgba(34,224,122,.4); } .pill--md { background: var(--md); color: #3a2600; box-shadow: 0 0 18px rgba(245,194,66,.38); } .bar .verdict { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; color: var(--bar-ink-2); line-height: 1; } /* figure block */ .bar .col { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .bar .figure { display: flex; align-items: center; gap: 18px; } .bar .num { display: flex; align-items: baseline; line-height: .9; } .bar .num .big { font-size: 45px; font-weight: 700; letter-spacing: -.05em; } .bar .num .sm { font-size: 18px; font-weight: 700; letter-spacing: -.03em; } .bar--gp .num .big { color: var(--gp); } .bar--gp .num .sm { color: var(--gp); opacity: .55; } .bar--md .num .big { color: var(--md); } .bar--md .num .sm { color: var(--md); opacity: .6; } .bar .num-side { padding-left: 18px; border-left: 1px solid var(--bar-edge); display: flex; flex-direction: column; gap: 3px; min-width: 0; } .bar .num-side .lead { font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; } .bar--gp .num-side .lead { color: var(--gp-soft); } .bar--md .num-side .lead { color: var(--md-soft); } .bar .num-side .sub { font-family: var(--bar-mono); font-size: 11px; font-weight: 500; color: var(--bar-ink-3); letter-spacing: .02em; line-height: 1.3; white-space: nowrap; } /* GoPlus 10-segment meter */ .bar .meter { margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 0 0 auto; } .bar .segs { display: flex; gap: 4px; } .bar .segs i { display: block; width: 7px; height: 23px; border-radius: 2px; background: linear-gradient(180deg, var(--gp), var(--gp-deep)); box-shadow: 0 0 10px rgba(34,224,122,.45); transform-origin: bottom; animation: segIn .42s cubic-bezier(.2,.9,.3,1) backwards; } .bar .segs i:nth-child(1){animation-delay:.06s} .bar .segs i:nth-child(2){animation-delay:.12s} .bar .segs i:nth-child(3){animation-delay:.18s} .bar .segs i:nth-child(4){animation-delay:.24s} .bar .segs i:nth-child(5){animation-delay:.30s} .bar .segs i:nth-child(6){animation-delay:.36s} .bar .segs i:nth-child(7){animation-delay:.42s} .bar .segs i:nth-child(8){animation-delay:.48s} .bar .segs i:nth-child(9){animation-delay:.54s} .bar .segs i:nth-child(10){animation-delay:.60s} @keyframes segIn { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: scaleY(1); } } .bar .meter-cap { font-family: var(--bar-mono); font-size: 9.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gp); } /* QR */ .bar .qr { flex: 0 0 auto; width: 76px; text-decoration: none; background: #fff; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: 0 8px 24px rgba(0,0,0,.45); } .bar .qr svg { width: 100%; height: auto; display: block; border-radius: 3px; } .bar .qr span { font-family: var(--bar-mono); font-size: 7px; font-weight: 800; letter-spacing: .2em; color: #4a5568; text-transform: uppercase; } /* fact pills */ .bar .facts { display: flex; flex-wrap: wrap; gap: 5px; } .bar .fact { font-family: var(--bar-mono); font-size: 8.8px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 4px 9px; border-radius: 7px; border: 1px solid; line-height: 1; } .bar--gp .fact { color: var(--gp-soft); border-color: rgba(34,224,122,.26); background: rgba(34,224,122,.07); } .bar--md .fact { color: var(--md-soft); border-color: rgba(245,194,66,.26); background: rgba(245,194,66,.07); } .bar--md a.fact { text-decoration: none; transition: color .2s, border-color .2s; } .bar--md a.fact:hover { color: #fff; border-color: var(--md); } /* Both bars share one height so the rail reads as a matched pair. 129px is the earlier 172px floor cut by 25%; the type and spacing above were tightened to match so the content still clears the shorter box. */ .trust-float .bar { min-height: 129px; } /* container-driven responsiveness. The signature element on the right — the GoPlus meter and the Mudra QR — stays visible; only the type and spacing tighten, otherwise the GoPlus bar would render with a bare right side. */ @container (max-width: 760px) { .bar { gap: 18px; padding: 14px 20px; } .bar .brand { gap: 7px; } .bar .brand-row { gap: 10px; } .bar .logo-gp { height: 24px; } .bar .logo-md { width: 31px; height: 31px; } .bar .wordmark { font-size: 17px; } .bar .pill { font-size: 8.5px; padding: 4px 9px; letter-spacing: .12em; } .bar .verdict { font-size: 12px; } .bar .col { gap: 8px; } .bar .figure { gap: 14px; } .bar .num .big { font-size: 36px; } .bar .num .sm { font-size: 15px; } .bar .num-side { padding-left: 14px; gap: 2px; } .bar .num-side .lead { font-size: 12px; } .bar .num-side .sub { font-size: 9.5px; } .bar .facts { gap: 4px; } .bar .fact { font-size: 8px; padding: 3px 7px; letter-spacing: .08em; } .bar .segs i { width: 5px; height: 20px; } .bar .segs { gap: 3px; } .bar .meter { gap: 5px; } .bar .meter-cap { font-size: 8px; letter-spacing: .14em; } .bar .qr { width: 64px; padding: 5px; border-radius: 10px; } } @container (max-width: 560px) { .bar { flex-wrap: wrap; gap: 10px; padding: 14px; border-radius: 16px; } .bar .meter { margin-left: 0; } .bar .brand { flex: 1 1 100%; } } /* On a phone-width column the meter and QR are the two big height drivers and they wrap onto their own rows, which is what made the two bars unequal. Dropping them keeps the pair the same height; the whole bar is still a link to the audit / certificate, and the Mudra bar keeps its "View certificate" pill, so nothing becomes unreachable. */ @container (max-width: 440px) { /* shared floor keeps the pair identical once both have wrapped. Matches .trust-float .bar so it outranks the wide-layout floor. Below 440px the Mudra fact pills wrap to two rows, and that stack — not the floor — is what sets the height. 158px is the tallest of the pair, so both bars land on it and stay matched; that is ~21% under the old 200px rather than the full 25% the wide layout gets. */ .trust-float .bar { min-height: 158px; } .bar .meter, .bar .qr { display: none; } .bar .num .big { font-size: 32px; } .bar .col { flex: 1 1 100%; } /* the Mudra brand row is the taller of the two once the meter and QR are gone — trimming its logo and wordmark keeps the pair the same height */ .bar .logo-md { width: 26px; height: 26px; } .bar .wordmark { font-size: 15px; } .bar .fact { font-size: 7.5px; padding: 3px 6px; } .bar .col { gap: 7px; } } @media (prefers-reduced-motion: reduce) { .bar .segs i { animation: none; } } /* ============================================================ HERO LIVE CARD — Protocol · Live Ported from the main site, but the main site is dark-only and hardcodes white/black rgba throughout. The dApp ships both themes, so every surface and text colour here routes through a --hl-* token that is redefined in the light block below. Brand colours (pink / green / gold) stay identical. ============================================================ */ :root, :root[data-theme="dark"] { --hl-bg: rgba(14,11,24,0.58); --hl-edge: rgba(255,255,255,0.14); --hl-rule: rgba(255,255,255,0.10); --hl-grid-gap: rgba(255,255,255,0.09); --hl-cell: rgba(10,8,18,0.55); --hl-title: rgba(255,255,255,0.62); --hl-label: rgba(255,255,255,0.42); --hl-val: #ffffff; --hl-src: rgba(255,255,255,0.34); --hl-cta-bg: rgba(255,255,255,0.10); --hl-cta-edge: rgba(255,255,255,0.18); --hl-cta-txt: #ffffff; --hl-shadow: 0 28px 70px rgba(0,0,0,0.45); } :root[data-theme="light"] { --hl-bg: rgba(255,255,255,0.86); --hl-edge: rgba(16,16,24,0.12); --hl-rule: rgba(16,16,24,0.10); --hl-grid-gap: rgba(16,16,24,0.09); --hl-cell: rgba(255,255,255,0.92); --hl-title: #5c5568; --hl-label: #7d7689; --hl-val: var(--ink); --hl-src: #8b8496; --hl-cta-bg: rgba(16,16,24,0.05); --hl-cta-edge: rgba(16,16,24,0.14); --hl-cta-txt: var(--ink); --hl-shadow: 0 24px 60px rgba(16,16,24,0.13); } .hero-live { position: relative; isolation: isolate; min-width: 0; border-radius: 24px; padding: clamp(18px, 1.7vw, 24px); background: var(--hl-bg); border: 1px solid var(--hl-edge); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--hl-shadow); } /* Brand wash behind the glass — pink top-left, green bottom-right. Sits under the content (z-index -1 inside the card's own stacking context) so it tints the panel without touching contrast on the numbers. */ .hero-live::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: radial-gradient(74% 58% at 8% 0%, rgba(251,11,140,.16), transparent 62%), radial-gradient(64% 56% at 100% 100%, rgba(42,233,123,.13), transparent 64%); } /* Hairline top highlight — reads as a lit edge rather than a flat border. */ .hero-live::after { content: ''; position: absolute; left: 16%; right: 16%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(251,11,140,.55), rgba(42,233,123,.45), transparent); pointer-events: none; } .hero-live-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--hl-rule); } .hero-live-title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--hl-title); } /* small brand tick before the label */ .hero-live-title::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: linear-gradient(180deg, var(--pink), var(--green-light)); } .hero-live-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--radius-full); background: rgba(0,167,71,0.16); border: 1px solid rgba(42,233,123,0.34); font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--green-txt); } /* Feed down: the dot stops pulsing and the badge goes amber. */ .hero-live-badge.is-stale { background: rgba(240,185,11,0.14); border-color: rgba(240,185,11,0.38); color: var(--gold); } .hero-live-badge.is-stale .pulse-dot { animation: none; background: var(--gold); } .hero-live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--hl-grid-gap); border: 1px solid var(--hl-grid-gap); border-radius: 16px; overflow: hidden; } /* Each cell carries a --cell-accent; the accent shows as a short bar that grows out of the left edge on hover, plus a faint tint. Defaults to the brand purple so a cell without an explicit accent still behaves. */ .hero-live-cell { position: relative; overflow: hidden; background: var(--hl-cell); padding: 13px 14px 13px 16px; min-width: 0; --cell-accent: var(--purple-2); transition: background .25s var(--ease); } .hero-live-cell::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 2px; background: var(--cell-accent); border-radius: 0 2px 2px 0; transform: scaleY(0); transform-origin: center; transition: transform .28s var(--ease); } .hero-live-cell:hover { background: color-mix(in srgb, var(--cell-accent) 7%, var(--hl-cell)); } .hero-live-cell:hover::before { transform: scaleY(1); } .hero-live-cell:nth-child(1) { --cell-accent: var(--pink); } .hero-live-cell:nth-child(2) { --cell-accent: var(--green-light); } .hero-live-cell:nth-child(3) { --cell-accent: var(--purple-2); } .hero-live-cell:nth-child(4) { --cell-accent: #ff7a59; } .hero-live-cell:nth-child(5) { --cell-accent: var(--blue); } .hero-live-cell:nth-child(6) { --cell-accent: var(--gold); } .hero-live-label { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hl-label); margin-bottom: 6px; } .hero-live-label::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--cell-accent); opacity: .85; } .hero-live-val { font-size: clamp(16px, 1.5vw, 20px); font-weight: 900; letter-spacing: -0.035em; color: var(--hl-val); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .hero-live-val.pink { color: var(--pink-txt); } .hero-live-val.green { color: var(--green-txt); } .hero-live-val.gold { color: var(--gold); } :root[data-theme="light"] .hero-live-val.gold { color: #b8860b; } .hero-live-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .hero-live-src { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hl-src); } .hero-live-cta { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px; border-radius: var(--radius-full); background: var(--hl-cta-bg); border: 1px solid var(--hl-cta-edge); color: var(--hl-cta-txt); font-size: 11.5px; font-weight: 800; transition: background .2s var(--ease), transform .2s var(--ease), color .2s var(--ease); } .hero-live-cta:hover { background: var(--pink); border-color: transparent; color: #fff; transform: translateY(-1px); } /* ============================================================ DOCS DROPDOWN — the same 20-page mega menu as the main site Difference from the main site's copy: that one is dark-only and hardcodes white/ink rgba, so every colour here routes through the dApp's theme tokens instead and the panel works in both themes. ============================================================ */ .nav-docs { position: relative; display: inline-flex; } .nav-docs-btn { display: inline-flex; align-items: center; gap: 5px; padding: 9px 10px; border-radius: var(--radius-full); font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--txt-2); background: transparent; border: 0; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); } .nav-docs-btn:hover, .nav-docs.is-open .nav-docs-btn { color: var(--heading); background: var(--surface-3); } .nav-docs-caret { width: 13px; height: 13px; transition: transform .24s var(--ease); } .nav-docs.is-open .nav-docs-caret { transform: rotate(180deg); } .docs-menu { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(-8px) scale(0.98); transform-origin: top center; display: grid; grid-template-columns: repeat(4, minmax(178px, 1fr)); gap: 4px 10px; padding: 18px; border-radius: 20px; background: var(--app-bg-2); border: 1px solid var(--edge-2); box-shadow: var(--shadow-xl); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); opacity: 0; visibility: hidden; pointer-events: none; z-index: 60; transition: opacity .22s var(--ease), transform .26s var(--ease), visibility 0s linear .26s; } .nav-docs.is-open .docs-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); transition: opacity .22s var(--ease), transform .26s var(--ease), visibility 0s linear 0s; } /* invisible bridge so the pointer can travel from button to panel */ .docs-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } .docs-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .docs-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; text-align: left; min-width: 0; transition: background .18s var(--ease), transform .18s var(--ease); } .docs-item:hover { background: var(--surface-2); transform: translateX(2px); } .docs-item-ic { width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; font-size: 14px; background: var(--surface-2); border: 1px solid var(--edge); } .docs-item:hover .docs-item-ic { border-color: var(--pink-line); } .docs-item-txt { display: grid; min-width: 0; } .docs-item-name { font-size: 13px; font-weight: 800; color: var(--heading); letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docs-item-blurb { font-size: 11px; color: var(--txt-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Inside the burger menu the mega panel becomes a plain scrolling list. */ @media (max-width: 1260px) { .nav-docs { width: 100%; justify-content: center; } .nav-links.is-open .nav-docs { flex-direction: column; } .docs-menu { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; display: none; grid-template-columns: 1fr; gap: 2px; max-height: 46vh; overflow-y: auto; width: min(340px, 84vw); margin-top: 12px; background: var(--surface); box-shadow: none; backdrop-filter: none; } .nav-docs.is-open .docs-menu { display: grid; transform: none; } } /* ============================================================ PEETHER AI AGENT — notification bubble The Botpress launcher keeps its default bottom-right corner here (the main site moves it to the right edge, but on the dApp that slot belongs to the GoPlus + Mudra floats), so the bubble hangs directly above it and its tail points down at the button. Deliberately dark in both themes — it reads as a chat bubble, not a page surface. ============================================================ */ .ptdt-ai-bubble { position: fixed; right: 24px; bottom: 104px; z-index: 9998; display: none; box-sizing: border-box; width: min(232px, calc(100vw - 32px)); color: #fff; background: linear-gradient(135deg, #1a0a2e, #111827); border: 1px solid rgba(0,255,136,0.4); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(0,255,136,0.1); font-family: var(--font-body); font-size: 14px; line-height: 1.45; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .ptdt-ai-bubble:hover { transform: translateY(-2px); border-color: #ec4899; box-shadow: 0 12px 35px rgba(0,0,0,0.6), 0 0 25px rgba(236,72,153,0.15); } .ptdt-ai-bubble::after { content: ''; position: absolute; right: 28px; bottom: -8px; width: 16px; height: 16px; background: #111827; border-right: 1px solid rgba(0,255,136,0.4); border-bottom: 1px solid rgba(0,255,136,0.4); border-bottom-right-radius: 4px; transform: rotate(45deg); transition: border-color .25s ease; } .ptdt-ai-bubble:hover::after { border-color: #ec4899; } .ptdt-ai-bubble-launch { display: block; width: 100%; padding: 14px 42px 14px 16px; color: inherit; background: transparent; border: 0; border-radius: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer; } .ptdt-ai-bubble-launch:focus-visible, .ptdt-ai-bubble-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .ptdt-ai-bubble .ai-badge { display: inline-block; margin-right: 6px; padding: 2px 7px; color: #fff; background: linear-gradient(135deg, #ec4899, #8b5cf6); border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; vertical-align: middle; } .ptdt-ai-bubble .bubble-text { vertical-align: middle; } .ptdt-ai-bubble-close { position: absolute; top: 6px; right: 8px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.1); border: 0; border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; transition: color .2s ease, background-color .2s ease; } .ptdt-ai-bubble-close:hover { color: #ec4899; background: rgba(236,72,153,0.3); } .ptdt-ai-bubble.is-visible { animation: ptdtBubbleIn .35s cubic-bezier(.2,.8,.2,1) both; } .ptdt-ai-bubble.is-hiding { animation: ptdtBubbleOut .22s cubic-bezier(.2,.8,.2,1) both; } @keyframes ptdtBubbleIn { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes ptdtBubbleOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(10px) scale(.95); } } @media (max-width: 480px) { .ptdt-ai-bubble { right: 14px; bottom: 96px; } } @media (prefers-reduced-motion: reduce) { .ptdt-ai-bubble, .ptdt-ai-bubble::after, .ptdt-ai-bubble-close { transition: none; } .ptdt-ai-bubble.is-visible, .ptdt-ai-bubble.is-hiding { animation: none; } } /* ============================================================ TRUST FLOAT — GoPlus + Mudra, right edge, independent hover Replaces the old 100/100 badge. The bars below are the same component the main site uses in its hero. ============================================================ */ .trust-float { position: fixed; right: 0; top: 50%; transform: translateY(-50%); /* block, not grid: as a grid item the row was pinned to the collapsed column width and refused to widen even with width:560px !important */ z-index: 90; display: block; width: 620px; pointer-events: none; } /* The width lives on the item, not the window. As a grid item with justify-items:end it is shrink-to-fit, and a shrink-to-fit parent kept collapsing the window back to the chip no matter what the window asked for. Giving the item a definite width removes the ambiguity entirely. */ /* 112px, not 64px: the collapsed chip is the only thing most visitors ever see, and at 64px the logos were unreadable. 64 x 1.75 = 112. */ .trust-item { position: relative; display: flex; justify-content: flex-end; pointer-events: auto; width: 112px; margin-left: auto; transition: width .55s cubic-bezier(.22,1,.36,1); } .trust-item + .trust-item { margin-top: 18px; } .trust-item.is-open { width: 620px; } /* A window that grows leftward: its right edge is pinned to the screen edge, so widening it reveals the bar from the edge inward. The bar inside stays a full 100cqw so its type never re-wraps mid-slide. */ .trust-window { flex: 1 1 auto; min-width: 0; height: 112px; overflow: hidden; border-radius: 999px 0 0 999px; display: grid; justify-items: end; align-items: center; box-shadow: 0 10px 34px -8px rgba(var(--slot-glow), .55); transition: height .55s cubic-bezier(.22,1,.36,1), border-radius .55s cubic-bezier(.22,1,.36,1); } /* A fixed 560px query container. The bar's own @container rules need one, and it cannot be the window — that animates, so the bar would reflow mid-slide. */ .trust-stage { width: 620px; container-type: inline-size; } .trust-stage > .bar { width: 620px; min-width: 0; border-radius: 20px 0 0 20px; } .trust-item.is-open .trust-window { height: 129px; border-radius: 20px 0 0 20px; } /* the bar's own content fades out fast and returns once the window is open */ .trust-item .bar > * { transition: opacity .3s ease .28s; } .trust-item:not(.is-open) .bar > * { opacity: 0; transition: opacity .14s ease; } .trust-item:not(.is-open) .trust-window { pointer-events: none; } /* The chip carries the brand glow — green for GoPlus, mustard for Mudra, both driven by the per-item --slot-glow triple. The old rule had the glow only on .trust-window, which the chip sits on top of and completely covers, so none of it ever reached the screen. Layered here: a tight rim, a mid halo and a wide bloom, plus a plain dark drop so the chip still reads on a light page. */ .trust-chip { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 112px; height: 112px; border-radius: 999px 0 0 999px; display: grid; place-items: center; pointer-events: none; background: rgba(12,14,24,.72); border: 1px solid rgba(var(--slot-glow), .45); border-right: 0; box-shadow: 0 0 0 1px rgba(var(--slot-glow), .22), 0 0 22px -2px rgba(var(--slot-glow), .75), 0 0 58px 6px rgba(var(--slot-glow), .38), 0 14px 38px -10px rgba(0,0,0,.6); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); transition: opacity .28s var(--ease), transform .45s cubic-bezier(.22,1,.36,1); } /* A blurred colour pad behind the chip. box-shadow alone stays inside the half-pill silhouette; this bleeds past it so the glow reads as fluorescent. */ .trust-chip::before { content: ''; position: absolute; inset: -26px -10px -26px -34px; border-radius: 999px 0 0 999px; background: radial-gradient(60% 60% at 62% 50%, rgba(var(--slot-glow), .40), rgba(var(--slot-glow), 0) 72%); filter: blur(12px); z-index: -1; pointer-events: none; } .trust-item.is-open .trust-chip { opacity: 0; transform: translateY(-50%) scale(.6); } .trust-chip-img { display: block; position: relative; z-index: 1; } .trust-chip-img--gp { width: 66px; height: auto; } .trust-chip-img--md { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } .trust-close { margin-left: auto; margin-right: 8px; margin-top: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; line-height: 1; background: var(--surface-2, rgba(255,255,255,.08)); border: 1px solid var(--edge); color: var(--txt-3); cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .2s; } .trust-float:hover .trust-close { opacity: 1; } /* Below this the float would cover the page, and the bars wrap anyway. */ @media (max-width: 900px) { .trust-float { display: none; } } @media (prefers-reduced-motion: reduce) { .trust-item, .trust-window, .trust-chip, .trust-item .bar > * { transition-duration: .001s !important; } } /* ---- phone navbar ---- With the brand outside the band, the band only gets what the logo leaves: at 375px that is ~193px of usable width against ~234px of content. The White Paper card moves into the menu (it is listed there) and the theme toggle steps out of the bar, which is the trade the brief allowed. */ @media (max-width: 600px) { .nav-shell { gap: 8px; } .nav { padding: 0 10px; gap: 6px; margin-left: 0; margin-right: 0; } .nav-left { display: none; } .nav-actions .theme-toggle { display: none; } .nav-actions [data-wallet-btn] { font-size: 12.5px; padding: 0 12px; } .brand-img { width: auto; height: 45px; } .brand { height: auto; margin-left: 0; } } /* ≤360px (iPhone SE and similar): the band ran out of room and the ☰ button sat outside the pill — a pre-existing glitch, 34.5px on the old build. Trimming the logo the last few px pulls it back inside. */ @media (max-width: 360px) { .brand-img { height: 36px; } .nav { padding: 0 6px; } .nav-shell { gap: 6px; } }