:root { --bg: #07080a; --ink: #e9ecf1; --muted: rgba(233, 236, 241, 0.62); --edge: rgba(233, 236, 241, 0.12); --chrome-gradient: linear-gradient(180deg, #f2f4f8, #b9bec7 45%, #7e838c 55%, #d9dce2); /* Same metal, diluted for hover states that shouldn't compete with the active nav item's full chrome treatment. */ --chrome-gradient-soft: linear-gradient(180deg, rgba(242, 244, 248, 0.16), rgba(185, 190, 199, 0.1) 45%, rgba(126, 131, 140, 0.07) 55%, rgba(217, 220, 226, 0.12)); --nav-height: 76px; --mono: "Fragment Mono", ui-monospace, monospace; --display: "Switzer", -apple-system, BlinkMacSystemFont, sans-serif; /* Semantic status colors, desaturated to sit inside the chrome/mono palette. Used only on status chips and signed amounts, never decoratively. */ --good: #8fe3b0; --amber: #e9c46a; --bad: #e8867a; /* Two panel background tints used across the sticky stacks so the second and third panel visibly differ from the base bg as they cover the one beneath, per the Nova/Habitline stacked-panel reference. */ --panel-bg-1: #07080a; --panel-bg-2: #0c0e12; --panel-bg-3: #101318; } html, body { overflow-x: clip; } /* Mobile: reduce-motion and small-viewport optimizations */ @media (max-width: 768px) { /* Disable all animations on mobile and for motion-reduction preferences */ * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .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; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* ---------- nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-height); background: transparent; border-bottom: 1px solid transparent; transition: background 0.3s ease, border-color 0.3s ease; } .nav--stuck { background: rgba(7, 8, 10, 0.62); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid var(--edge); } .nav-inner { height: 100%; max-width: 1360px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; text-decoration: none; } .nav-logo-scale { display: block; transform-origin: left center; } .nav-logo-image { display:block; width:240px; height:56px; object-fit:contain; filter:contrast(1.25) brightness(1.15); } .nav-right { display: flex; align-items: center; gap: 2.5rem; } /* Hamburger: hidden on desktop, shown below 900px (see responsive section). A real 44x44 hit target, three bars, no icon font. */ .nav-hamburger { display: none; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; flex-shrink: 0; } .nav-hamburger span { display: block; width: 18px; height: 1.5px; border-radius: 1px; background: var(--ink); transition: transform 0.25s ease, opacity 0.2s ease; } .nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } /* ---------- mobile nav drawer ---------- */ /* visibility (not pointer-events) gates interaction: hidden elements are already unclickable, and GSAP's autoAlpha flips visibility with the fade. Portaled to (see Nav.tsx), so these z-indexes are compared against the whole document, not just .nav's local stack; set well above .nav's own z-index: 100. */ .nav-mobile-backdrop { position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; z-index: 998; background: rgba(7, 8, 10, 0.6); opacity: 0; visibility: hidden; } .nav-mobile-menu { position: fixed; top: var(--nav-height); right: 0; bottom: 0; z-index: 999; width: min(360px, 86vw); overflow-y: auto; background: rgba(7, 8, 10, 0.92); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-left: 1px solid var(--edge); padding: 24px 28px 40px; visibility: hidden; transform: translateX(100%); } .nav-mobile-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 0 8px auto; padding: 0; background: none; border: none; color: var(--ink); cursor: pointer; } .nav-mobile-sections { display: flex; flex-direction: column; gap: 28px; margin-bottom: 28px; } .nav-mobile-section .nav-col-heading { margin-bottom: 6px; } .nav-mobile-link { min-height: 44px; display: flex; align-items: center; font-size: 16px; padding: 0; border-bottom: 1px solid var(--edge); } .nav-mobile-section .nav-mobile-link:last-child { border-bottom: none; } .nav-mobile-cta { width: 100%; min-height: 44px; } .nav-menu { display: flex; align-items: center; gap: 0.5rem; } .nav-menu-item { position: relative; } .nav-trigger { background: none; border: none; color: var(--ink); font-family: var(--display); font-size: 14px; font-weight: 500; padding: 10px 14px; cursor: pointer; } .nav-trigger:hover { color: var(--ink); opacity: 0.85; } .nav-panel { position: fixed; top: var(--nav-height); left: 0; right: 0; background: rgba(7, 8, 10, 0.85); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); opacity: 0; visibility: hidden; pointer-events: none; } .nav-menu-item:has(.nav-trigger[aria-expanded="true"]) .nav-panel { pointer-events: auto; } .nav-panel-inner { max-width: 1360px; margin: 0 auto; padding: 28px 32px 36px; display: flex; gap: 64px; } .nav-col-heading { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .menu-link { display: block; color: var(--ink); text-decoration: none; font-size: 15px; padding: 6px 0; } .menu-link:hover { opacity: 0.75; } .menu-link.inert { color: var(--muted); cursor: default; } /* ---------- chrome buttons ---------- */ @keyframes btn-chrome-glow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 8px rgba(233, 236, 241, 0.18), 0 0 2px rgba(233, 236, 241, 0.25); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 26px rgba(233, 236, 241, 0.6), 0 0 8px rgba(233, 236, 241, 0.55); } } .btn-chrome { display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; border-radius: 999px; background: var(--chrome-gradient); color: #0a0b0d; font-family: var(--display); font-weight: 600; font-size: 14px; text-decoration: none; border: none; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); /* Same shimmering-metal idea as the nav wordmark's LiquidMetal shader, just as an ordinary box-shadow pulse rather than a shader — a button doesn't need its own WebGL canvas — and noticeably slower: the wordmark's own animation runs at speed=1 (roughly a 2-3s character), this is a 6s breathing cycle. */ animation: btn-chrome-glow 6s ease-in-out infinite; transition: transform 0.2s ease, filter 0.2s ease; } /* Mobile: disable expensive animations, honor prefers-reduced-motion */ @media (max-width: 480px) { .btn-chrome { animation: none; } } @media (prefers-reduced-motion: reduce) { .btn-chrome { animation: none; transition: none; } } .btn-chrome:hover { transform: translateY(-1px); filter: brightness(1.05); } .btn-chrome--lg { padding: 16px 30px; font-size: 16px; } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 16px 30px; border-radius: 999px; border: 1px solid var(--edge); color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 16px; text-decoration: none; transition: border-color 0.2s ease; } .btn-ghost:hover { border-color: rgba(233, 236, 241, 0.4); } /* ---------- hero ---------- */ .hero { min-height: 100svh; display: flex; align-items: center; padding-top: var(--nav-height); } .hero-inner { /* Widened from 1360px: at the old cap, wide viewports left only ~688px for the copy column once the 560px card and 48px gap were subtracted, less than the ~742px the headline needs at its 112px font-size ceiling, so the line collided with the card. At 1600px there is consistently >=740px of margin for the copy column (see Hero.tsx / this file's collision-fix comment for the arithmetic at 1440 and 1920). */ max-width: 1600px; margin: 0 auto; width: 100%; padding: 48px 32px; display: flex; align-items: center; /* justify-content: space-between distributes any leftover free space on TOP of `gap`; gap itself is the guaranteed minimum between the two flex items, so the copy column and card column are never closer than 48px. */ justify-content: space-between; gap: 48px; } .hero-copy { max-width: 680px; /* Flex items accept z-index directly (no position:relative needed). If the escaped headline ever does touch the card, the copy column paints over it rather than disappearing behind it. */ z-index: 2; } .eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 28px; } .eyebrow-dash { display: inline-block; width: 18px; height: 2px; background: var(--chrome-gradient); flex-shrink: 0; } .hero-headline { margin: 0 0 28px; font-family: var(--display); font-weight: 800; font-size: clamp(56px, 7vw, 112px); line-height: 0.98; letter-spacing: -0.03em; color: var(--ink); } /* Lines size to their own text (not the 680px copy column) and clip vertically only, so the mask-reveal never crops the glyphs horizontally. overflow-x: visible paired with overflow-y: clip is the documented escape hatch for a one-axis mask: unlike hidden/auto, clip does not force the visible axis to auto, so the line can bleed past its box with no scroll container forming. At 1280-1920px viewport widths the longest line ("Tap anywhere.") measures well under (viewport - 64px hero padding) even at the 112px ceiling, so the vw term does not need to shrink to stay inside the viewport. */ .headline-line { display: block; width: max-content; overflow-x: visible; overflow-y: clip; white-space: nowrap; } .headline-inner { display: block; transform: translateY(0%); white-space: nowrap; will-change: transform; } .hero-lead { max-width: 560px; color: var(--muted); font-size: 17px; line-height: 1.55; margin: 0 0 36px; } .hero-ctas { display: flex; align-items: center; gap: 16px; margin-bottom: 56px; } .hero-figures { display: flex; align-items: stretch; } .figure { padding: 0 32px; border-left: 1px solid var(--edge); } .figure:first-child { padding-left: 0; border-left: none; } .figure-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .figure-value { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3vw, 40px); color: var(--ink); white-space: nowrap; } .figure-value--static { font-size: clamp(20px, 2vw, 26px); } .odo-affix { font-family: var(--mono); font-size: 0.45em; font-weight: 400; color: var(--muted); } /* ---------- odometer ---------- */ .odometer { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; } .odo-static { display: inline-block; } .odo-digit { display: inline-block; overflow: hidden; height: 1em; line-height: 1; width: 0.62em; } .odo-digit-stack { display: flex; flex-direction: column; will-change: transform; } .odo-digit-stack span { display: block; height: 1em; line-height: 1; text-align: center; } /* ---------- chrome card ---------- */ .hero-card-wrap { position: relative; flex-shrink: 0; z-index: 1; } .hero-card-stage { position: relative; width: min(560px, 42vw); aspect-ratio: 1 / 1; } .hero-card-poster { position: absolute; inset: 0; margin: auto; width: 86%; aspect-ratio: 3.4 / 2.14; height: fit-content; border-radius: 8%; background: var(--chrome-gradient); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); transition: opacity 0.4s ease; } .hero-card-canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.4s ease; } .hero-satellite { position:absolute; z-index:3; display:grid; gap:5px; padding:14px 16px; border:1px solid rgba(255,255,255,.2); border-radius:15px; background:rgba(13,15,19,.68); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 22px 60px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.12); transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s; } .hero-satellite span,.hero-satellite small { font:11px/1.3 var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.07em; } .hero-satellite strong { font:600 19px var(--display); color:var(--ink); } .hero-satellite--balance { left:-8%;top:12%;min-width:150px; } .hero-satellite--auth { right:-5%;bottom:17%;grid-template-columns:auto 1fr;align-items:center;transform:rotate(2deg); } .hero-satellite--auth i { grid-row:1/3;width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 3px 10px rgba(143,227,176,.65);margin-right:5px; } .hero-satellite--auth strong { font-size:14px; } .hero-satellite--wallet { left:10%;bottom:5%;grid-template-columns:58px auto;align-items:center;transform:rotate(-2deg); } .hero-satellite--wallet .brand-mark { width:58px;height:28px;grid-row:1; } .hero-card-wrap:hover .hero-satellite--balance { transform:translate(-8px,-8px) rotate(-2deg); } .hero-card-wrap:hover .hero-satellite--auth { transform:translate(8px,-7px) rotate(3deg); } .hero-card-wrap:hover .hero-satellite--wallet { transform:translate(-4px,8px) rotate(-3deg); } /* ---------- marquee ---------- */ .marquee { overflow: hidden; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); padding: 22px 0; } .marquee-track { display: flex; width: max-content; will-change: transform; } .marquee-seq { display: flex; flex-shrink: 0; } .marquee-item { display: inline-flex; align-items: center; gap: 12px; padding: 0 22px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .marquee-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--chrome-gradient); flex-shrink: 0; } /* ---------- brand marks (Apple Pay / Google Pay) ---------- */ .brand-mark { display: block; flex-shrink: 0; width: auto; /* fill="currentColor" on the underlying SVG (BrandMarks.tsx) — this is the default for every dark-background usage; .wallet-stage overrides it to a dark color for its own white card context. */ color: #ffffff; } .brand-mark--marquee { height: 26px; } .brand-mark--spec { height: 30px; } .wallets-value { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; /* This reuses .figure-value--static (font-size clamp(20px,2vw,26px)) for its line-box, sized for secondary text elsewhere — but here it holds icons, not text, so that smaller allocation read as visibly shorter than the Top tier/Chains odometer figures beside it in the same row. Pin the icon height to match their cap-height instead of the inherited (irrelevant) font-size. */ height: 34px; } .wallets-value .brand-mark--spec { height: 34px; } /* ---------- shared section scaffolding ---------- */ .section-inner { max-width: 1360px; margin: 0 auto; padding: 120px 32px; position: relative; } .chapter-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 24px; } .section-heading { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 20px; } .section-heading em { font-style: normal; color: var(--muted); } /* A single, sparing typographic accent for headline emphasis: one italic serif word breaking the sans display rhythm, used on 2-3 headlines only (never a new default). System serif stack, no extra font load. Separate from the standard muted-color em convention above and in .details-head h2 em / .control-intro h2 em / .card-mobile h2 em, which stays untouched everywhere else. */ .accent-serif { font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 400; color: inherit; } .section-lead { max-width: 560px; color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0 0 56px; } .inert { color: var(--muted); cursor: default; } /* ambient radial glow, reused behind the card stages */ .ambient-glow { position: absolute; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 236, 241, 0.07), transparent); } /* ---------- sticky stacked panels (section 02, reduced-motion section 03) ---------- */ .stack-group { position: relative; } .stack-item { height: 100svh; } .stack-panel { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; background: var(--panel-bg-1); border-top: 1px solid transparent; overflow: hidden; } .stack-panel--2 { background: var(--panel-bg-2); border-top-left-radius: 24px; border-top-right-radius: 24px; border-top-color: var(--edge); } .stack-panel--3 { background: var(--panel-bg-3); border-top-left-radius: 24px; border-top-right-radius: 24px; border-top-color: var(--edge); } .stack-inner { max-width: 1360px; margin: 0 auto; padding: 0 32px; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; } .stack-copy { max-width: 480px; } .stack-ghost-n { font-family: var(--mono); font-weight: 700; font-size: clamp(64px, 8vw, 120px); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--edge); margin-bottom: 8px; } .stack-title { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3vw, 40px); color: var(--ink); margin: 0 0 16px; } .stack-body { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0; } /* ---------- product panels (real DOM UI inside section 02) ---------- */ .product-panel { border: 1px solid var(--edge); border-radius: 16px; background: rgba(233, 236, 241, 0.03); padding: 24px; } .product-panel-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .chain-list { display: flex; flex-direction: column; margin-bottom: 20px; } .chain-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--edge); font-family: var(--mono); font-size: 13px; } .chain-row:last-child { border-bottom: none; } .chain-glyph { display: flex; color: var(--muted); } .chain-name { color: var(--ink); flex: 1; } .chain-asset { color: var(--muted); letter-spacing: 0.04em; } .stepper { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--edge); } .stepper-row { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 13px; color: var(--muted); } .stepper-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--edge); flex-shrink: 0; } .stepper-row--current { color: var(--ink); } .stepper-row--current .stepper-dot { background: var(--good); box-shadow: 0 2px 7px rgba(143, 227, 176, 0.6); } .stepper-index { font-size: 11px; color: var(--muted); width: 18px; flex-shrink: 0; } .stepper--identity .stepper-row { color: var(--ink); } .verify-pending { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--edge); } .verify-pending-top { margin-bottom: 14px; } .progress-bar { height: 4px; border-radius: 2px; background: var(--edge); overflow: hidden; margin-bottom: 12px; } .progress-bar-fill { width: 62%; height: 100%; background: var(--amber); } .verify-pending-note { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 0 0 10px; } .verify-support { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-decoration: underline; text-decoration-color: var(--edge); } .status-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--edge); white-space: nowrap; } .status-chip--pending { color: var(--amber); border-color: rgba(233, 196, 106, 0.35); } .status-chip--authorized { color: var(--amber); border-color: rgba(233, 196, 106, 0.35); } .status-chip--cleared { color: var(--good); border-color: rgba(143, 227, 176, 0.35); } .status-chip--declined { color: var(--bad); border-color: rgba(232, 134, 122, 0.35); } .tx-list { display: flex; flex-direction: column; } .tx-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--edge); } .tx-row:last-child { border-bottom: none; } .tx-row--declined { opacity: 0.55; } .tx-avatar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--edge); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; color: var(--muted); flex-shrink: 0; } .tx-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .tx-merchant { color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tx-meta { display: flex; align-items: center; gap: 8px; } .chip { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); } .chip--category { padding: 2px 8px; border: 1px solid var(--edge); border-radius: 999px; } .tx-date { font-family: var(--mono); font-size: 11px; color: var(--muted); } .tx-amount { font-family: var(--mono); font-size: 14px; white-space: nowrap; } .tx-amount--pos { color: var(--good); } .tx-amount--neg { color: var(--ink); } .tx-status { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .tx-status-note { font-family: var(--mono); font-size: 11px; color: var(--muted); } /* ---------- section 03: scroll-scrubbed card ---------- */ .card-scroll-wrap { position: relative; height: 240vh; } .card-scroll-stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-eyebrow { position: absolute; top: 120px; left: 32px; margin: 0; } .card-glow { position: absolute; width: min(900px, 90vw); height: min(900px, 90vw); border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 236, 241, 0.08), transparent); pointer-events: none; } .card-stage-canvas-wrap { position: relative; width: min(620px, 60vw); aspect-ratio: 1 / 1; } .card-stage-poster { position: absolute; } .card-chip { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--edge); border-radius: 999px; background: rgba(7, 8, 10, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--ink); opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } .card-chip--active { opacity: 1; transform: translateY(0); } .card-chip--a { bottom: 18%; left: 50%; translate: -50% 0; } .card-chip--b { top: 30%; right: 8%; } .card-chip--c { bottom: 22%; right: 12%; } /* reduced-motion static fallback: three posed panels, no canvas */ .card-static-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; width: 100%; position: relative; } .card-static-poster { width: min(420px, 70vw); aspect-ratio: 3.4 / 2.14; border-radius: 8%; background: var(--chrome-gradient); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); } .card-static-poster--wallet { transform: rotateY(35deg); } .card-static-poster--approved { transform: rotateX(28deg); } .card-static .card-chip { position: static; opacity: 1; transform: none; } .card-mobile { display:none; } /* ---------- section 04: the app (phone mockup, reuses stack-group/stack-item/ stack-panel from section 02; only .app-preview-* rules below are new) ---------- */ .app-preview-stage { position: relative; display: grid; place-items: center; min-height: 520px; perspective: 1400px; } .app-preview-glow { position: absolute; width: min(620px, 72vw); height: min(620px, 72vw); border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 236, 241, 0.1), transparent); pointer-events: none; z-index: 0; } .app-preview-phone { position: relative; z-index: 1; } .app-preview-phone-frame { position: relative; width: min(280px, 62vw); aspect-ratio: 9 / 19.3; padding: 12px; border-radius: 44px; border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 30%, rgba(0, 0, 0, 0.5) 74%, rgba(255, 255, 255, 0.08)), #101318; box-shadow: 0 60px 120px rgba(0, 0, 0, 0.55), 0 24px 48px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -1px 1px rgba(0, 0, 0, 0.6); transform: perspective(1400px) rotateY(-14deg) rotateX(4deg) rotateZ(-1deg); transform-style: preserve-3d; } .app-preview-notch { position: absolute; top: 14px; left: 50%; translate: -50% 0; width: 84px; height: 24px; border-radius: 999px; background: #030405; border: 1px solid rgba(255, 255, 255, 0.06); z-index: 3; } .app-preview-screen { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 34px 14px 16px; border-radius: 34px; overflow: hidden; background: linear-gradient(180deg, var(--panel-bg-1), #050607 130%); } .app-preview-status { display: flex; align-items: center; justify-content: space-between; font: 9px var(--mono); letter-spacing: 0.04em; color: var(--muted); } .app-preview-status-icons { display: flex; gap: 3px; } .app-preview-status-icons i { display: block; width: 3px; height: 8px; border-radius: 1px; background: var(--muted); } .app-preview-label { font: 9px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .app-preview-balance { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--edge); border-radius: 16px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 60%), var(--panel-bg-2); } .app-preview-figure { font: 700 26px var(--display); letter-spacing: -0.03em; color: var(--ink); } .app-preview-sub { font: 9px var(--mono); color: var(--muted); } .app-preview-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .app-preview-quick { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; border: 1px solid var(--edge); border-radius: 12px; background: rgba(255, 255, 255, 0.03); color: var(--ink); } .app-preview-quick span { font: 9px var(--mono); text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); } .app-preview-card { position: relative; aspect-ratio: 1.586 / 1; padding: 16px; border-radius: 16px; display: flex; flex-direction: column; justify-content: space-between; color: #0a0b0d; background: var(--chrome-gradient); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.6); } .app-preview-card-top, .app-preview-card-bottom { display: flex; justify-content: space-between; } .app-preview-card-top { font: 700 10px var(--display); letter-spacing: 0.06em; } .app-preview-card-bottom { font: 600 11px var(--mono); letter-spacing: 0.02em; } .app-preview-card-chip { width: 28px; height: 20px; border-radius: 4px; background: linear-gradient(135deg, #dfe3ea, #9aa0aa); } .app-preview-wallet-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 12px; background: rgba(255, 255, 255, 0.04); } .app-preview-wallet-mark { width: 34px; height: 14px; color: var(--ink); } .app-preview-wallet-chip span { font: 9px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--good); } .app-preview-tx-list { display: flex; flex-direction: column; gap: 8px; } .app-preview-tx-row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.025); } .app-preview-tx-row--authorized .app-preview-tx-avatar { background: rgba(233, 196, 106, 0.18); color: var(--amber); } .app-preview-tx-row--cleared .app-preview-tx-avatar { background: rgba(143, 227, 176, 0.18); color: var(--good); } .app-preview-tx-row--declined .app-preview-tx-avatar { background: rgba(232, 134, 122, 0.18); color: var(--bad); } .app-preview-tx-avatar { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; font: 11px var(--mono); color: var(--ink); background: rgba(255, 255, 255, 0.08); } .app-preview-tx-main { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; } .app-preview-tx-main > span:first-child { overflow: hidden; font: 10px var(--display); color: var(--ink); text-overflow: ellipsis; white-space: nowrap; } .app-preview-tx-meta { font: 8px var(--mono); color: var(--muted); text-transform: uppercase; } .app-preview-tx-amount { flex-shrink: 0; font: 600 10px var(--mono); color: var(--ink); } .app-preview-tx-amount--pos { color: var(--good); } .app-preview-tabbar { display: flex; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--edge); } .app-preview-tab { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; color: var(--muted); } .app-preview-tab--active { color: #0a0b0d; background: var(--chrome-gradient); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } /* Stage 2: the card pulled out of the phone chrome, a closer/steeper 3D float rather than a second phone screenshot. */ .app-preview-card-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; perspective: 1400px; } .app-preview-card-float { position: relative; width: min(340px, 74vw); aspect-ratio: 1.586 / 1; padding: 26px; border-radius: 20px; display: flex; flex-direction: column; justify-content: space-between; color: #0a0b0d; background: var(--chrome-gradient); box-shadow: 0 60px 120px rgba(0, 0, 0, 0.55), 0 24px 48px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.7); transform: perspective(1400px) rotateY(-26deg) rotateX(9deg) rotateZ(-3deg); transform-style: preserve-3d; } .app-preview-card-float .app-preview-card-top { font: 700 15px var(--display); letter-spacing: 0.06em; } .app-preview-card-float .app-preview-card-bottom { font: 600 17px var(--mono); letter-spacing: 0.02em; } .app-preview-card-float .app-preview-card-chip { width: 42px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #dfe3ea, #9aa0aa); } .app-preview-card-stage-wallet { transform: perspective(1400px) rotateY(-18deg) rotateX(5deg); } /* Stage 3: pulled back from the phone into a cropped, close-up ledger strip, no notch or status bar, tilted the opposite way from stage 2's card so the three panels never share a silhouette. */ .app-preview-list-stage { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; perspective: 1400px; } .app-preview-list-float { position: relative; width: min(300px, 78vw); padding: 24px 20px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01) 40%, rgba(0, 0, 0, 0.45)), var(--panel-bg-2); box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5), 0 18px 36px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.35); transform: perspective(1400px) rotateY(14deg) rotateX(-5deg) rotateZ(2deg); transform-style: preserve-3d; } .app-preview-list-float .app-preview-label { display: block; margin-bottom: 14px; } .app-preview-list-float .app-preview-tx-row { padding: 10px; } .app-preview-list-float .app-preview-tx-main > span:first-child { font-size: 12px; } .app-preview-list-float .app-preview-tx-amount { font-size: 12px; } @media (max-width: 900px) { .app-preview-stage { min-height: 0; padding: 24px 0 8px; } .app-preview-glow { width: 380px; height: 380px; } .app-preview-phone-frame { width: min(240px, 70vw); transform: none; } .app-preview-card-float { width: min(260px, 74vw); padding: 20px; transform: perspective(1000px) rotateY(-14deg) rotateX(5deg); } .app-preview-card-stage-wallet { transform: perspective(1000px) rotateY(-14deg) rotateX(5deg); } .app-preview-list-float { width: min(280px, 82vw); padding: 18px 16px; transform: perspective(1000px) rotateY(8deg) rotateX(-3deg); } } @media (prefers-reduced-motion: reduce) { .app-preview-row { opacity: 1 !important; transform: none !important; } .app-preview-phone-frame { transform: none; } .app-preview-card-float, .app-preview-card-stage-wallet, .app-preview-list-float { transform: none; } } /* ---------- section 05: manifesto + statement strip ---------- */ .manifesto-section { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; background: var(--bg); } /* everything after the pinned manifesto scrolls OVER it (stacked-panel reveal): opaque bg + higher paint order, and the incoming panel gets rounded top corners */ .statement-strip, .spec-section, .custody-section, .numbers-section, .faq-section, .close-section, .site-footer { position: relative; z-index: 1; background: var(--bg); } .statement-strip { border-top-left-radius: 24px; border-top-right-radius: 24px; } .manifesto-inner { max-width: 1000px; margin: 0 auto; padding: 0 32px; text-align: center; } .manifesto-inner .chapter-eyebrow { justify-content: center; } .manifesto-sentence { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.35; color: var(--ink); margin: 0; } .mask-word { display: inline-block; overflow: hidden; vertical-align: bottom; margin: 0 0.15em 0 0; } .mask-word-inner { display: inline-block; will-change: transform; } .mask-word--chip { vertical-align: middle; margin: 0 0.2em; } .pill-chip { display: inline-flex; align-items: baseline; padding: 4px 14px; border-radius: 999px; background: var(--chrome-gradient); color: #0a0b0d; font-family: var(--mono); font-size: 0.6em; font-weight: 600; vertical-align: middle; } .statement-strip { position: relative; overflow: hidden; padding: 40px 0; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); } .statement-track { display: flex; width: max-content; will-change: transform; } .statement-text { font-family: var(--display); font-weight: 800; font-size: 9vw; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; color: transparent; -webkit-text-stroke: 1px rgba(233, 236, 241, 0.5); white-space: nowrap; } .statement-glass-chip { position: absolute; top: 50%; left: 55%; transform: translateY(-50%); padding: 20px 26px; border-radius: 16px; border: 1px solid var(--edge); background: rgba(7, 8, 10, 0.5); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .statement-glass-value { font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--ink); white-space: nowrap; } .statement-glass-caption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 6px; } /* ---------- section 07: spec ---------- */ .tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 64px; } .tier-card { position: relative; border: 1px solid var(--edge); border-radius: 20px; padding: 32px 28px; background: rgba(233, 236, 241, 0.03); } .tier-card--featured { border-color: rgba(233, 236, 241, 0.28); background: rgba(233, 236, 241, 0.05); } .tier-flag { position: absolute; top: -13px; left: 28px; padding: 4px 12px; border-radius: 999px; background: var(--chrome-gradient); color: #0a0b0d; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; } .tier-name { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .tier-price { font-family: var(--display); font-weight: 700; font-size: 32px; color: var(--ink); margin-bottom: 8px; } .tier-price-suffix { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--muted); } .tier-cap { font-family: var(--mono); font-size: 13px; color: var(--muted); padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--edge); } .tier-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--ink); } .fee-table { margin-bottom: 64px; } .fee-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 90px); align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--edge); } .fee-row--head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .fee-label { color: var(--ink); font-size: 14px; } .fee-row--head .fee-label { color: var(--muted); } .fee-col { font-family: var(--mono); font-size: 13px; color: var(--ink); text-align: right; } .fee-note { max-width: 68ch; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 20px; line-height: 1.6; } .worked-example { border: 1px solid var(--edge); border-radius: 16px; padding: 28px; max-width: 560px; } .worked-header { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 18px; } .worked-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--edge); font-family: var(--mono); font-size: 13px; } .worked-row-label { color: var(--muted); } .worked-row-note { color: var(--muted); } .worked-row-value { text-align: right; color: var(--ink); } .worked-row-value--pos { color: var(--good); } .worked-row--total { border-bottom: none; padding-top: 16px; } .worked-row--total .worked-row-label, .worked-row--total .worked-row-value { color: var(--ink); font-weight: 700; font-size: 16px; } /* ---------- section 08: custody ---------- */ .custody-map { display: flex; align-items: stretch; gap: 0; } .custody-map-item { display: flex; align-items: center; flex: 1; min-width: 0; } .custody-node { flex: 1; border: 1px solid var(--edge); border-radius: 16px; padding: 24px; transition: transform 0.2s ease; } .custody-node:hover { transform: translateY(-4px); } .custody-node-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .custody-node-title { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink); margin: 0 0 10px; } .custody-node-body { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0 0 16px; } .custody-node-who { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 14px; border-top: 1px solid var(--edge); } .custody-node-who b { color: var(--ink); font-weight: 600; } .custody-arrow { color: var(--muted); flex-shrink: 0; margin: 0 6px; } /* ---------- section 09: numbers ---------- */ .numbers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .numbers-tile { border: 1px solid var(--edge); border-radius: 16px; padding: 32px 28px; } .numbers-tile-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; } .numbers-tile-value { font-family: var(--mono); font-weight: 700; font-size: clamp(48px, 5vw, 60px); color: var(--ink); opacity: 0.18; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 14px; } .numbers-tile-caption { font-family: var(--mono); font-size: 12px; color: var(--muted); } /* ---------- section 10: faq ---------- */ .faq-list { max-width: 760px; border-top: 1px solid var(--edge); } .faq-row { border-bottom: 1px solid var(--edge); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; background: none; border: none; color: var(--ink); font-family: var(--display); font-size: 17px; font-weight: 600; text-align: left; cursor: pointer; } .faq-plus { flex-shrink: 0; color: var(--muted); transform-origin: center; } .faq-panel { height: 0; overflow: hidden; } .faq-answer { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 22px; max-width: 640px; } /* ---------- section 11: close ---------- */ .close-section { min-height: 100svh; display: flex; align-items: center; } .close-inner { padding-top: 100px; padding-bottom: 100px; } .close-stack { margin: 0 0 40px; display: flex; flex-direction: column; } .close-word { display: block; overflow: hidden; line-height: 1; } .close-word-inner { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(48px, 7vw, 108px); letter-spacing: -0.02em; color: var(--ink); /* This headline sits directly on a photographic chrome texture whose bright highlight bands move depending on crop/viewport; the section's own scrim gradient handles most of it, but a highlight can still sweep under a single word at some widths. A soft dark shadow is cheap insurance that guarantees legibility regardless of what's behind it, without flattening the letterforms into a hard outline. */ text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55); will-change: transform; } .close-headline { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; color: var(--ink); margin: 0 0 20px; } .close-lead { max-width: 520px; color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0 0 36px; } /* ---------- section 12: footer ---------- */ .site-footer { border-top: 1px solid var(--edge); padding-top: 0; overflow: hidden; } .site-footer .section-inner { padding-bottom: 60px; } .footer-columns { display: flex; gap: 80px; margin: 40px 0 60px; } .footer-legal { display: flex; gap: 20px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; padding-top: 24px; border-top: 1px solid var(--edge); } .footer-wordmark { font-family: var(--display); font-weight: 800; font-size: 18vw; line-height: 0.8; letter-spacing: -0.02em; color: var(--ink); opacity: 0.95; text-align: center; white-space: nowrap; overflow: hidden; padding-bottom: 0.04em; } /* ---------- reference-led craft pass ---------- */ .btn-chrome, .btn-ghost { position: relative; isolation: isolate; overflow: hidden; color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.26); background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 42%, rgba(255,255,255,.12)), rgba(20, 23, 28, 0.58); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(255,255,255,.08), 0 12px 36px rgba(0,0,0,.32); } .btn-chrome::before, .btn-ghost::before { content: ""; position: absolute; z-index: -1; inset: -2px; background: linear-gradient(105deg, transparent 18%, rgba(255,255,255,.48) 42%, transparent 66%); transform: translateX(-110%); transition: transform .65s cubic-bezier(.2,.8,.2,1); } .btn-chrome:hover, .btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,.46); filter: none; transform: translateY(-2px); } .btn-chrome:hover::before, .btn-ghost:hover::before { transform: translateX(110%); } .wallets-value .brand-mark { display: inline-block; vertical-align: middle; } .stack-panel { isolation: isolate; } .stack-panel::before { content: ""; position: absolute; inset: 10% 0 auto 44%; width: 56vw; height: 56vw; border-radius: 50%; background: radial-gradient(circle, rgba(107, 121, 255, .1), transparent 62%); filter: blur(10px); z-index: -1; } .stack-panel--2::before { background: radial-gradient(circle, rgba(233,196,106,.09), transparent 62%); } .stack-panel--3::before { background: radial-gradient(circle, rgba(143,227,176,.1), transparent 62%); } .stack-inner { grid-template-columns: .72fr 1.28fr; gap: clamp(48px, 7vw, 120px); } .stack-copy { align-self: end; padding-bottom: 10vh; } .stack-ghost-n { position: absolute; top: 9vh; left: 32px; font-size: clamp(100px, 18vw, 280px); opacity: .55; z-index: -1; } .stack-title { font-size: clamp(48px, 6vw, 92px); letter-spacing: -.045em; line-height: .9; } .stack-body { max-width: 430px; font-size: 17px; } .product-stage { position: relative; padding: 54px 38px; } .product-orbit { position: absolute; border: 1px solid rgba(233,236,241,.1); border-radius: 50%; pointer-events: none; } .product-orbit--a { inset: 0 5%; } .product-orbit--b { inset: 12% -3%; opacity:.45; } .product-panel { position: relative; z-index: 2; padding: 0; border-color: rgba(255,255,255,.17); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.018) 42%), rgba(8,10,13,.76); backdrop-filter: blur(24px) saturate(1.35); -webkit-backdrop-filter: blur(24px) saturate(1.35); box-shadow: 0 40px 100px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.13); overflow: visible; transform: perspective(1000px) rotateY(-3deg); } .product-panel--verify { transform: perspective(1000px) rotateY(3deg); } .product-panel-top { height: 58px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--edge); } .product-panel-label { margin: 0; color: var(--ink); } .live-indicator, .secure-mark { font: 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .live-indicator i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 2px 8px rgba(143,227,176,.65); } .panel-balance { padding: 26px 24px 20px; display: grid; gap: 2px; } .panel-balance span, .panel-balance small { font: 11px/1.5 var(--mono); color: var(--muted); } .panel-balance strong { font: 700 clamp(34px,4vw,54px)/1 var(--display); letter-spacing: -.04em; } .chain-list, .stepper, .stepper--identity, .verify-pending, .tx-list { margin-left: 24px; margin-right: 24px; } .chain-list { display:grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 20px; } .chain-row { min-height: 76px; padding: 12px 8px; border: 1px solid var(--edge)!important; border-radius: 12px; flex-direction: column; align-items: flex-start; gap: 6px; background: rgba(255,255,255,.025); } .chain-name { font-size: 11px; } .chain-asset { font-size: 11px; } .stepper { margin-bottom: 24px; } .identity-card { display: grid; grid-template-columns: 48px 1fr auto; align-items:center; gap: 14px; margin: 24px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.05); } .identity-avatar { width:48px; height:48px; border-radius: 50%; display:grid; place-items:center; font: 12px var(--mono); background: linear-gradient(135deg,#dce0e7,#5d626c); color:#090a0c; } .identity-card div:nth-child(2) { display:grid; gap:4px; } .identity-card strong { font-size: 14px; } .identity-card span { font: 11px var(--mono); color: var(--muted); } .identity-card i { font: 12px var(--mono); color: var(--amber); font-style: normal; } .verify-pending { padding-bottom: 24px; } .spend-summary { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin: 0 24px; background:var(--edge); } .spend-summary div { display:grid; gap:5px; padding:18px; background:#0b0d11; } .spend-summary span { font:11px var(--mono); color:var(--muted); text-transform:uppercase; } .spend-summary strong { font:700 25px var(--display); } .tx-list { margin-top: 12px; padding-bottom: 16px; } .floating-receipt { position:relative;z-index:4;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px; min-width:0;margin:0 24px 22px;padding:15px 18px;overflow:hidden; border:1px solid rgba(255,255,255,.58);border-radius:16px; color:#090b0e; background: radial-gradient(circle at 78% 10%,rgba(171,181,255,.82),transparent 27%), radial-gradient(circle at 14% 118%,rgba(255,255,255,.98),transparent 42%), linear-gradient(120deg,#6c727d 0%,#f6f8fb 18%,#838a96 37%,#e9edf2 55%,#5c626d 76%,#f6f7f9 100%); box-shadow: 0 22px 52px rgba(0,0,0,.38), inset 0 1px 1px rgba(255,255,255,.92), inset 0 -1px 1px rgba(29,32,38,.35); transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s; } .floating-receipt::before { content:"";position:absolute;inset:-80% -12%;pointer-events:none; background:linear-gradient(108deg,transparent 36%,rgba(255,255,255,.75) 48%,transparent 61%); transform:translateX(-48%) rotate(-7deg);transition:transform .8s cubic-bezier(.2,.8,.2,1); } .floating-receipt::after { content:"";position:absolute;inset:1px;border-radius:15px;pointer-events:none; box-shadow:inset 0 0 22px rgba(255,255,255,.28); } .floating-receipt span,.floating-receipt strong { position:relative;z-index:1; } .floating-receipt span { font:11px var(--mono);color:rgba(9,11,14,.62);text-transform:uppercase;letter-spacing:.1em; } .floating-receipt strong { font:700 15px var(--display);color:#090b0e;text-align:right; } .floating-receipt--deposit,.floating-receipt--verify,.floating-receipt--spend { inset:auto; } .product-stage:hover .floating-receipt { transform:translateY(-4px);box-shadow:0 28px 62px rgba(0,0,0,.46),inset 0 1px 1px rgba(255,255,255,.92); } .product-stage:hover .floating-receipt::before { transform:translateX(48%) rotate(-7deg); } .card-stage-canvas-wrap { width: min(760px, 68vw); } .card-stage-copy { position:absolute; left:7vw; top:50%; transform:translateY(-50%); display:grid; z-index:2; pointer-events:none; } .card-stage-copy span { font:11px var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.12em; } .card-stage-copy strong { margin-top:12px; font:700 clamp(34px,4vw,64px)/.95 var(--display); letter-spacing:-.04em; } .card-progress { position:absolute; right:32px; top:50%; display:grid; gap:8px; } .card-progress i { width:3px; height:38px; border-radius:4px; background:var(--edge); transition:background .3s, box-shadow .3s; } .card-progress i.active { background:var(--ink); box-shadow:0 0 18px rgba(233,236,241,.45); } .card-stories { position:absolute; right:7vw; top:50%; width:min(300px,24vw); height:180px; transform:translateY(-50%); z-index:3; } .card-story { position:absolute; inset:0; display:grid; align-content:center; opacity:0; transform:translateY(28px); transition:opacity .5s,transform .65s cubic-bezier(.2,.8,.2,1); pointer-events:none; } .card-story--active { opacity:1; transform:translateY(0); } .card-story>span { font:11px var(--mono); color:var(--muted); letter-spacing:.12em; } .card-story h3 { margin:12px 0 10px; font:700 clamp(28px,3.2vw,52px)/.95 var(--display); letter-spacing:-.04em; } .card-story p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; } .card-chip { border-color:rgba(255,255,255,.2); background:rgba(18,21,26,.68); box-shadow:0 14px 45px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.1); } .manifesto-section { overflow:hidden; } .manifesto-section::before { content:""; position:absolute; width:72vw; height:72vw; border-radius:50%; background:radial-gradient(circle,rgba(114,129,255,.12),transparent 64%); filter:blur(18px); } .manifesto-inner { max-width:1180px; width:100%; } .manifesto-kicker { margin-bottom:36px; font:600 clamp(18px,2vw,26px) var(--display); color:var(--muted); } .manifesto-sentence { font-size:clamp(38px,5vw,76px); line-height:1.08; letter-spacing:-.045em; } .pill-chip { color:var(--ink); background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.24); box-shadow:inset 0 1px rgba(255,255,255,.24),0 12px 30px rgba(0,0,0,.35); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .manifesto-values { display:grid; grid-template-columns:.72fr 1.28fr; gap:12px; max-width:760px; margin:48px auto 0; text-align:left; } .manifesto-value-card { display:grid; gap:8px; padding:20px 22px; border:1px solid var(--edge); border-radius:18px; background:rgba(255,255,255,.035); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:inset 0 1px rgba(255,255,255,.1); } .manifesto-value-card span,.manifesto-value-card small { font:11px/1.4 var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.07em; } .manifesto-value-card strong { font:700 clamp(24px,3vw,38px)/1 var(--display); letter-spacing:-.035em; } .manifesto-value-card--cap { background:linear-gradient(130deg,rgba(255,255,255,.12),rgba(255,255,255,.025)); } .manifesto-proof { display:grid; grid-template-columns:repeat(3,1fr); margin-top:64px; border-top:1px solid var(--edge); text-align:left; } .manifesto-proof div { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; padding:20px; border-right:1px solid var(--edge); } .manifesto-proof div:last-child { border-right:0; } .manifesto-proof span { grid-row:1/3; font:11px var(--mono); color:var(--muted); } .manifesto-proof strong { font-size:14px; } .manifesto-proof small { font:11px var(--mono); color:var(--muted); } .statement-glass-chip { overflow:hidden; min-width:270px; border-color:rgba(255,255,255,.26); background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.03)),rgba(7,8,10,.58); } .statement-glass-chip { left:50%;transform:translate(-50%,-50%);min-width:330px;padding:24px 30px;text-align:center; border-color:rgba(255,255,255,.64); background: radial-gradient(circle at 78% 12%,rgba(173,181,255,.9),transparent 28%), radial-gradient(circle at 18% 120%,rgba(255,255,255,1),transparent 42%), linear-gradient(120deg,#5c626d 0%,#f7f9fb 17%,#7c838f 36%,#eef1f4 55%,#515762 77%,#f5f6f8 100%); box-shadow:0 26px 70px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(18,20,24,.4); } .statement-glass-chip::before { content:"";position:absolute;inset:1px;border-radius:15px;box-shadow:inset 0 0 30px rgba(255,255,255,.28);pointer-events:none; } .statement-glass-chip::after { content:""; position:absolute; inset:-60%; background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.8),transparent 58%); transform:translateX(-42%); transition:transform .85s cubic-bezier(.2,.8,.2,1); } .statement-strip:hover .statement-glass-chip::after { transform:translateX(42%); } .statement-glass-index { position:relative; z-index:1; font:11px var(--mono); letter-spacing:.16em; color:rgba(9,11,14,.58); } .statement-glass-value,.statement-glass-caption { position:relative; z-index:1; } .statement-glass-value { color:#090b0e; } .statement-glass-caption { color:rgba(9,11,14,.62); } /* ---------- dimensional glass system ---------- */ .product-panel, .control-device, .manifesto-value-card, .custody-map, .custody-node { border-color:rgba(255,255,255,.18); box-shadow: 0 34px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.035); } .control-device { background: radial-gradient(circle at 78% 5%,rgba(160,169,255,.11),transparent 28%), linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.018) 38%), rgba(12,14,18,.92); } .manifesto-value-card, .custody-node { background: radial-gradient(circle at 82% 0,rgba(146,158,255,.11),transparent 38%), linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 52%), rgba(8,10,13,.76)!important; } .control-actions>div, .card-controls button, .card-controls>div, .wallet-provisioned, .deposit-route, .activity-receipt { border-color:rgba(255,255,255,.14); background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018)); box-shadow:inset 0 1px rgba(255,255,255,.1),0 13px 28px rgba(0,0,0,.18); } .detail-card, .spec-section .tier-card, .spec-section .worked-example, .spec-section .fee-table { border:1px solid rgba(17,19,23,.13); box-shadow: 0 34px 80px rgba(31,35,41,.1), inset 0 1px 0 rgba(255,255,255,.82), inset 0 -1px 0 rgba(17,19,23,.06); } .detail-card { background-image: radial-gradient(circle at 84% -5%,rgba(255,255,255,.72),transparent 33%), linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.015) 55%); background-blend-mode:soft-light,normal; } .detail-card--hold { background: radial-gradient(circle at 85% 0,rgba(145,158,255,.13),transparent 34%), linear-gradient(145deg,#171a20,#0e1014 62%); } .detail-card--funding { background: radial-gradient(circle at 82% 2%,rgba(255,255,255,.72),transparent 32%), linear-gradient(145deg,#d9dcff,#aeb5ff 58%,#ececff); } .detail-card--wallet { background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(232,232,226,.82)); } .detail-card--receipt { background: radial-gradient(circle at 82% 0,rgba(255,255,255,.48),transparent 34%), linear-gradient(140deg,#f2dfab,#c69e55); } .spec-section .tier-card { background: radial-gradient(circle at 82% 0,rgba(255,255,255,.88),transparent 35%), linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.24)); } .spec-section .tier-card--featured { background: radial-gradient(circle at 80% 0,rgba(151,162,255,.14),transparent 34%), linear-gradient(145deg,#1a1d23,#0d0f13 62%); box-shadow:0 42px 90px rgba(30,32,37,.22),inset 0 1px rgba(255,255,255,.17); } .spec-section .worked-example, .spec-section .fee-table { border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.3)); } .spec-section .fee-table { padding:10px 24px 2px; } .faq-list { display:grid;gap:10px;border-top:0; } .faq-row { padding:0 22px;border:1px solid rgba(255,255,255,.13);border-radius:18px; background: radial-gradient(circle at 88% 0,rgba(145,158,255,.08),transparent 32%), linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.014)); box-shadow:0 18px 45px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.09); } .details-section,.spec-section,.custody-section,.numbers-section,.faq-section { overflow:clip; } /* ---------- interactive product control center ---------- */ .control-section { position:relative; z-index:2; height:300svh; overflow:visible; background:radial-gradient(circle at 72% 48%,rgba(120,135,255,.12),transparent 32%),#090a0d; } .control-sticky { position:sticky;top:0;height:100svh;display:grid; grid-template-columns:minmax(320px,.72fr) minmax(500px,1.28fr); gap:clamp(54px,8vw,130px);align-items:center; padding:clamp(70px,8vw,110px) max(32px,calc((100vw - 1360px)/2)); overflow:hidden; } .control-sticky::after { content:"";position:absolute;z-index:-1;right:-12vw;top:4%;width:66vw;height:66vw;border-radius:50%; border:1px solid rgba(255,255,255,.06); box-shadow:0 0 0 8vw rgba(255,255,255,.012),0 0 0 16vw rgba(255,255,255,.008); } .control-intro h2 { margin:0 0 24px;font:750 clamp(50px,6.2vw,96px)/.9 var(--display);letter-spacing:-.055em; } .control-intro h2 em { font-style:normal;color:var(--muted); } .control-intro>p:not(.chapter-eyebrow) { max-width:510px;margin:0 0 44px;color:var(--muted);font-size:17px;line-height:1.6; } .control-tabs { display:grid;border-top:1px solid var(--edge); } .control-tabs::after { content:"";height:1px;width:var(--control-progress,0%);margin-top:-1px; background:linear-gradient(90deg,#fff,rgba(143,152,255,.7)); box-shadow:0 0 14px rgba(143,152,255,.45); } .control-tabs button { position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px; min-height:72px;padding:0 4px;border:0;border-bottom:1px solid var(--edge);background:none;color:var(--muted); text-align:left;cursor:pointer;transition:color .25s,padding .35s cubic-bezier(.2,.8,.2,1); } .control-tabs button::before { content:"";position:absolute;left:0;width:8px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s; } .control-tabs button.active { color:var(--ink);padding-left:18px; } .control-tabs button.active::before { transform:scaleX(1); } .control-tabs button span { font:600 19px var(--display); } .control-tabs button small { font:11px var(--mono);color:var(--muted); } .control-device { position:relative;width:100%;min-height:680px;border:1px solid rgba(255,255,255,.17); border-radius:42px;padding:20px;background:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.02) 28%),#0d0f13; box-shadow:0 70px 140px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.15); transform:perspective(1400px) rotateX(var(--device-rx,0deg)) rotateY(var(--device-ry,0deg)); transition:transform .18s ease-out; } .control-device-shell { justify-self:center;width:min(640px,100%);perspective:1400px; } .control-device-bar { height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font:11px var(--mono);color:var(--muted); } .control-device-bar strong { color:var(--ink);letter-spacing:.08em; } .control-view-wrap { min-height:566px;border:1px solid var(--edge);border-radius:28px;background:#090b0e;overflow:hidden;animation:view-in .55s cubic-bezier(.2,.8,.2,1); } @keyframes view-in { from { opacity:0;transform:translateY(16px) scale(.985); } } .control-view { min-height:566px;padding:30px; } .control-balance { display:grid;gap:6px;padding:14px 2px 28px; } .control-balance span,.control-balance small { font:11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em; } .control-balance strong { font:700 clamp(48px,6vw,72px)/1 var(--display);letter-spacing:-.055em; } .control-actions { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px; } .control-actions>div,.card-controls button,.card-controls>div { min-height:76px;border:1px solid var(--edge);border-radius:16px;background:rgba(255,255,255,.035);color:var(--ink); display:grid;place-items:center;gap:6px;font:11px var(--mono);transition:background .25s,transform .25s; } .card-controls button { cursor:pointer; } .card-controls button:hover { background:rgba(255,255,255,.09);transform:translateY(-2px); } .control-actions i,.card-controls i { font:normal 20px var(--display); } .deposit-route { padding:20px;border:1px solid var(--edge);border-radius:18px;background:rgba(255,255,255,.025); } .deposit-route-head,.deposit-route-foot { display:flex;align-items:center;justify-content:space-between;gap:16px; } .deposit-route-head>div { display:grid;gap:4px; } .deposit-route-head span,.deposit-route-foot span { font:11px var(--mono);color:var(--muted); } .deposit-route-head strong,.deposit-route-foot strong { font-size:14px; } .confirmation-track { display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:24px 0; } .confirmation-track i { height:4px;border-radius:4px;background:var(--good);box-shadow:0 3px 10px rgba(143,227,176,.3); } .confirmation-track i.pending { background:var(--edge);box-shadow:none; } .account-mini-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:22px;background:var(--edge); } .account-mini-grid div { display:grid;gap:6px;padding:17px;background:#0a0c0f; } .account-mini-grid span { font:11px var(--mono);color:var(--muted);text-transform:uppercase; } .account-mini-grid strong { font:600 13px var(--display); } .control-view--card { display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-content:center; } .control-card-visual { position:relative;grid-row:span 2;aspect-ratio:1.58;border-radius:22px;padding:24px;color:#090a0c; background:linear-gradient(145deg,#f4f5f7,#777d87 48%,#d8dce2);box-shadow:0 30px 60px rgba(0,0,0,.48);overflow:hidden; } .control-card-visual::before { content:"";position:absolute;inset:-60% 28%;background:rgba(255,255,255,.45);transform:rotate(28deg);filter:blur(15px); } .control-card-visual.frozen { filter:saturate(.15) brightness(.7); } .control-card-visual.frozen .control-card-state i { background:var(--bad); } .control-card-brand,.control-card-number,.control-card-state,.control-card-chip { position:absolute;z-index:1; } .control-card-brand { top:24px;right:24px;font:700 12px var(--display); } .control-card-chip { top:42%;left:24px;width:42px;height:31px;border-radius:7px;background:linear-gradient(135deg,#eee3be,#907b42); } .control-card-number { left:24px;bottom:24px;font:13px var(--mono);letter-spacing:.12em; } .control-card-state { right:24px;bottom:24px;font:11px var(--mono); } .control-card-state i { display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#246b40; } .wallet-provisioned { display:grid;grid-template-columns:68px 1fr auto;align-items:center;gap:12px;padding:18px;border:1px solid var(--edge);border-radius:17px;background:rgba(255,255,255,.035); } .wallet-provisioned .brand-mark { width:68px;height:28px; } .wallet-provisioned>div { display:grid;gap:4px; } .wallet-provisioned strong { font-size:13px; } .wallet-provisioned span { font:11px var(--mono);color:var(--muted); } .wallet-provisioned>i { font-style:normal;color:var(--good); } .card-controls { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;grid-column:1/-1; } .card-controls button,.card-controls>div { min-height:92px; } .card-controls span { font:11px var(--mono); } .control-note { grid-column:1/-1;font:12px/1.5 var(--mono);color:var(--muted);padding:4px; } .activity-merchant { display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:14px;padding-bottom:24px;border-bottom:1px solid var(--edge); } .activity-mark { width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#dfd1ac,#665a3d);color:#111;font:700 15px var(--display); } .activity-merchant>div:nth-child(2) { display:grid;gap:5px; } .activity-merchant span { font:11px var(--mono);color:var(--muted); } .activity-merchant>strong { font:700 20px var(--display); } .lifecycle { position:relative;margin:26px 0; } .lifecycle::before { content:"";position:absolute;left:6px;top:20px;bottom:20px;width:1px;background:var(--edge); } .lifecycle-row { position:relative;display:grid;grid-template-columns:14px 1fr auto;gap:15px;align-items:center;padding:16px 0; } .lifecycle-row>i { z-index:1;width:13px;height:13px;border:3px solid #090b0e;border-radius:50%;background:var(--good);box-shadow:0 0 0 1px var(--good); } .lifecycle-row>div { display:grid;gap:4px; } .lifecycle-row strong { font-size:14px; } .lifecycle-row span { font:11px var(--mono);color:var(--muted); } .lifecycle-row>span { font-size:12px;color:var(--ink); } .lifecycle-row>span.positive { color:var(--good); } .activity-receipt { display:grid;grid-template-columns:1fr auto;gap:13px;padding:20px;border-radius:16px;background:rgba(255,255,255,.035);font:11px var(--mono); } .activity-receipt span { color:var(--muted); } .activity-receipt strong { text-align:right; } .control-device-nav { height:48px;display:flex;align-items:center;justify-content:center;gap:16px; } .control-device-nav i { width:5px;height:5px;border-radius:50%;background:var(--edge); } .control-device-nav i.active { width:20px;border-radius:5px;background:var(--ink); } /* ---------- product-detail bento ---------- */ .details-section { position:relative;z-index:3;padding:clamp(110px,11vw,170px) max(32px,calc((100vw - 1360px)/2)); color:#111317;background:#e7e7e2;overflow:hidden; } .details-head { display:grid;grid-template-columns:1.2fr .55fr;column-gap:clamp(40px,9vw,140px);align-items:end;margin-bottom:70px; } .details-head .chapter-eyebrow { grid-column:1/-1;color:rgba(17,19,23,.52); } .details-head h2 { margin:0;font:750 clamp(54px,7vw,108px)/.86 var(--display);letter-spacing:-.06em; } .details-head h2 em { color:rgba(17,19,23,.4);font-style:normal; } .details-head>p:last-child { max-width:400px;margin:0 0 8px;color:rgba(17,19,23,.58);font-size:17px;line-height:1.58; } .details-grid { display:grid;grid-template-columns:repeat(12,1fr);gap:14px; } .details-grid,.tier-grid,.custody-map,.product-stage,.control-sticky { perspective:1400px; } .detail-card,.tier-card,.custody-node,.product-stage,.control-device-shell { transform-style:preserve-3d; } .detail-card { position:relative;min-height:520px;padding:34px;border:1px solid rgba(17,19,23,.13); border-radius:30px;background:rgba(255,255,255,.52);overflow:hidden; box-shadow:0 25px 80px rgba(24,28,34,.07); transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .35s; } .detail-card:hover { transform:translateY(-8px);box-shadow:0 40px 90px rgba(24,28,34,.12);border-color:rgba(17,19,23,.25); } .detail-card-copy { position:relative;z-index:2;max-width:560px; } .detail-card-copy>span { font:11px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:rgba(17,19,23,.48); } .detail-card-copy h3 { margin:13px 0 12px;font:700 clamp(30px,3vw,48px)/.96 var(--display);letter-spacing:-.045em; } .detail-card-copy p { max-width:470px;margin:0;color:rgba(17,19,23,.58);font-size:15px;line-height:1.55; } .detail-card--hold { grid-column:span 7;background:#111317;color:#f0f1f3;border-color:#111317; } .detail-card--funding { grid-column:span 5;background:linear-gradient(145deg,#d9dcff,#b3b9ff 58%,#ebebff); } .detail-card--wallet { grid-column:span 5;min-height:520px;background:#f3f3ef; } .detail-card--receipt { grid-column:span 7;min-height:520px;background:linear-gradient(140deg,#f2dfab,#c69e55); } .detail-card--hold .detail-card-copy>span,.detail-card--hold .detail-card-copy p { color:rgba(240,241,243,.52); } .hold-ui { position:absolute;left:34px;right:34px;bottom:34px;display:grid;grid-template-columns:1fr 1fr; border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(255,255,255,.035);overflow:hidden; } .hold-ui>div:not(.hold-merchant) { display:grid;gap:8px;padding:22px;border-right:1px solid rgba(255,255,255,.1); } .hold-ui>div:nth-child(2) { border-right:0; } .hold-ui span,.hold-ui small { font:11px var(--mono);color:rgba(240,241,243,.5); } .hold-ui>div>strong { font:650 28px var(--display); } .hold-merchant { grid-column:1/-1;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;padding:18px 22px;border-top:1px solid rgba(255,255,255,.1); } .hold-merchant i { width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:#d9c9a3;color:#161719;font:700 13px var(--display);font-style:normal; } .hold-merchant>span { display:grid;gap:5px;color:#f0f1f3;font:600 14px var(--display); } .hold-merchant small { display:block; } .hold-merchant>strong { font:650 18px var(--display); } .network-orbit { position:absolute;left:50%;top:59%;width:260px;aspect-ratio:1;transform:translate(-50%,-50%); border:1px solid rgba(17,19,23,.14);border-radius:50%; box-shadow:0 0 0 46px rgba(255,255,255,.14),0 0 0 47px rgba(17,19,23,.07); } .network-orbit>strong { position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:96px;aspect-ratio:1;border-radius:50%;background:#111317;color:#fff;font:700 18px var(--display);box-shadow:0 18px 35px rgba(34,36,55,.25); } .network-orbit>i { --angle:calc(var(--i) * 72deg);position:absolute;left:calc(50% + cos(var(--angle)) * 130px);top:calc(50% + sin(var(--angle)) * 130px); width:42px;aspect-ratio:1;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%; background:rgba(255,255,255,.82);border:1px solid rgba(17,19,23,.12);font:700 12px var(--display);font-style:normal; } .funding-failure { position:absolute;z-index:2;left:26px;right:26px;bottom:24px;display:grid;gap:4px;padding:16px 18px;border:1px solid rgba(17,19,23,.15);border-radius:15px;background:rgba(255,255,255,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); } .funding-failure span,.funding-failure small { font:11px/1.4 var(--mono);color:rgba(17,19,23,.52); } .funding-failure strong { font-size:13px; } .wallet-stage { position:absolute;left:34px;right:34px;bottom:34px;display:grid;gap:10px; } .wallet-stage>div { min-height:76px;display:grid;grid-template-columns:112px 1fr;align-items:center;padding:0 22px;border:1px solid rgba(17,19,23,.13);border-radius:19px;background:#fff;box-shadow:0 14px 30px rgba(20,22,26,.06); } .wallet-stage .brand-mark { width:96px;height:32px;color:#111317; } .wallet-stage span { justify-self:end;font:11px var(--mono);color:#247342; } .receipt-lines { position:absolute;left:34px;right:34px;bottom:34px;display:grid;grid-template-columns:1fr auto;gap:0;padding:8px 22px;border-radius:20px;background:rgba(30,25,15,.9);color:#f5ecd8;box-shadow:0 25px 45px rgba(73,50,14,.22); } .receipt-lines>div { display:contents; } .receipt-lines span,.receipt-lines strong { padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);font:11px var(--mono); } .receipt-lines strong { text-align:right; } .receipt-lines>div:last-child span,.receipt-lines>div:last-child strong { border-bottom:0;font-size:14px;color:#fff; } .receipt-lines strong.positive { color:#9ee0ae; } .tier-grid { gap:12px; } .tier-card { min-height:520px; padding:0 30px 34px; overflow:hidden; border-radius:28px; transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s; } .tier-card:hover { transform:translateY(-10px); border-color:rgba(255,255,255,.28); } .tier-art { height:180px; margin:0 -30px 28px; position:relative; overflow:hidden; border-bottom:1px solid var(--edge); background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.18),transparent 64%); } .tier-art span { position:absolute; top:18px; left:22px; font:11px var(--mono); color:var(--muted); } .tier-art i { position:absolute; width:190px; aspect-ratio:1.58; left:50%; top:50%; border-radius:14px; transform:translate(-50%,-34%) rotate(-8deg); background:linear-gradient(145deg,#252931,#090a0d 52%,#3d424c); box-shadow:0 28px 50px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.22); } .tier-card--metal .tier-art i { transform:translate(-50%,-34%) rotate(4deg); background:var(--chrome-gradient); } .tier-card--private .tier-art i { transform:translate(-50%,-34%) rotate(-4deg); background:linear-gradient(145deg,#17191e,#000 58%,#747982); box-shadow:0 0 45px rgba(233,236,241,.12); } .tier-name { font-size:12px; } .tier-price { font-size:42px; letter-spacing:-.04em; } .tier-flag { top:154px; left:auto; right:22px; z-index:2; } .worked-example { max-width:none; padding:0; display:grid; grid-template-columns:.8fr 1.2fr; overflow:hidden; border-radius:24px; background:rgba(255,255,255,.025); } .worked-visual { position:relative; padding:40px; min-height:390px; border-right:1px solid var(--edge); background:radial-gradient(circle at 20% 20%,rgba(233,196,106,.12),transparent 50%); } .worked-kicker { font:11px var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.1em; } .worked-merchant-mark { width:74px;height:74px;margin:54px 0 24px;border-radius:22px;display:grid;place-items:center;font:600 22px var(--display);background:linear-gradient(145deg,#d9c9a2,#695c3d);color:#111;box-shadow:0 18px 40px rgba(0,0,0,.4); } .worked-visual h3 { margin:0 0 10px;font:700 clamp(26px,3vw,42px)/1 var(--display);letter-spacing:-.035em; } .worked-visual p { max-width:340px;margin:0;color:var(--muted);line-height:1.55; } .worked-total { position:absolute;left:40px;right:40px;bottom:34px;display:flex;align-items:end;justify-content:space-between;padding-top:18px;border-top:1px solid var(--edge); } .worked-total span { font:11px var(--mono);color:var(--muted);text-transform:uppercase; } .worked-total strong { font:700 30px var(--display); } .worked-ledger { padding:40px; display:flex; flex-direction:column; justify-content:center; } /* A deliberate light editorial world breaks the repeated dark-outline rhythm, borrowing the hard composition changes in Habitline, Nova and MVN. */ .spec-section { color:#111317; background:#e7e7e2; border-radius:32px 32px 0 0; } .spec-section .chapter-eyebrow,.spec-section .section-lead,.spec-section .tier-name, .spec-section .tier-price-suffix,.spec-section .tier-cap,.spec-section .fee-note, .spec-section .worked-kicker,.spec-section .worked-visual p,.spec-section .worked-total span, .spec-section .worked-row-label,.spec-section .worked-row-note { color:rgba(17,19,23,.58); } .spec-section .section-heading,.spec-section .section-heading em,.spec-section .tier-price, .spec-section .tier-bullets,.spec-section .fee-label,.spec-section .fee-col, .spec-section .worked-visual h3,.spec-section .worked-total strong,.spec-section .worked-header, .spec-section .worked-row-value { color:#111317; } .spec-section .tier-card { border-color:rgba(17,19,23,.15); background:rgba(255,255,255,.42); box-shadow:0 24px 70px rgba(30,32,37,.07); } .spec-section .tier-card--featured { background:#111317; color:var(--ink); transform:translateY(-18px); } .spec-section .tier-card--featured .tier-name,.spec-section .tier-card--featured .tier-cap { color:var(--muted); } .spec-section .tier-card--featured .tier-price,.spec-section .tier-card--featured .tier-bullets { color:var(--ink); } .spec-section .tier-art,.spec-section .tier-cap,.spec-section .fee-row, .spec-section .worked-example,.spec-section .worked-visual,.spec-section .worked-total { border-color:rgba(17,19,23,.14); } .spec-section .worked-example { background:rgba(255,255,255,.5); } .spec-section .worked-ledger .status-chip { color:#6e571e; } .spec-section .worked-ledger .status-chip--cleared { color:#27623e; } .numbers-section { min-height:90svh; display:flex; align-items:center; overflow:hidden; } .numbers-section .section-inner { width:100%; } .numbers-editorial { position:relative; } .numbers-word { font:800 clamp(72px,14vw,220px)/.72 var(--display); letter-spacing:-.065em; color:var(--ink); white-space:nowrap; } .numbers-word--outline { color:transparent;-webkit-text-stroke:1px rgba(233,236,241,.42); transform:translateX(8vw); } .numbers-note { display:grid;grid-template-columns:repeat(3,auto);gap:10px 30px;align-items:center;margin:70px 0 0 auto;width:max-content;max-width:100%;font:11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em; } .numbers-note strong { grid-column:1/-1;color:var(--ink);font:600 clamp(20px,3vw,38px) var(--display);text-transform:none;letter-spacing:-.03em; } .custody-map { position:relative;padding:44px;border-radius:28px;background:radial-gradient(circle at 50% 0,rgba(116,131,255,.12),transparent 55%),rgba(255,255,255,.025); } .custody-node { min-height:300px;border-radius:22px!important;background:rgba(9,11,14,.72)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.28); } .close-section { min-height:100svh; /* Scrim is heaviest where the headline/lead/CTA actually sit (left side of this layout) and lightest over the card-fan graphic on the right, so the chrome photo's bright highlight bands can never land behind text at full brightness regardless of where they fall in the image. Previously this gradient ran the other direction (light scrim under the text, heavy scrim under the card art with no text), which is why some crops of the chrome image left "Get the card" and the lead paragraph nearly unreadable. */ background: linear-gradient(90deg,rgba(5,6,8,.82),rgba(5,6,8,.5) 45%,rgba(5,6,8,.16)), url("/chrome-ribbons-v1.jpg") center/cover no-repeat; overflow:hidden; } .close-inner { z-index:2; } .close-card-fan { position:absolute;right:5vw;bottom:-7vw;width:46vw;height:30vw;z-index:1;filter:drop-shadow(0 35px 45px rgba(0,0,0,.5)); } .close-card-fan i { position:absolute;left:50%;bottom:0;width:42%;aspect-ratio:1.58;border-radius:10%;transform-origin:50% 120%;background:linear-gradient(145deg,#242833,#050608 55%,#9da3ad);border:1px solid rgba(255,255,255,.22); } .close-card-fan i:nth-child(1){transform:translateX(-50%) rotate(-34deg)} .close-card-fan i:nth-child(2){transform:translateX(-50%) rotate(-17deg)} .close-card-fan i:nth-child(3){transform:translateX(-50%) rotate(0)} .close-card-fan i:nth-child(4){transform:translateX(-50%) rotate(17deg)} .close-card-fan i:nth-child(5){transform:translateX(-50%) rotate(34deg)} /* Material overrides live after the component rules so each surface keeps its own color world while sharing the same depth, rim light and glass response. */ .control-device { border-color:rgba(255,255,255,.2); background: radial-gradient(circle at 78% 5%,rgba(160,169,255,.11),transparent 28%), linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.018) 38%), rgba(12,14,18,.92); box-shadow:0 70px 140px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.19),inset 0 -1px rgba(255,255,255,.04); } .detail-card { border-color:rgba(17,19,23,.13); box-shadow:0 34px 80px rgba(31,35,41,.1),inset 0 1px rgba(255,255,255,.82),inset 0 -1px rgba(17,19,23,.06); } .detail-card--hold { background:radial-gradient(circle at 85% 0,rgba(145,158,255,.13),transparent 34%),linear-gradient(145deg,#171a20,#0e1014 62%); } .detail-card--funding { background:radial-gradient(circle at 82% 2%,rgba(255,255,255,.72),transparent 32%),linear-gradient(145deg,#d9dcff,#aeb5ff 58%,#ececff); } .detail-card--wallet { background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(232,232,226,.82)); } .detail-card--receipt { background:radial-gradient(circle at 82% 0,rgba(255,255,255,.48),transparent 34%),linear-gradient(140deg,#f2dfab,#c69e55); } .spec-section .tier-card { background:radial-gradient(circle at 82% 0,rgba(255,255,255,.88),transparent 35%),linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.24)); box-shadow:0 34px 80px rgba(31,35,41,.1),inset 0 1px rgba(255,255,255,.82),inset 0 -1px rgba(17,19,23,.06); } .spec-section .tier-card--featured { background:radial-gradient(circle at 80% 0,rgba(151,162,255,.14),transparent 34%),linear-gradient(145deg,#1a1d23,#0d0f13 62%); box-shadow:0 42px 90px rgba(30,32,37,.22),inset 0 1px rgba(255,255,255,.17); } .spec-section .worked-example, .spec-section .fee-table { background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.3)); } /* Defer layout/paint work for long off-screen, non-sticky sections. */ .spec-section,.custody-section,.numbers-section,.faq-section,.close-section,.site-footer { content-visibility:auto; contain-intrinsic-size:auto 900px; } .nav-mobile-menu::before { content:""; position:fixed; inset:0; z-index:-1; background:radial-gradient(circle at 80% 15%,rgba(117,133,255,.18),transparent 36%); } @supports (animation-timeline: scroll()) { .nav::after { content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,#fff,#8f98ff); transform:scaleX(0);transform-origin:left; animation:page-progress linear both;animation-timeline:scroll(root); } @keyframes page-progress { to { transform:scaleX(1); } } } .nav-mobile-section .nav-col-heading { display:flex;gap:12px;margin-bottom:4px; } .nav-mobile-section .nav-col-heading span { color:var(--ink); } .nav-mobile-link { min-height:58px;font-size:clamp(24px,7vw,34px);font-weight:600;letter-spacing:-.03em; } /* ---------- responsive ---------- */ @media (max-width: 900px) { .hero-inner { flex-direction: column; align-items: flex-start; padding-top: 100px; } .hero-card-wrap { align-self: center; } .hero-satellite--balance { left:-6%;top:8%; } .hero-satellite--auth { right:-9%;bottom:15%; } .hero-satellite--wallet { left:4%;bottom:0; } .hero-card-stage { width: min(360px, 70vw); } .nav-inner { padding: 0 20px; } .nav-right { gap: 1rem; } .nav-menu { display: none; } .nav-logo { width: 186px; height: 43px; overflow: hidden; flex-shrink: 0; } .nav-logo-scale { transform: scale(0.776); } .nav-cta { padding: 10px 16px; font-size: 13px; min-height: 44px; } .nav-hamburger { display: flex; } /* Touch targets: chrome/ghost CTAs sit a hair under 44px on desktop (11px padding + 14px text); grow the hit area on touch viewports without touching the visual padding rhythm elsewhere. */ .btn-chrome, .btn-ghost { min-height: 44px; } .section-inner { padding: 80px 24px; } .control-section { height:auto;min-height:auto; } .control-sticky { position:relative;height:auto;grid-template-columns:1fr;padding:100px 24px;gap:54px; } .control-intro h2 { font-size:clamp(52px,12vw,78px); } .control-device-shell { width:min(640px,100%); } .control-device { min-height:0; } .details-head { grid-template-columns:1fr;gap:26px;margin-bottom:48px; } .details-head h2 { font-size:clamp(52px,12vw,78px); } .details-grid { grid-template-columns:1fr; } .detail-card,.detail-card--hold,.detail-card--funding,.detail-card--wallet,.detail-card--receipt { grid-column:1; } .detail-card { min-height:520px; } .nav-mobile-menu { width: 100vw; border-left: 0; padding: 28px 24px 44px; } .nav-mobile-sections { gap: 18px; } .stack-inner { gap: 42px; } .stack-copy { padding-bottom: 0; } .stack-ghost-n { position:static; font-size:72px; margin-bottom:-8px; } .stack-title { font-size:clamp(44px,13vw,68px); } .product-stage { padding:20px 12px 36px; } .product-panel,.product-panel--verify { transform:none; } .floating-receipt--deposit,.floating-receipt--spend,.floating-receipt--verify { left:auto;right:auto; } /* The value chip in the statement marquee is positioned at a fixed left:55% + fixed padding, sized for wide viewports; below 900px it can run past the right edge of the (overflow:hidden) strip. Re-center it. */ .statement-glass-chip { left: 50%; transform: translate(-50%, -50%); padding: 14px 18px; } .statement-glass-value { font-size: 20px; } /* toka: card first, then the headline, then Top tier/Chains/Wallets on one line — moving the whole card block ahead of the copy column is a plain flex reorder since they're already siblings of .hero-inner. */ .hero-card-wrap { order: -1; } /* The three hero figures were sized for desktop (28-40px odometer values, 32px padding between columns) — too wide to ever fit three across on a phone. Compressed sizing here, rather than letting the row wrap, is what actually gets "Top tier / Chains / Wallets" on one line. */ .hero-figures { flex-wrap: nowrap; width: 100%; } .figure { padding: 0 12px; min-width: 0; } .figure-label { font-size: 11px; margin-bottom: 5px; } .figure-value { font-size: 16px; } .figure-value--static { font-size: 14px; } .figure .brand-mark--spec { height: 18px; } /* Sticky stacks degrade to normal flow: each panel keeps its own height but no longer pins, so the page just scrolls past them in order. */ .stack-item { height: auto; } .stack-panel { position: relative; top: auto; height: auto; padding: 60px 0; } .stack-inner { grid-template-columns: 1fr; gap: 32px; } .card-scroll-wrap { height: auto; } .card-static { display:none; } .card-mobile { position:relative;display:block;padding:100px 24px;background:#08090c;overflow:hidden; } .card-mobile h2 { position:relative;z-index:2;margin:0;font:750 clamp(48px,12vw,76px)/.92 var(--display);letter-spacing:-.055em; } .card-mobile h2 em { color:var(--muted);font-style:normal; } .card-mobile-stage { position:relative;height:370px;display:grid;place-items:center; } .card-mobile-stage .card-glow { width:440px;height:440px; } /* This wrapper is the actual sizing reference createCardScene's resize() reads (via the containerRef passed to it in CardSection.tsx) — it MUST match the canvas/poster's own box exactly. It previously read the ancestor .card-mobile-stage's box instead (full stage width, fixed 370px height, a totally different aspect ratio from the card), so Three.js rendered at the wrong aspect and the browser then stretched that image non-uniformly into the narrower CSS-sized canvas box — confirmed by screenshot: the card ran off both edges of the viewport and looked visibly squashed. */ .card-mobile-canvas-wrap { position: relative; z-index: 1; width: min(430px, 86vw); aspect-ratio: 3.4 / 2.14; } .card-mobile-canvas-wrap .card-static-poster { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-7deg); transition: opacity 0.4s ease; } .card-mobile-canvas { position:absolute;inset:0;width:100%;height:100%;transition:opacity .4s ease; } .card-mobile-wallet { position:absolute;z-index:2;right:4%;bottom:15%;display:flex;align-items:center;gap:10px;padding:12px 15px; border:1px solid var(--edge);border-radius:14px;background:rgba(16,18,23,.82);box-shadow:0 16px 40px rgba(0,0,0,.45); } .card-mobile-wallet .brand-mark { width:60px;height:25px; } .card-mobile-wallet span { font:11px var(--mono);color:var(--good);text-transform:uppercase; } .card-mobile-steps { position:relative;z-index:2;display:grid;border-top:1px solid var(--edge); } .card-mobile-steps>div { display:grid;grid-template-columns:34px 1fr;gap:6px 12px;padding:24px 0;border-bottom:1px solid var(--edge); } .card-mobile-steps span { grid-row:1/3;font:11px var(--mono);color:var(--muted); } .card-mobile-steps strong { font:600 22px var(--display); } .card-mobile-steps p { max-width:460px;margin:0;color:var(--muted);font-size:13px;line-height:1.5; } .card-scroll-stage { position: relative; height: auto; padding: 80px 0; } .card-stage-canvas-wrap { width: min(520px, 110vw); } .card-eyebrow { top:32px;left:20px; } .card-stage-copy { left:20px;top:auto;bottom:38px;transform:none;z-index:3; } .card-stage-copy strong { font-size:30px; } .card-progress { right:20px; } .card-stories { left:20px;right:20px;top:90px;width:auto;height:120px;transform:none; } .card-story { align-content:start; } .card-story h3 { font-size:34px; } .card-story p { max-width:270px;font-size:12px; } .card-chip--a { bottom:25%; } .card-chip--b { top:22%;right:4%; } .card-chip--c { bottom:25%;right:4%; } .manifesto-section { position: relative; padding: 80px 0; } .manifesto-proof { grid-template-columns:1fr; margin-top:42px; } .manifesto-values { grid-template-columns:1fr; } .manifesto-proof div { border-right:0;border-bottom:1px solid var(--edge); } .manifesto-proof div:last-child { border-bottom:0; } .statement-text { font-size: 14vw; } .tier-grid, .numbers-grid { grid-template-columns: 1fr; } .tier-card { min-height:0; } .spec-section .tier-card--featured { transform:none; } .worked-example { grid-template-columns:1fr; } .worked-visual { border-right:0;border-bottom:1px solid var(--edge); } .fee-row { grid-template-columns: minmax(0, 1fr) repeat(3, 64px); font-size: 12px; } .custody-map { flex-direction: column; align-items: stretch; } .custody-map-item { flex-direction: column; } .custody-arrow { transform: rotate(90deg); margin: 6px 0; } .footer-columns { flex-wrap: wrap; gap: 40px; } .footer-wordmark { font-size: 22vw; } .numbers-section { min-height:70svh; } .numbers-word { font-size:clamp(58px,17vw,130px); } .numbers-word--outline { transform:none; } .numbers-note { width:100%;grid-template-columns:1fr; } .numbers-note strong { grid-column:auto; } .custody-map { padding:20px; } .close-card-fan { right:-16vw;bottom:3vh;width:85vw;height:50vw;opacity:.65; } } /* Small-phone tier (iPhone SE/mini down to 320px). The 900px breakpoint above is a straight desktop-layout retrofit; this tier tunes type scale, nav footprint and a few fixed-width grids that only break under ~480px. */ @media (max-width: 480px) { .nav-inner { padding: 0 16px; } .nav-right { gap: 0.6rem; } .nav-logo { width: 152px; height: 36px; } .nav-logo-scale { transform: scale(0.635); } .nav-cta { padding: 10px 13px; font-size: 12px; white-space: nowrap; } .nav-right { gap: 0.4rem; } /* Leaves a tappable sliver of backdrop even on the narrowest phones, rather than going edge to edge, so "close on backdrop click" always has somewhere to land. Constrain to actual viewport to prevent overflow. */ .nav-mobile-menu { width: min(100vw, 100%); max-width: calc(100vw - 20px); padding: 20px 20px 32px; } .nav-mobile-sections { max-width: 100%; word-break: break-word; } .nav-mobile-link { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hero-inner { padding-left: 20px; padding-right: 20px; } .control-sticky { padding:78px 20px; } .details-section { padding:90px 20px; } .detail-card { min-height:500px;padding:24px;border-radius:24px; } .hold-ui,.wallet-stage,.receipt-lines { left:24px;right:24px;bottom:24px; } .hold-ui>div:not(.hold-merchant) { padding:17px; } .hold-merchant { grid-template-columns:42px 1fr auto;padding:15px 17px; } .hold-merchant i { width:42px;height:42px; } .network-orbit { width:210px; } .network-orbit>i { left:calc(50% + cos(var(--angle)) * 105px);top:calc(50% + sin(var(--angle)) * 105px); } .wallet-stage>div { grid-template-columns:92px 1fr;padding:0 17px; } .wallet-stage .brand-mark { width:84px; } .control-tabs button { grid-template-columns:1fr;gap:3px;padding:12px 4px; } .control-device { padding:10px;border-radius:28px; } .control-view-wrap { min-height:0;border-radius:20px; } .control-view { min-height:520px;padding:20px 16px; } .control-balance strong { font-size:48px; } .control-actions>div { min-height:68px; } .account-mini-grid { grid-template-columns:1fr; } .control-view--card { grid-template-columns:1fr;align-content:start; } .control-card-visual { grid-row:auto;margin-bottom:4px; } .wallet-provisioned { grid-template-columns:44px 1fr auto; } .card-controls { grid-template-columns:repeat(3,1fr); } .card-controls button,.card-controls>div { min-height:78px; } .activity-merchant { grid-template-columns:48px 1fr auto; } .hero-satellite { padding:10px 11px; } .hero-satellite--balance { left:-2%;top:4%;min-width:118px; } .hero-satellite--auth { right:-5%;bottom:12%; } .hero-satellite--wallet { display:none; } .hero-headline { font-size: clamp(30px, 10vw, 52px); } .hero-ctas { flex-wrap: wrap; row-gap: 12px; } .hero-figures { flex-direction: row; flex-wrap: nowrap; } .figure { padding: 0 8px; border-left: 1px solid var(--edge); } .figure:first-child { padding-left: 0; border-left: none; } .figure-label { font-size: 11px; } .figure-value { font-size: 13px; } .figure-value--static { font-size: 12px; } .figure .brand-mark--spec { height: 15px; } .section-inner { padding: 64px 20px; } /* Stack panels: ensure they don't overflow the viewport on mobile */ .stack-group, .stack-panel { max-width: 100%; overflow-x: hidden; } .stack-title, .stack-body, .chapter-eyebrow { max-width: 100%; overflow-x: hidden; text-overflow: ellipsis; } .close-word-inner { font-size: clamp(34px, 11vw, 48px); } .statement-text { font-size: 12vw; } .manifesto-inner { padding:0 20px; } .manifesto-sentence { font-size:clamp(34px,10vw,48px); } .mask-word--chip { display:inline-block;margin:.12em .08em; } .statement-glass-chip { min-width:220px; } .chain-list { grid-template-columns:repeat(3,1fr); } .chain-row:nth-child(n+4) { grid-column:span 1; } .product-panel-top { padding:0 18px; } .panel-balance,.identity-card { margin-left:18px;margin-right:18px; } .panel-balance { padding-left:0;padding-right:0; } .chain-list,.stepper,.stepper--identity,.verify-pending,.tx-list { margin-left:18px;margin-right:18px; } .floating-receipt { min-width:126px;margin:0 18px 18px;padding:12px 13px; } .spend-summary { margin:0 18px; } .tier-card, .numbers-tile { padding: 24px 20px; } .tier-art { margin:-24px -20px 24px; } .tier-flag { top:132px; } .spec-section .fee-table { padding:8px 12px 2px; } .worked-visual,.worked-ledger { padding:26px 20px; } .worked-visual { min-height:390px; } .worked-total { left:20px;right:20px; } /* The header row prints tier names ("Standard"/"Premium"/"Private"), not just short numeric fee values, so the column needs to fit that longest word. .fee-col/.fee-label set their own font-size in the base rules (13px/14px), which wins over font-size set on the .fee-row container, so the size has to be overridden on the cells themselves, not just the row (measured: row-level font-size alone left "Standard" at 13px, 68px wide, colliding into the next 60px column). */ .fee-row { grid-template-columns: minmax(0, 1fr) repeat(3, 60px); gap: 8px; } .fee-label { font-size: 12px; } .fee-col { font-size: 12px; } .tx-row { grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 8px; } /* The "Clear" row's status chip carries a compound label ("Cleared (incl. 0.9% conversion)") that's plain text at 900px and up; in the narrow middle grid column on a phone that nowrap text runs out of its column and visually collides with the value to its right. Letting it wrap keeps it inside its own cell instead. */ .worked-row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; font-size: 12px; } .worked-row .status-chip { /* .status-chip is display:inline-flex (needed elsewhere for icon+text chips with align-items/gap) — but flexbox doesn't wrap mixed text-and-element children the way normal inline text does; its plain text runs and the embedded FeeBadge each become separate flex items and wrap independently, producing a jumbled, out-of-order layout ("0.9%" landing above "(incl." and "conversion)" on separate lines in no readable order). Confirmed by inspecting the computed style and re-screenshotting well past any entrance-animation settle time so it wasn't just an odometer mid-count-up artifact. Switching back to plain inline flow for this specific compound-text chip fixes the reading order; the single-word chips elsewhere never hit this since they have no wrapping text to break. */ display: inline; white-space: normal; text-align: left; line-height: 1.4; } .worked-row .status-chip .odometer { display: inline; } .tx-amount { font-size: 12px; } .status-chip { font-size: 11px; padding: 3px 8px; } .custody-node { padding: 20px; } .footer-columns { flex-direction: column; gap: 32px; } .footer-wordmark { font-size: 15vw; } } /* ---------- mobile one-shot reveal (attachMobileReveal in scroll.ts) ---------- Cheap CSS-only stand-in for the GSAP scroll-entrance that every section above skips on mobile. Default state (no class) is the plain visible layout, so no-JS and reduced-motion both render correctly with zero extra rules; JS only adds .reveal-pending immediately before observing. */ @media (max-width: 900px) and (prefers-reduced-motion: no-preference) { .reveal-pending { opacity: 0; transform: translateY(18px); transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-pending.reveal-visible { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .reveal-pending { opacity: 1 !important; transform: none !important; } .btn-chrome { animation: none; } .headline-inner { transform: translateY(0); } .marquee-track { transform: none !important; } .mask-word-inner, .close-word-inner { transform: translateY(0) !important; } .statement-track { transform: none !important; } .close-reveal { opacity: 1 !important; transform: none !important; } .stack-copy > *, .product-panel > *, .tier-card, .fee-row, .worked-row, .custody-node, .numbers-tile, .faq-row { opacity: 1 !important; transform: none !important; } } /* ---------- local demo application ---------- */ .bank-app { --app-bg: #080a0d; --app-panel: #101319; --app-panel-soft: #0d1015; --app-line: rgba(238, 241, 246, 0.1); --app-ink: #f0f2f5; --app-muted: #8f96a3; min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); background: radial-gradient(circle at 68% -10%, rgba(117, 130, 156, 0.14), transparent 31rem), var(--app-bg); color: var(--app-ink); font-family: var(--display); } .bank-app *, .bank-app *::before, .bank-app *::after { box-sizing: border-box; } .bank-app--centered { display: grid; grid-template-columns: 1fr; place-items: center; padding: 32px; } .app-eyebrow { margin: 0 0 8px; color: var(--app-muted); font: 11px/1.2 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; } /* ---------- mobile app shell (Phase 1) ---------- */ .app-shell { position: relative; display: flex; flex-direction: column; width: min(480px, 100%); min-height: 100vh; min-height: 100dvh; margin: 0 auto; } .app-shell-header { position: sticky; z-index: 10; top: 0; display: flex; flex: 0 0 52px; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--app-line); background: rgba(8, 10, 13, 0.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .app-shell-avatar { display: flex; flex: 0 0 34px; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--chrome-gradient); color: #0a0b0d; cursor: pointer; font: 600 14px/1 var(--display); } .app-shell-title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--app-ink); font-size: 15px; font-weight: 560; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; } .app-shell-content { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 16px calc(88px + env(safe-area-inset-bottom)); } .app-tab-placeholder { padding: 40px 4px; text-align: center; } .app-tab-placeholder h1 { margin: 0 0 8px; font-size: clamp(24px, 6vw, 30px); font-weight: 520; letter-spacing: -0.03em; } .app-tab-placeholder p:not(.app-eyebrow) { margin: 0; color: var(--app-muted); font-size: 13px; line-height: 1.6; } .tab-bar { position: fixed; left: 50%; z-index: 30; bottom: 0; display: flex; width: min(480px, 100%); transform: translateX(-50%); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--app-line); background: rgba(8, 10, 13, 0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .tab-bar-item { display: flex; flex: 1 1 0; min-height: 56px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: none; color: var(--app-muted); cursor: pointer; font-family: inherit; } .tab-bar-icon { width: 24px; height: 24px; } .tab-bar-item span { font-size: 11px; letter-spacing: 0.01em; } .tab-bar-item[aria-current="page"] { color: var(--app-ink); } .status-chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 999px; font: 11px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .status-chip-dot { width: 6px; height: 6px; border-radius: 50%; } .status-chip--good { border-color: rgba(143, 227, 176, 0.28); background: rgba(143, 227, 176, 0.08); color: var(--good); } .status-chip--good .status-chip-dot { background: var(--good); box-shadow: 0 0 6px rgba(143, 227, 176, 0.6); } .status-chip--amber { border-color: rgba(233, 196, 106, 0.28); background: rgba(233, 196, 106, 0.08); color: var(--amber); } .status-chip--amber .status-chip-dot { background: var(--amber); box-shadow: 0 0 6px rgba(233, 196, 106, 0.6); } .status-chip--bad { border-color: rgba(232, 134, 122, 0.28); background: rgba(232, 134, 122, 0.08); color: var(--bad); } .status-chip--bad .status-chip-dot { background: var(--bad); box-shadow: 0 0 6px rgba(232, 134, 122, 0.6); } .list-row { display: flex; width: 100%; min-height: 56px; align-items: center; gap: 12px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--app-line); background: none; color: var(--app-ink); font-family: inherit; text-align: left; } button.list-row { cursor: pointer; } .list-row:last-child { border-bottom: 0; } .list-row-leading { display: flex; flex: 0 0 36px; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--app-panel-soft); color: var(--app-muted); } .list-row-leading svg { width: 18px; height: 18px; } .list-row-label { flex: 1 1 auto; min-width: 0; font-size: 14px; } .list-row-trailing { flex: 0 0 auto; color: var(--app-muted); font-size: 13px; } .list-row-chevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--app-muted); } .list-row--destructive .list-row-label, .list-row--destructive .list-row-leading { color: var(--bad); } .segmented { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-panel-soft); } .segmented-item { flex: 1 1 0; min-height: 38px; border: 0; border-radius: 8px; background: none; color: var(--app-muted); cursor: pointer; font: 500 13px/1 var(--display); letter-spacing: -0.01em; } .segmented-item[aria-selected="true"] { background: var(--app-panel); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 6px rgba(0, 0, 0, 0.3); color: var(--app-ink); } .sheet-backdrop { position: fixed; z-index: 40; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: rgba(4, 5, 7, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .sheet-panel { width: min(480px, 100%); max-height: 86vh; overflow-y: auto; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); border: 1px solid var(--app-line); border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--app-panel); box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.4); } .sheet-handle { display: block; width: 36px; height: 4px; margin: 0 auto 14px; border-radius: 999px; background: var(--app-line); } .sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .sheet-title { margin: 0; font-size: 17px; font-weight: 560; letter-spacing: -0.01em; } .sheet-close { display: flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--app-line); border-radius: 50%; background: none; color: var(--app-muted); cursor: pointer; } .sheet-close svg { width: 16px; height: 16px; } .tx-row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 4px; border-bottom: 1px solid var(--app-line); } .tx-row:last-child { border-bottom: 0; } .tx-row--authorized .tx-row-avatar { background: rgba(233, 196, 106, 0.18); color: var(--amber); } .tx-row--cleared .tx-row-avatar { background: rgba(143, 227, 176, 0.18); color: var(--good); } .tx-row--declined .tx-row-avatar { background: rgba(232, 134, 122, 0.18); color: var(--bad); } .tx-row-avatar { display: grid; flex-shrink: 0; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--app-panel-soft); color: var(--app-ink); font: 12px var(--mono); } .tx-row-main { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 2px; } .tx-row-merchant { overflow: hidden; color: var(--app-ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .tx-row-category { color: var(--app-muted); font-size: 12px; } .tx-row-amount { flex: 0 0 auto; font: 600 13px/1 var(--mono); } .tx-row-amount--pos { color: var(--good); } .tx-row-amount--neg { color: var(--app-ink); } .app-balance-panel { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; min-height: 236px; padding: clamp(28px, 4vw, 48px); border: 1px solid rgba(236, 239, 245, 0.16); border-radius: 20px; background: linear-gradient(120deg, rgba(255, 255, 255, 0.055), transparent 40%), linear-gradient(135deg, #171b22, #0b0e13 68%); box-shadow: 0 26px 90px rgba(0, 0, 0, 0.25); } .app-balance-panel::after { content: ""; position: absolute; z-index: -1; inset: -80% -15% auto auto; width: 500px; height: 500px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 44%; transform: rotate(32deg); background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), transparent 55%); } .app-balance-panel p { margin: 0 0 15px; color: #a6adba; font-size: 13px; } .app-balance-panel strong { display: block; margin-bottom: 12px; font-size: clamp(42px, 6vw, 68px); font-weight: 470; letter-spacing: -0.055em; } .app-balance-panel > div > span { color: var(--app-muted); font: 11px/1.4 var(--mono); } .app-balance-meta { display: grid; min-width: 205px; gap: 7px; padding: 17px 19px; border: 1px solid var(--app-line); border-radius: 12px; background: rgba(4, 5, 7, 0.32); } .app-balance-meta span { color: var(--app-muted); font: 11px/1.2 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; } .app-balance-meta b { margin-bottom: 5px; font-size: 12px; font-weight: 500; } .app-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 18px; margin-top: 18px; } .app-grid--lower { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); } .app-panel { min-width: 0; padding: 26px; border: 1px solid var(--app-line); border-radius: 16px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent 45%), var(--app-panel); } .app-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .app-panel h2 { margin: 0; font-size: 19px; font-weight: 520; letter-spacing: -0.02em; } .app-safe-chip, .app-status-chip, .app-source-label { padding: 6px 9px; border: 1px solid var(--app-line); border-radius: 999px; color: #b7beca; font: 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; } .app-safe-chip { border-color: rgba(143, 227, 176, 0.18); color: var(--good); } .app-status-chip { color: var(--good); } .app-panel-copy { max-width: 50ch; margin: -7px 0 22px; color: var(--app-muted); font-size: 13px; line-height: 1.65; } .app-fund-panel form label { display: block; margin-bottom: 8px; color: #c3c8d1; font: 11px/1.2 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; } .app-amount-field { display: flex; align-items: center; height: 52px; border: 1px solid rgba(239, 242, 247, 0.16); border-radius: 10px; background: #090b0f; } .app-amount-field:focus-within { border-color: rgba(239, 242, 247, 0.55); } .app-amount-field span { padding-left: 16px; color: var(--app-muted); font-size: 17px; } .app-amount-field input { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: var(--app-ink); font: 18px/1 var(--mono); } .app-field-help { margin: 8px 0 17px; color: #737a86; font: 12px/1.4 var(--mono); } .app-button { min-height: 44px; padding: 0 18px; border: 1px solid #dde1e7; border-radius: 9px; background: #e6e9ee; color: #0a0c0f; cursor: pointer; font: 600 12px/1 var(--display); } .app-button:hover { background: #fff; } .app-button:disabled { cursor: wait; opacity: 0.55; } .app-button--wide { width: 100%; } .app-form-note { margin: 14px 0 0; color: var(--app-muted); font-size: 11px; line-height: 1.5; } .app-form-note--good { color: var(--good); } .app-form-note--success { color: var(--good); } .app-form-note--pending, .app-form-note--unknown { color: var(--amber); } .app-form-note--error { color: var(--bad); } .app-card-visual { position: relative; overflow: hidden; aspect-ratio: 1.62; padding: 23px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 18px; background: linear-gradient(135deg, transparent 10%, rgba(255, 255, 255, 0.28) 42%, transparent 43%), linear-gradient(145deg, #343941, #9da2a9 42%, #3e434b 52%, #bec2c8 81%, #555a62); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28); color: #090a0c; text-shadow: 0 1px rgba(255, 255, 255, 0.25); } .app-card-visual::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, transparent 0 12px, rgba(255, 255, 255, 0.035) 13px 14px); pointer-events: none; } .app-card-topline, .app-card-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; font: 700 12px/1 var(--mono); letter-spacing: 0.13em; } .app-card-chip { position: relative; z-index: 1; width: 37px; height: 29px; margin-top: 14%; border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 6px; background: linear-gradient(145deg, #d1c6a7, #8f856a); } .app-card-bottom { position: absolute; right: 23px; bottom: 22px; left: 23px; } .app-card-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 0; } .app-card-facts div { padding: 12px 14px; border: 1px solid var(--app-line); border-radius: 9px; } .app-card-facts dt { margin-bottom: 5px; color: var(--app-muted); font: 11px/1.3 var(--mono); text-transform: uppercase; } .app-card-facts dd { margin: 0; font-size: 13px; } .app-privacy-note { margin: 14px 0 0; color: #777e8a; font-size: 12px; line-height: 1.5; } .app-product-list, .app-activity-list { margin: 0; padding: 0; list-style: none; } .app-product-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--app-line); } .app-product-list li:last-child { border-bottom: 1px solid var(--app-line); } .app-product-list div { display: grid; gap: 5px; } .app-product-list strong { font-size: 13px; font-weight: 520; } .app-product-list span { color: var(--app-muted); font: 11px/1 var(--mono); } .app-product-list b { color: #c9ced7; font: 11px/1 var(--mono); text-transform: uppercase; } .app-minimum { margin: 17px 0 0; color: var(--app-muted); font-size: 11px; } .app-minimum strong { color: var(--app-ink); font-weight: 500; } .app-activity-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--app-line); } .app-activity-icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--app-line); border-radius: 50%; color: var(--good); } .app-activity-list li > div { display: grid; gap: 5px; } .app-activity-list strong { font-size: 12px; font-weight: 520; } .app-activity-list span { color: var(--app-muted); font: 11px/1.2 var(--mono); } .app-activity-value { justify-items: end; } .app-activity-value span[data-state="succeeded"] { color: var(--good); } .app-activity-value span[data-state="pending"], .app-activity-value span[data-state="unknown"] { color: var(--amber); } .app-activity-value span[data-state="failed"] { color: var(--bad); } .app-empty { margin: 0; padding: 30px 18px; border: 1px dashed var(--app-line); border-radius: 10px; color: var(--app-muted); font-size: 12px; text-align: center; } .app-empty--activity { display: grid; place-items: center; } .app-empty--activity > span { display: grid; width: 38px; height: 38px; margin-bottom: 10px; place-items: center; border: 1px solid var(--app-line); border-radius: 50%; } .app-empty--activity p { margin: 0 0 5px; color: #c0c5cf; } .app-empty--activity small { font-size: 11px; } .app-loader, .app-load-error { max-width: 430px; text-align: center; } .app-loader { color: var(--app-muted); font: 11px/1.5 var(--mono); } .app-loader-mark { display: block; width: 30px; height: 30px; margin: 0 auto 18px; border: 1px solid #9097a2; border-top-color: transparent; border-radius: 50%; animation: app-spin 0.9s linear infinite; } .app-load-error h1 { margin: 0 0 12px; font-size: 30px; font-weight: 520; } .app-load-error > p:not(.app-eyebrow) { margin: 0 0 22px; color: var(--app-muted); line-height: 1.6; } .app-text-link { display: block; margin-top: 18px; color: #b8bec8; font-size: 12px; } .app-link-button { width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; } .bank-app--centered { position: relative; } /* Ambient depth behind the auth card, same idea as .card-glow on the marketing hero: a soft radial halo in the chrome tint, not a color, so the panel reads as lifted off the field rather than floating alone in empty space. */ .app-auth-glow { position: absolute; top: 50%; left: 50%; width: min(820px, 92vw); height: min(820px, 92vw); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 236, 241, 0.1), transparent 70%); pointer-events: none; } .app-auth-mark { display: flex; justify-content: center; margin: 0 0 28px; } .app-auth-mark-scale { display: block; width: 148px; height: 34px; } .app-auth-mark-image { display: block; width: 100%; height: 100%; object-fit: contain; } .app-auth-panel { position: relative; width: min(460px, 100%); padding: 34px; text-align: left; box-shadow: 0 40px 70px -34px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(255, 255, 255, 0.02) inset; } .app-auth-panel h1 { margin: 6px 0 22px; font-size: clamp(22px, 3vw, 28px); font-weight: 520; letter-spacing: -0.02em; } .app-auth-panel .app-choice-form { margin-bottom: 4px; } /* Auth CTA gets its own explicit surface rather than inheriting .app-button as-is: keeps this button's contrast pinned regardless of any future change to the shared app-shell button (used across the dashboard funding/checklist flows too), and gives it a hair more margin above the 4.5:1 floor. Measured: #05070a on #f4f5f7 = 18.5:1. */ .app-auth-panel .app-button { background: #f4f5f7; color: #05070a; } .app-auth-panel .app-button:hover { background: #ffffff; } .app-status-banner { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 16px; border-bottom: 1px solid rgba(233, 196, 106, 0.22); background: rgba(233, 196, 106, 0.07); color: #e9d69a; font: 11px/1.4 var(--mono); letter-spacing: 0.01em; text-align: center; } .app-stack { display: grid; gap: 18px; } .app-intro-panel { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 120px; background: radial-gradient(circle at 95% 0%, rgba(157, 168, 190, 0.12), transparent 18rem), var(--app-panel); } .app-intro-panel h2 { font-size: clamp(24px, 3vw, 34px); } .app-intro-panel > p { max-width: 52ch; margin: 0; color: var(--app-muted); font-size: 13px; line-height: 1.65; } .app-progress { overflow: hidden; height: 5px; margin: -8px 0 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); } .app-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6e7788, #e6e9ee); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .app-checklist { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .app-checklist li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--app-line); } .app-checklist button { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(238, 241, 246, 0.18); border-radius: 50%; background: transparent; color: var(--app-muted); cursor: pointer; font: 11px/1 var(--mono); } .app-checklist li[data-complete="true"] button { border-color: rgba(143, 227, 176, 0.3); background: rgba(143, 227, 176, 0.08); color: var(--good); } .app-checklist div { display: grid; gap: 4px; } .app-checklist strong { font-size: 12px; font-weight: 530; } .app-checklist span { color: var(--app-muted); font-size: 12px; line-height: 1.45; } .app-choice-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .app-choice-list { display: grid; gap: 8px; margin-bottom: 8px; } .app-choice-list label { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--app-line); border-radius: 10px; cursor: pointer; } .app-choice-list label[data-selected="true"] { border-color: rgba(238, 241, 246, 0.32); background: rgba(255, 255, 255, 0.04); } .app-choice-list label span { display: grid; gap: 5px; } .app-choice-list label strong { font-size: 12px; font-weight: 530; } .app-choice-list label small { color: var(--app-muted); font: 11px/1 var(--mono); } .app-choice-list label b { color: #c8ced8; font: 11px/1 var(--mono); text-transform: uppercase; } .app-field-label { display: block; margin: 5px 0 -4px; color: #c3c8d1; font: 11px/1.2 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; } .app-choice-form > input, .app-choice-form > select, .app-panel > select { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid rgba(239, 242, 247, 0.16); border-radius: 9px; outline: 0; background: #090b0f; color: var(--app-ink); font: 12px/1 var(--display); } .app-choice-form > input:focus, .app-choice-form > select:focus, .app-panel > select:focus { border-color: rgba(239, 242, 247, 0.55); } .app-card-carousel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); gap: 16px; } .app-card-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .app-card-summary span { padding: 5px 7px; border: 1px solid var(--app-line); border-radius: 999px; color: var(--app-muted); font: 11px/1 var(--mono); text-transform: uppercase; } .app-button--secondary { border-color: var(--app-line); background: transparent; color: var(--app-ink); } .app-button--secondary:hover { background: rgba(255, 255, 255, 0.05); } .app-warning { padding: 14px; border: 1px solid rgba(233, 196, 106, 0.2); border-radius: 10px; background: rgba(233, 196, 106, 0.055); } .app-warning strong { color: #e9d69a; font: 11px/1 var(--mono); letter-spacing: 0.05em; } .app-warning p { margin: 7px 0 0; color: var(--app-muted); font-size: 12px; line-height: 1.5; } .app-instructions { display: grid; gap: 17px; } .app-instructions dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; } .app-instructions dl div { padding: 12px; border: 1px solid var(--app-line); border-radius: 9px; } .app-instructions dt { color: var(--app-muted); font: 11px/1 var(--mono); text-transform: uppercase; } .app-instructions dd { margin: 7px 0 0; font-size: 12px; } .app-instructions code { overflow-wrap: anywhere; padding: 16px; border: 1px solid rgba(143, 227, 176, 0.17); border-radius: 9px; background: rgba(143, 227, 176, 0.04); color: var(--good); font: 11px/1.6 var(--mono); user-select: all; } .app-warning-list { margin: 0; padding: 14px 14px 14px 28px; border: 1px solid rgba(233, 196, 106, 0.15); border-radius: 9px; color: #b6a878; font-size: 12px; line-height: 1.55; } .app-status-chip[data-state="pending"], .app-status-chip[data-state="active"] { color: var(--amber); } .app-status-chip[data-state="confirmed"], .app-status-chip[data-state="consumed"] { color: var(--good); } .app-status-chip[data-state="expired"], .app-status-chip[data-state="locked"] { color: var(--bad); } .app-boundary-badge { flex: 0 0 auto; padding: 9px 12px; border: 1px solid rgba(233, 196, 106, 0.24); border-radius: 999px; color: #e9d69a; font: 11px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; } .app-wallet-card { display: grid; gap: 12px; margin-top: 18px; } .app-wallet-card > span { color: var(--good); font: 11px/1 var(--mono); text-align: center; text-transform: uppercase; } .app-manual { display: grid; gap: 0; margin: 0 0 18px; padding: 0; list-style: none; } .app-manual li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px solid var(--app-line); } .app-manual li > span { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--app-line); border-radius: 50%; color: var(--app-muted); font: 11px/1 var(--mono); } .app-manual strong { font-size: 12px; font-weight: 530; } .app-manual p { margin: 4px 0 0; color: var(--app-muted); font-size: 12px; line-height: 1.5; } .app-demo-code { display: grid; place-items: center; gap: 10px; margin-bottom: 18px; padding: 22px; border: 1px solid rgba(233, 196, 106, 0.2); border-radius: 12px; background: rgba(233, 196, 106, 0.045); } .app-demo-code span, .app-demo-code small { color: var(--app-muted); font: 11px/1.3 var(--mono); text-transform: uppercase; } .app-demo-code strong { color: #f0dd9d; font: 19px/1 var(--mono); letter-spacing: 0.08em; } .app-result-line { margin: 14px 0 0; color: var(--app-muted); font-size: 12px; } .app-result-line b { color: var(--app-ink); } .app-challenge-list { margin: 0; padding: 0; list-style: none; } .app-challenge-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--app-line); } .app-challenge-list li > div { display: grid; gap: 5px; } .app-challenge-list li > div:last-child { justify-items: end; } .app-challenge-list strong { font-size: 12px; font-weight: 530; } .app-challenge-list span, .app-challenge-list small { color: var(--app-muted); font: 11px/1.3 var(--mono); } .app-challenge-list span[data-state="active"] { color: var(--amber); } .app-challenge-list span[data-state="consumed"] { color: var(--good); } .app-challenge-list span[data-state="expired"], .app-challenge-list span[data-state="locked"] { color: var(--bad); } @keyframes app-spin { to { transform: rotate(360deg); } } @media (max-width: 720px) { .app-balance-panel { align-items: flex-start; flex-direction: column; } .app-balance-panel { min-height: 270px; padding: 28px 24px; } .app-balance-panel strong { font-size: clamp(38px, 12vw, 56px); } .app-balance-meta { width: 100%; } .app-grid, .app-grid--lower { grid-template-columns: 1fr; } .app-intro-panel { align-items: flex-start; flex-direction: column; } } @media (max-width: 480px) { .app-panel { padding: 21px 18px; } .app-card-visual { padding: 18px; } .app-card-bottom { right: 18px; bottom: 17px; left: 18px; } } @media (prefers-reduced-motion: reduce) { .app-loader-mark { animation: none; border-top-color: #9097a2; } .app-button { transition: none; } }