/* Templar Wallet — the page of the wallet alone, rebuilt 2026-09-24 (LendingPage/plan.md, "un dispositivo, sette inquadrature"; second pass the same evening: no frames, a carousel hero, coins, Liquid issuance, Android). The PAGE wears the landing's skin (style.css: grid, hairlines, 4px, mono labels). The DEVICE inside it wears the wallet's own skin (black, crimson, Nunito + IBM Plex Sans, 10–20px): every screen is drawn in HTML/CSS so the camera can move it and its parts can play. */ @font-face { font-family: "Nunito"; src: url("../fonts/Nunito-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Nunito"; src: url("../fonts/Nunito-800.woff2") format("woff2"); font-weight: 800; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; } /* ===================================================================================================== 1 · THE PAGE ===================================================================================================== */ .nav .brand { white-space: nowrap; } /* the open menu reads as on the Lend landing: numbered sections, then the pages (Docs, Templar Lend) in the accent with their arrow */ .nav[data-open="true"] .nav-links > a.nav-page { color: var(--primary); } .nav[data-open="true"] .nav-links > a.nav-page::after { content: " \2192"; } /* ---------- hero: title, the three words, the platforms, the device tilted and floating ---------- */ .wh { padding-top: calc(var(--nav-h) + var(--s8)); padding-bottom: var(--s8); overflow: hidden; } .wh .wrap { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: var(--s8); align-items: center; } .wh h1 { margin: 0 0 var(--s3); } .wh .lede { max-width: 40ch; } .pillars { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: 0 0 var(--s3); } .pillars li { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-strong); } .pillars .way-ic { width: 32px; height: 32px; padding: 7px; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--primary); margin: 0; } .wh-ctas { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin-top: var(--s4); } /* where it runs: the platform marks, one line of mono */ .wh-os-k { margin: var(--s4) 0 10px; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .wh-os { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .wh-os li { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-strong); white-space: nowrap; } .wh-os li svg { width: 16px; height: 16px; flex: 0 0 auto; } .wh-os li em { font-style: normal; font-weight: 500; color: var(--muted); } /* the alpha line sits right above the two buttons (.dl-alpha, drawn with the download below) */ .wh .dl-alpha { margin-top: var(--s4); } .wh .dl-alpha + .wh-ctas { margin-top: 12px; } /* the knight: drawn in crimson, it turns into the logo once (src/components/TemplarKnight.astro, CSS only) */ .wh-stage { position: relative; } .wh-knight { justify-self: center; width: min(100%, 520px); } /* the alpha band under the hero (.alpha-band) and the base .dl-alpha line live in style.css, shared with the landing */ /* ---------- 001 · the tour: seven chapters, one on stage. The rows are its control centre — wide screens: a column beside the stage; phones and tablets: an accordion, the active chapter opens under its own row. ONE DOM: [row, chapter] pairs in .tour-chs, one column in source order (the wide grid is after the chapter's rules). Without JS every row heads its chapter and all of them are shown. ---------- */ .tour-in { position: relative; overflow-anchor: none; } /* a chapter change never scrolls the page */ .js .tour-in.reveal { transform: none; } .tour-chs { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; } .tour-chs > .chapter { margin: var(--s3) 0 var(--s4); } html:not(.js) .tour-chs > .chapter { margin-bottom: var(--s8); } .js .chapter:not(.is-active) { display: none; } .js .chapter.is-active { animation: ch-in .45s ease; } @keyframes ch-in { from { opacity: 0; } to { opacity: 1; } } /* a row: the number in a circle and the title; the open one wears a hairline ring and unfolds its sentence, its links and the chapter's progress */ .tr { border-radius: 8px; box-shadow: 0 0 0 1px transparent; transition: box-shadow .2s ease; } .tr.is-on, html:not(.js) .tr { box-shadow: 0 0 0 1px var(--ink-strong); } .tr-h { display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 16px; border-radius: 8px; text-align: left; font: 600 18px/1.3 var(--display); letter-spacing: -.01em; color: var(--muted); } .tr-n { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font: 500 12px/1 var(--mono); transition: background-color .2s, color .2s; } .tr-t { min-width: 0; transition: color .2s; } .tr-h:hover .tr-t { color: var(--ink-strong); } .tr.is-on .tr-t, html:not(.js) .tr-t { color: var(--ink-strong); } .tr.is-on .tr-n, html:not(.js) .tr-n { background: var(--ink-strong); color: var(--bg); } .tr-more { display: grid; grid-template-rows: 1fr; } .tr-more > div { min-height: 0; overflow: hidden; } .tr-box { padding: 0 16px 16px 60px; } .tr-box p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; } .tr-box .tr-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 10px; } .tr-links a { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--primary); } /* the open row fills as its chapter plays (--cp, set by wallet.js) */ .tr-bar { display: block; position: relative; height: 2px; margin-top: 14px; border-radius: 1px; background: var(--line); overflow: hidden; } .tr-bar::after { content: ""; position: absolute; inset: 0; background: var(--primary); transform: scaleX(var(--cp, 0)); transform-origin: 0 50%; } html:not(.js) .tr-bar { display: none; } /* with JavaScript the closed rows fold and the open one unfolds; the rows arrive one after the other */ .js .tr-more { grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1); } .js .tr.is-on .tr-more { grid-template-rows: 1fr; } .js .tr-more > div { visibility: hidden; transition: visibility 0s .35s; } .js .tr.is-on .tr-more > div { visibility: visible; transition: none; } .js .tr-box { opacity: 0; transition: opacity .2s ease; } .js .tr.is-on .tr-box { opacity: 1; transition: opacity .3s ease .1s; } .js .tr { opacity: 0; translate: 0 8px; transition: opacity .35s ease-out, translate .35s ease-out, box-shadow .2s ease; transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s; } .js .tour-in.is-in .tr { opacity: 1; translate: 0 0; } /* a chapter: the step's title and its sentence on one line, the picture with an arrow either side, the player */ .sc { display: grid; gap: clamp(12px, 2vh, 24px); } .sc-top { display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; } /* every chapter's caption is as tall as two title lines or two caption lines (captions are one short sentence since 2026-09-27): the stage and the player never move */ .chapter .sc-top { min-height: calc(max(2.1 * clamp(22px, 2.1vw, 30px), 2.76 * clamp(16px, 1.3vw, 19px)) + 6px); } .sc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); } .sc-step { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s1) var(--s4); align-items: end; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; } .sc-step.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease .1s, visibility 0s; } html:not(.js) .sc-steps { display: grid; gap: var(--s2); } html:not(.js) .sc-step { grid-area: auto; opacity: 1; visibility: visible; } /* without JavaScript each drawn device shows its first screen instead of an empty frame */ html:not(.js) .dv-panels > .dv-panel:first-child { opacity: 1; visibility: visible; transform: none; } html:not(.js) .stage > .dev { width: calc(var(--dw) * var(--k) * 1px); max-width: 100%; justify-self: center; margin: 0; } html:not(.js) .xr .plate > .dev { width: calc(var(--dw) * var(--k) * 1px); max-width: 100%; margin-inline: auto; } .sc-k { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-size: clamp(22px, 2.1vw, 30px); color: var(--ink-strong); text-wrap: balance; } .sc-k em { font: 700 .5em/1 var(--mono); font-style: normal; letter-spacing: .06em; color: var(--primary); margin-right: .6em; vertical-align: .55em; } /* a step that shows something not shipped yet says so */ .sc-k .soon { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; margin-left: .3em; border: 1px solid var(--warn); border-radius: var(--r); font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--warn); vertical-align: .45em; white-space: nowrap; } .sc-p { text-wrap: pretty; margin: 0; max-width: 56ch; padding-bottom: .2em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.38; color: var(--ink); } .js .sc-p .w { display: inline-block; opacity: 0; translate: 0 6px; } .js .sc-step:not(.is-on) .sc-p .w { opacity: 1; translate: 0 0; } .js .sc-step.is-on .sc-p .w { animation: word-in .35s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.12s + var(--i) * .045s); } @keyframes word-in { to { opacity: 1; translate: 0 0; } } .sc-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: clamp(12px, 2vw, 28px); align-items: center; } @media (min-width: 961px) { .sc-body { grid-template-columns: auto minmax(0, min(100% - 2 * 44px - 2 * clamp(12px, 2vw, 28px), max(600px, (100svh - 372px) * 5 / 3))) auto; justify-content: center; } } html:not(.has-play) .sc-body { grid-template-columns: minmax(0, 1fr); } .sc-body .pl-side { justify-self: center; } .has-play .sc-body .pl-side { display: inline-grid; } .has-play .chapter .player { display: flex; } /* the tour on a wide screen: the rows in the first column, every chapter in the second spanning all of them (the eighth, flexible track takes what the chapter needs beyond the rows, so the rows keep their own height). The section is wider than the page's column so the device keeps its size beside the rows (~770px at 1440×900) */ @media (min-width: 1024px) { .tour > .wrap { max-width: calc(1520px + 2 * var(--gutter)); } .js .tour-chs { grid-template-columns: clamp(260px, 21vw, 340px) minmax(0, 1fr); grid-template-rows: repeat(7, auto) 1fr; column-gap: var(--s4); align-items: start; } .js .tour-chs > .tr { grid-column: 1; } .js .tour-chs > .chapter { grid-column: 2; grid-row: 1 / -1; margin: 0; } } /* up to 1279px the column is too narrow for an arrow either side: the arrows move into the player bar */ @media (min-width: 1024px) and (max-width: 1279px) { .js .tour .sc-body { grid-template-columns: minmax(0, 1fr); } .has-play .tour .sc-body .pl-side { display: none; } .has-play .tour .chapter .pl-in { display: inline-grid; width: 44px; } } /* the stage: no frame — the device sits straight on the page and the camera moves it. Its WIDTH is computed (never left to aspect-ratio + max-height, which shrank it against the left edge of its column): as wide as the column, or as wide as the screen's height allows under the caption, and centred */ .stage { position: relative; overflow: visible; perspective: 2400px; perspective-origin: 50% 45%; aspect-ratio: 1000 / 600; width: min(100%, max(600px, (100svh - 372px) * 5 / 3)); justify-self: center; display: grid; place-items: center; } .stage > .dev { grid-area: 1 / 1; width: 88%; } /* the current step's dash is marked even when the player is paused */ .pl-dot[aria-current]::before { background: var(--ink-strong); } /* ---------- 002 · the comparison (2026-09-27): eight rows, four wallets. Each cell = one mark and a short muted note. The marks are one drawn family: full disc = yes, half disc = partly, empty ring = no (the shape carries the meaning, the colour only helps; the key above the table says it once). Every cell is left-aligned, so each column's marks share one edge and read top to bottom. Templar = a 2px crimson rule on its header, the surface stays plain. On phones wallet.js turns the rows into a strip of eight cards (section 6 below) ---------- */ .cm { margin-top: var(--s6); } .cm-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 var(--s2); font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .cm-key > span { display: inline-flex; align-items: center; gap: 8px; } .cm-m { display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; color: var(--muted); forced-color-adjust: none; } .is-yes .cm-m { color: var(--proof); background: currentColor; } .is-part .cm-m { color: var(--proof); background: linear-gradient(90deg, currentColor 50%, transparent 50%); } .cm-t { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--bg); } /* the page grid stays out of the cells */ .cm-t th, .cm-t td { padding: 18px 16px 18px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .cm-t thead th { padding: 14px 16px 12px 0; font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-strong); vertical-align: bottom; border-bottom: 1px solid var(--line-strong); } .cm-t thead th:first-child { width: 30%; } .cm-t thead th.is-us { color: var(--primary); box-shadow: inset 0 2px 0 var(--primary); } .cm-t thead th.is-us img { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; } .cm-t thead th small { display: block; margin-top: 6px; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; color: var(--muted); } .cm-t thead th small.cm-alpha, .cm-card .cm-alpha { color: var(--warn); } .cm-t tbody th { padding-right: var(--s4); font: 600 17px/1.3 var(--display); letter-spacing: -.01em; color: var(--ink-strong); text-wrap: balance; } .cm-f { display: block; } .cm-q { display: block; margin-top: 4px; font: 400 14px/1.4 var(--display); letter-spacing: 0; color: var(--muted); text-wrap: pretty; } .cm-t td .cm-m { float: left; margin: 2px 10px 0 0; } .cm-n { display: flow-root; font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; } .cm-t tbody tr:last-child > * { border-bottom: 0; } @media (max-width: 1023px) { .cm-t th, .cm-t td { padding-right: 12px; } .cm-t tbody th { padding-right: var(--s2); font-size: 16px; } .cm-n, .cm-q { font-size: 13px; } } .cm-note { margin-top: var(--s3); max-width: 64ch; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; } .cm-src { margin-top: var(--s2); } .cm-links { display: grid; gap: 6px; margin-top: var(--s2); font-size: 14px; } .cm-links a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; } /* ---------- 003 · the download: the system switch, one monitor that changes its skin, the file ---------- */ .os-tabs { display: inline-flex; margin-bottom: var(--s4); border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--bg); overflow: hidden; } html:not(.has-os) .os-tabs { display: none; } .os-tab { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; font: 600 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .15s, background-color .15s; } .os-tab + .os-tab { border-left: 1.5px solid var(--line-strong); } .os-tab svg { width: 18px; height: 18px; flex: 0 0 auto; } .os-tab:hover { color: var(--ink-strong); background: var(--surface); } .os-tab[aria-selected="true"] { color: var(--on-block); background: var(--block); } .os-you { display: none; padding: 3px 6px; border: 1px solid currentColor; border-radius: 3px; font: 600 9px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; } .os-tab.is-mine .os-you, .and.is-mine .and-you { display: inline-block; } .dl-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: center; } .os-panels { display: grid; gap: var(--s6); align-content: center; } .has-os .os-panels { grid-template-areas: "p" "all"; } .has-os .os-panel { grid-area: p; } .has-os .os-all { grid-area: all; } .os-panel.is-off { visibility: hidden; } .os-panel { display: grid; gap: var(--s2); justify-items: start; } .os-panel .h3 { font-stretch: 112%; font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.02em; } .os-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .os-kv > div { padding: 10px 14px; background: var(--bg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .os-kv dt { font: 500 10px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .os-kv dd { margin: 5px 0 0; font: 600 14px/1.3 var(--mono); color: var(--ink-strong); } .os-kv .is-wide { grid-column: 1 / -1; } .os-note { max-width: 46ch; font-size: 14px; line-height: 1.5; color: var(--muted); } .os-note a { color: var(--ink); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; } .os-panel .cta { margin-top: var(--s1); } .cta > svg { position: relative; flex: 0 0 auto; width: 17px; height: 17px; } .os-alt { font: 500 12px/1.6 var(--mono); letter-spacing: .04em; color: var(--muted); } .os-alt a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .os-alt a:hover { color: var(--ink-strong); } .os-all { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; } .os-all a:hover { color: var(--primary); text-decoration: none; } .dl-src { margin-top: var(--s6); font-size: 15px; color: var(--muted); } .os-panel .dl-alpha + .cta { margin-top: 0; } .dl-src-alpha { margin-top: var(--s6); } .dl-src-alpha + .dl-src { margin-top: 8px; } .dl-src a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* the monitor: a flat screen on a stand; inside, the system drawn at 1000×625 and scaled (--k, wallet.js) */ .mon { display: grid; justify-items: center; } .mon-bezel { width: 100%; padding: 10px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface-2); } .mon-scr { --k: .6; position: relative; aspect-ratio: 1000 / 625; overflow: hidden; border-radius: 3px; background: #1B2130; } .mon-neck { width: 15%; height: 28px; border: 1.5px solid var(--line-strong); border-block: 0; background: var(--surface); } .mon-base { width: 36%; height: 10px; border: 1.5px solid var(--line-strong); border-radius: 4px 4px 2px 2px; background: var(--surface-2); } .mon-in { --tb: 28px; position: absolute; left: 0; top: 0; width: 1000px; height: 625px; transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden; background: #1B2130; color: #fff; font: 500 12px/1 system-ui, -apple-system, "Segoe UI", Cantarell, Ubuntu, sans-serif; letter-spacing: 0; transition: background-color .5s; } .mon-in[data-skin="windows"] { --tb: 32px; background: #0B2E5C; } .mon-in[data-skin="linux"] { --tb: 36px; background: #2A0B22; } .mon-in .os-mac, .mon-in .os-lnx, .mon-in .os-w, .mon-in .tb { opacity: 0; transition: opacity .4s; } .mon-in[data-skin="macos"] :is(.os-mac, .tb-mac), .mon-in[data-skin="windows"] :is(.os-w, .tb-win), .mon-in[data-skin="linux"] :is(.os-lnx, .tb-lnx) { opacity: 1; } /* the app window; it moves to where each system puts it */ .os-app { position: absolute; left: 120px; top: 36px; width: 760px; height: calc(var(--tb) + 475px); overflow: hidden; border-radius: 10px; background: #000; outline: 1px solid rgba(255, 255, 255, .14); transition: left .5s cubic-bezier(.4, 0, .2, 1), top .5s cubic-bezier(.4, 0, .2, 1), height .5s, border-radius .5s; } .mon-in[data-skin="windows"] .os-app { top: 34px; border-radius: 8px; } .mon-in[data-skin="linux"] .os-app { left: 150px; top: 52px; border-radius: 12px 12px 0 0; } .os-app picture { position: absolute; left: 0; right: 0; top: var(--tb); transition: top .5s; } .os-app img { display: block; width: 760px; height: 475px; } .tb { position: absolute; left: 0; right: 0; top: 0; height: var(--tb); display: flex; align-items: center; transition: opacity .4s, height .5s; } .tb b { font-weight: 600; font-size: 13px; } .tb-mac { justify-content: center; background: #2B2B2E; color: #D9D9DC; border-bottom: 1px solid #111; } .tb-mac .tl { position: absolute; left: 12px; display: flex; gap: 8px; } .tb-mac .tl i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; } .tb-mac .tl i + i { background: #FEBC2E; } .tb-mac .tl i + i + i { background: #28C840; } .tb-win { gap: 10px; padding-left: 12px; background: #202020; color: #FFFFFF; } .tb-win img { width: 16px; height: 16px; } .tb-win b { font-weight: 400; font-size: 12px; } .tb-win .wc { margin-left: auto; display: flex; height: 100%; } .tb-win .wc i, .tb-lnx .gc i { position: relative; display: block; } .tb-win .wc i { width: 46px; height: 100%; } .tb-lnx { justify-content: center; background: #303030; color: #FFFFFF; } .tb-lnx b { font-weight: 700; } .tb-lnx .gc { position: absolute; right: 10px; display: flex; gap: 10px; } .tb-lnx .gc i { width: 22px; height: 22px; border-radius: 50%; background: #464646; } .wc-min::before, .wc-max::before, .wc-x::before, .wc-x::after { content: ""; position: absolute; left: 50%; top: 50%; } .wc-min::before { width: 10px; height: 1px; margin: 0 0 0 -5px; background: #fff; } .wc-max::before { width: 9px; height: 9px; margin: -5px 0 0 -5px; border: 1px solid #fff; } .wc-x::before, .wc-x::after { width: 12px; height: 1px; margin-left: -6px; background: #fff; rotate: 45deg; } .wc-x::after { rotate: -45deg; } .tb-lnx .wc-min::before { width: 8px; margin-left: -4px; } .tb-lnx .wc-max::before { width: 7px; height: 7px; margin: -4px 0 0 -4px; } .tb-lnx .wc-x::before, .tb-lnx .wc-x::after { width: 9px; margin-left: -4.5px; } /* macOS: menu bar and dock */ .os-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; transition: opacity .4s; } .os-bar.os-mac { height: 24px; gap: 18px; padding: 0 14px; background: rgba(0, 0, 0, .32); font-size: 12.5px; } .os-bar.os-mac svg { width: 13px; height: 13px; } .os-bar .os-r { margin-left: auto; } .os-dock { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; display: flex; gap: 8px; padding: 7px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px; } .os-dock i, .os-dock-l i, .os-task i { position: relative; display: grid; place-items: center; border-radius: 10px; background: #3B4252; } .os-dock i { width: 42px; height: 42px; } .os-dock i:nth-child(2n) { background: #4C566A; } .os-dock i img, .os-dock-l i img, .os-task i img { width: 58%; height: 58%; } .os-dock .is-tw, .os-dock-l .is-tw, .os-task .is-tw { background: #0A0A0B; outline: 1px solid rgba(255, 255, 255, .18); } .os-dock .is-tw::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255, 255, 255, .8); } /* Windows: the taskbar, icons in the middle */ .os-task { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; justify-content: center; align-items: center; gap: 6px; background: rgba(24, 24, 24, .94); border-top: 1px solid rgba(255, 255, 255, .08); } .os-task i, .os-task > span:not(.os-r) { width: 34px; height: 34px; border-radius: 5px; } .os-task > span:not(.os-r) { display: grid; place-items: center; } .os-task i { background: #3A3A3A; } .os-task .os-start svg { width: 20px; height: 20px; color: #4CC2FF; } .os-task .os-find svg { width: 18px; height: 18px; color: #DADADA; } .os-task .is-tw::after { content: ""; position: absolute; bottom: 1px; left: 50%; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: #4CC2FF; } .os-task .os-r { position: absolute; right: 16px; font-size: 11px; color: #EDEDED; } /* Linux: the top bar and the dock on the left */ .os-bar.os-lnx { height: 26px; padding: 0 12px; background: #000; font-size: 12.5px; } .os-bar.os-lnx b { font-weight: 600; } .os-bar.os-lnx .os-c { position: absolute; left: 50%; translate: -50% 0; font-weight: 600; } .os-bar.os-lnx .os-r { display: flex; gap: 8px; } .os-bar.os-lnx .os-r i { width: 10px; height: 10px; border-radius: 50%; background: #CFCFCF; } .os-dock-l { position: absolute; left: 0; top: 26px; bottom: 0; width: 60px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; background: rgba(0, 0, 0, .5); } .os-dock-l i { width: 40px; height: 40px; } .os-dock-l i:nth-child(2n) { background: #4C566A; } .os-dock-l .is-tw::before { content: ""; position: absolute; left: -9px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #E95420; } .os-dock-l .os-grid-ic { width: 22px; height: 22px; margin-top: auto; color: #DDD; } /* Android: one phone with the three real shots (src/components/ui/phone-mockups-1, a React island), the file, the buttons */ .and { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s6); align-items: center; margin-top: var(--s12); padding-top: var(--s8); border-top: 1px solid var(--line); } .and-phones { min-width: 0; } .and-copy { display: grid; gap: var(--s2); justify-items: start; } .and-copy .label { display: inline-flex; align-items: center; gap: 10px; } .and-ic { width: 20px; height: 20px; color: var(--ink-strong); } .and-h { margin: 0; } .and-p { max-width: 44ch; color: var(--ink); } .and .os-kv { max-width: 420px; } .btn .ic { width: 16px; height: 16px; color: inherit; } .and-btns { display: flex; flex-wrap: wrap; gap: var(--s2); } /* a button for what is not there yet (iOS): the size of .btn, muted, no action; the chip like .cta.is-soon em */ .btn.is-soon { border-color: var(--line); color: var(--muted); cursor: default; gap: 10px; } .btn.is-soon:hover { border-color: var(--line); } .btn.is-soon em { font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--warn); border: 1px solid var(--warn); border-radius: var(--r); padding: 4px 6px; } /* ---------- 004 · the repository, big; the four ways into the documentation ---------- */ .gh { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s6); padding: var(--s6); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); } .gh-mark { width: clamp(96px, 11vw, 150px); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); color: var(--ink-strong); } .gh-mark svg { width: 60%; height: 60%; } .gh-main { display: grid; gap: var(--s2); align-content: start; min-width: 0; } .gh-repo { font: 600 13px/1.3 var(--mono); letter-spacing: .04em; color: var(--muted); overflow-wrap: anywhere; } .gh-t { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink-strong); } .gh-p { max-width: 56ch; color: var(--ink); } .gh-clone { display: flex; align-items: stretch; max-width: 640px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); overflow: hidden; } .gh-clone code { flex: 1; min-width: 0; padding: 12px 14px; font: 500 13px/1.4 var(--mono); color: var(--ink-strong); white-space: nowrap; overflow-x: auto; } .gh-clone code::before { content: "$ "; color: var(--muted); } .gh-copy { flex: 0 0 auto; padding: 0 16px; border-left: 1px solid var(--line-strong); font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); transition: color .15s, background-color .15s; } .gh-copy:hover { color: var(--primary); background: var(--surface); } .gh-copy.is-done { color: var(--proof); } .gh-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s1); } .gh-stack { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: var(--s3); border-top: 1px solid var(--line); } .gh-stack li { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); } .gh-stack svg { width: 16px; height: 16px; color: var(--ink-strong); } .gh-docs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; } .doc-link { border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); position: relative; display: grid; align-content: start; gap: 6px; padding: var(--s3) var(--s6) var(--s3) var(--s3); background: var(--bg); color: inherit; transition: background-color .2s; } .doc-link b { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--ink-strong); } .doc-link i { position: absolute; right: var(--s3); top: var(--s3); font-style: normal; font-family: var(--display); font-weight: 700; color: var(--primary); transition: translate .2s cubic-bezier(.2, .7, .2, 1); } .doc-link:hover { background: var(--bg); text-decoration: none; } .doc-link:hover i { translate: 4px 0; } .doc-link:hover b { color: var(--primary); } /* the footer: three columns here (the landing has four) */ @media (min-width: 720px) { .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- reveals without GSAP: a short fade-up, once ---------- */ .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; } .js .reveal.is-in { opacity: 1; transform: none; } /* ===================================================================================================== 2 · THE DEVICE KIT — the wallet as it looks, drawn. Authored at 1000×640 (200px sidebar), scaled by --k; on phones authored at 420×640 without the sidebar. Its own tokens: --w-*. ===================================================================================================== */ .dev { --w-bg: #000000; --w-side: #08080A; --w-panel: #0E0E11; --w-panel-2: #17171B; --w-edge: #2A2A30; --w-ink: #F9FAFB; --w-ink-2: #A3A9B4; --w-muted: #767C86; --w-accent: #C1121F; --w-accent-soft: rgba(193, 18, 31, .16); --w-accent-glow: rgba(193, 18, 31, .45); --w-on-accent: #FFFFFF; --w-btc: #F7931A; --w-btc-soft: rgba(247, 147, 26, .16); --w-liquid: #4DB6AC; --w-liquid-deep: #0E8E8E; --w-liquid-soft: rgba(14, 142, 142, .18); --w-ok: #4ADE80; --w-ok-soft: rgba(74, 222, 128, .16); --w-warn: #FBBF24; --w-warn-soft: rgba(251, 191, 36, .14); --w-sans: "IBM Plex Sans", "Archivo", system-ui, sans-serif; --w-head: "Nunito", "Archivo", system-ui, sans-serif; --w-mono: "JetBrains Mono", ui-monospace, monospace; --k: .6; --dw: 1000; --dh: 640; position: relative; width: 100%; aspect-ratio: 1000 / 640; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4, 0, .2, 1); will-change: transform; } .dev[data-theme="light"] { --w-bg: #F1F3F6; --w-side: #FFFFFF; --w-panel: #FFFFFF; --w-panel-2: #E9ECF1; --w-edge: #D3D8E0; --w-ink: #0E1116; --w-ink-2: #485260; --w-muted: #69737F; --w-accent-soft: rgba(193, 18, 31, .10); --w-accent-glow: rgba(193, 18, 31, .3); --w-warn: #9A6B00; --w-ok: #15803D; --w-btc: #C2410C; --w-liquid: #0E7C86; } .dev-in { position: absolute; left: 0; top: 0; width: 1000px; height: 640px; transform: scale(var(--k)); transform-origin: 0 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--w-edge); border-radius: 14px; background: var(--w-bg); color: var(--w-ink); font: 500 14px/1.4 var(--w-sans); letter-spacing: 0; text-align: left; transition: background-color .5s, color .5s, border-color .5s; } .dev-in * { box-sizing: border-box; } :where(.dev-in) :is(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; } .dev-in ul, .dev-in ol { list-style: none; } .dev-in svg { display: block; } .dev-in .num { font-variant-numeric: tabular-nums; } .dev-in .mono { font-family: var(--w-mono); font-size: 12px; letter-spacing: -.01em; } .dev-in .head { font-family: var(--w-head); font-weight: 800; letter-spacing: -.02em; } .dev.no-side .dev-in { grid-template-columns: minmax(0, 1fr); } /* ---------- the sidebar: the app's shell (shell.dart, 2026-09-27) — the brand and its fold chevron, the wallet with its switch, the groups WALLET · LIQUID · SYSTEM (the page's group wears a crimson tick and rule), Synced at the foot ---------- */ .dv-side { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--w-side); border-right: 1px solid var(--w-edge); transition: background-color .5s; } .dv-brand { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; font: 700 13.5px/1 var(--w-sans); } .dv-brand .cross { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 6px; background: var(--w-accent-soft); } .dv-brand .cross img, .dv-brand .cross svg { width: 100%; height: 100%; } .dv-brand .chev { width: 13px; height: 13px; margin-left: auto; color: var(--w-ink-2); } .dv-wallet { display: flex; align-items: center; gap: 10px; padding: 4px 14px 12px; border-bottom: 1px solid var(--w-edge); } .dv-wallet .key { flex: none; width: 24px; height: 24px; padding: 5px; border: 1px solid var(--w-edge); border-radius: 6px; background: var(--w-panel-2); color: var(--w-accent); } .dv-wallet .key svg { width: 100%; height: 100%; } .dv-wallet b { display: block; font-size: 12px; font-weight: 600; } .dv-wallet div span { display: block; margin-top: 1px; font-size: 9.5px; color: var(--w-ink-2); } .dv-wallet .sw { width: 12px; height: 12px; margin-left: auto; color: var(--w-ink-2); } .dv-nav { padding: 4px 8px; overflow: hidden; } .dv-group { display: flex; align-items: center; gap: 8px; margin: 9px 4px 5px; font: 700 9px/1 var(--w-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--w-muted); } .dv-group::after { content: ""; flex: 1; height: 1px; background: var(--w-edge); } .dv-group.is-on { color: var(--w-ink); } .dv-group.is-on::before { content: ""; width: 2px; height: 9px; background: var(--w-accent); } .dv-group.is-on::after { background: linear-gradient(90deg, var(--w-accent), transparent); opacity: .6; } .dv-item { position: relative; display: flex; align-items: center; gap: 9px; height: 29px; margin-bottom: 5px; padding: 0 10px; border: 1px solid var(--w-edge); border-radius: 8px; background: var(--w-panel); font-size: 12px; font-weight: 600; color: var(--w-ink); transition: background-color .35s, border-color .35s, color .35s; } .dv-item svg { flex: none; width: 13px; height: 13px; color: var(--w-ink-2); transition: color .35s; } .dv-item.is-on { background: var(--w-panel-2); } .dv-item.is-on svg { color: var(--w-accent); } .dv-item.is-on::after { content: ""; position: absolute; right: 10px; width: 12px; height: 2px; border-radius: 1px; background: var(--w-accent); } .dv-status { padding: 10px 12px 12px; border-top: 1px solid var(--w-edge); display: grid; gap: 8px; } .dv-status .sync { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--w-ink-2); } .dv-status .sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--w-ok); box-shadow: 0 0 0 3px var(--w-ok-soft); } .dv-status .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .dv-status .row span { position: relative; height: 26px; border: 1px solid var(--w-edge); border-radius: 8px; display: grid; place-items: center; color: var(--w-ink-2); } .dv-status .row svg { width: 13px; height: 13px; } /* a tap: one ring spreads from the control the scene is about to use (the eye, the sun) */ .dv-status .row span.is-tap::after, .dv-eye.is-tap::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; animation: tap-ring .8s cubic-bezier(.16, 1, .3, 1); pointer-events: none; } @keyframes tap-ring { from { box-shadow: 0 0 0 0 rgba(193, 18, 31, .6); } to { box-shadow: 0 0 0 14px rgba(193, 18, 31, 0); } } /* ---------- the main column ---------- */ .dv-main { position: relative; padding: 22px 26px; overflow: hidden; min-width: 0; } .dv-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .dv-title h2 { font: 800 24px/1.1 var(--w-head); letter-spacing: -.02em; } .dv-title p { margin-top: 3px; font-size: 13px; color: var(--w-ink-2); } .dv-pill { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--w-warn); border-radius: 6px; font: 700 9.5px/1 var(--w-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--w-warn); } .dv-pill.is-liquid { border-color: var(--w-liquid-deep); color: var(--w-liquid); } .dv-pill.is-ok { border-color: var(--w-ok); color: var(--w-ok); } .dv-pill.is-amber { border-color: var(--w-warn); color: var(--w-warn); background: var(--w-warn-soft); } /* cards, wells, buttons — the wallet's grammar: two fills, one crimson control */ .dv-card { border: 1px solid var(--w-edge); border-radius: 12px; background: var(--w-panel); padding: 16px 18px; transition: background-color .5s, border-color .5s, opacity .4s; } .dv-well { border: 1px solid var(--w-edge); border-radius: 9px; background: var(--w-panel-2); padding: 10px 12px; } .dv-eyebrow { font: 700 9.5px/1 var(--w-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--w-muted); } .dv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--w-edge); border-radius: 9px; background: var(--w-panel-2); color: var(--w-ink); font: 600 13px/1 var(--w-sans); white-space: nowrap; transition: transform .15s, filter .15s, opacity .3s, background-color .3s; } .dv-btn svg { width: 14px; height: 14px; } .dv-btn.is-primary { background: var(--w-accent); border-color: var(--w-accent); color: var(--w-on-accent); box-shadow: 0 6px 20px -8px var(--w-accent-glow); } .dv-btn.is-accent { background: var(--w-accent-soft); border-color: var(--w-accent); color: var(--w-accent); } .dv-btn.is-ghost { background: transparent; border-color: var(--w-accent); color: var(--w-accent); } .dv-btn.is-press { animation: dv-press .5s ease; } @keyframes dv-press { 30% { transform: scale(.96); filter: brightness(1.25); } } .dv-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--w-edge); border-radius: 9px; } .dv-seg span { padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--w-ink-2); } .dv-seg span.is-on { background: var(--w-accent-soft); color: var(--w-accent); border: 1px solid var(--w-accent); padding: 5px 9px; } .dv-seg span.is-btc { background: var(--w-btc-soft); color: var(--w-btc); border: 1px solid var(--w-btc); padding: 5px 9px; } .dv-cursor { position: absolute; z-index: 5; width: 18px; height: 18px; color: var(--w-ink); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); pointer-events: none; opacity: 0; transition: left .8s cubic-bezier(.4, 0, .2, 1), top .8s cubic-bezier(.4, 0, .2, 1), opacity .3s; } /* ---------- dashboard (dashboard_screen.dart): the net-worth card on the black page, the two chain cards ---------- */ .dv-net-card .val { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; font: 800 40px/1 var(--w-head); letter-spacing: -.03em; } .dv-net-card .val svg { width: 18px; height: 18px; color: var(--w-ink-2); } .dv-net-card .sub { font-size: 13px; color: var(--w-ink-2); } .dv-net-card .up { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--w-ok); } .dv-net-card .up span { color: var(--w-ink-2); font-weight: 500; } .dv-chart { display: block; width: 100%; height: auto; margin: 10px 0 6px; } .dv-chart .line { fill: none; stroke: var(--w-accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; } .dv-chart .area { fill: url(#dv-fade); opacity: .9; } .dv-chart .axis { stroke: var(--w-edge); stroke-width: 1; } .js .dv-chart .line { stroke-dasharray: 1; stroke-dashoffset: 0; } .js [data-scene="dash"].at-1 .dv-chart .line { stroke-dashoffset: calc(1 - var(--p, 1)); } .js [data-scene="dash"].at-1 .dv-chart .area { opacity: calc(var(--p, 1) * .9); } .dv-ranges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .dv-acts { display: flex; gap: 10px; margin-top: 12px; } .dv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } .dv-asset { display: grid; gap: 6px; } .dv-asset .who { display: flex; align-items: center; gap: 10px; font: 700 16px/1 var(--w-head); } .dv-asset .who i { width: 30px; height: 30px; padding: 7px; border-radius: 8px; display: grid; place-items: center; } .dv-asset .who i svg { width: 100%; height: 100%; } .dv-asset.is-btc .who { color: var(--w-btc); } .dv-asset.is-btc .who i { background: var(--w-btc-soft); } .dv-asset.is-lq .who { color: var(--w-liquid); } .dv-asset.is-lq .who i { background: var(--w-liquid-soft); } .dv-asset .amt { margin-top: 6px; font: 800 22px/1 var(--w-head); letter-spacing: -.02em; } .dv-asset .sub { font-size: 12px; color: var(--w-ink-2); } .js .dv-two .dv-card { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1); } .js .dv-two .dv-card:nth-child(2) { transition-delay: .12s; } .js .dv-two.is-in .dv-card, html:not(.js) .dv-two .dv-card { opacity: 1; transform: none; } /* chapter 1 as the app draws it: the hero card sits on the black page with a hairline, the fingerprint in crimson, Send is the soft crimson button (not the filled one), the chart is the traced 30-day line */ [data-scene="dash"] .dv-title { margin-bottom: 12px; } [data-scene="dash"] .dv-net-card { padding: 14px 18px; background: transparent; } [data-scene="dash"] .dv-net-card .val { margin: 6px 0 4px; font-size: 36px; } .dv-eye { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--w-ink-2); transition: color .3s; } .dv-eye svg { grid-area: 1 / 1; transition: opacity .25s; } .dv-net-card .val .dv-eye svg { width: 17px; height: 17px; color: inherit; } .dv-eye .e-off { opacity: 0; } .dv-net-card .fp { display: flex; align-items: center; gap: 5px; margin-top: 5px; font: 500 11px/1 var(--w-mono); color: var(--w-accent); } .dv-net-card .fp svg { width: 11px; height: 11px; color: var(--w-ink-2); } [data-scene="dash"] .dv-net-card .up { display: flex; align-items: center; gap: 3px; margin-top: 9px; } .dv-net-card .up svg { width: 13px; height: 13px; } [data-scene="dash"] .dv-chart { height: 84px; margin: 6px 0 8px; } [data-scene="dash"] .dv-two { gap: 14px; margin-top: 12px; } /* the privacy mask (privacy.dart): holdings become bullets, the fiat beside a chain's coins goes, the eye turns crimson */ .mk-h { display: none; } .dev.is-masked .mk-v { display: none; } .dev.is-masked .mk-h { display: inline; animation: mk-in .45s cubic-bezier(.16, 1, .3, 1); } @keyframes mk-in { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: none; } } .dev.is-masked .dv-eye { color: var(--w-accent); } .dev.is-masked .dv-eye .e-on { opacity: 0; } .dev.is-masked .dv-eye .e-off { opacity: 1; } /* a chain card: the name, the balance, then under a rule the latest activity (Bitcoin) or the assets held (Liquid) */ .dv-chain { padding: 0; overflow: hidden; background: var(--w-panel-2); } .dv-chain .cn-top { display: grid; gap: 4px; padding: 12px 14px 10px; } .dv-chain .who { display: flex; align-items: center; gap: 10px; font: 700 15px/1 var(--w-head); } .dv-chain .who i { width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: var(--w-bg); display: grid; place-items: center; } .dv-chain .who i svg { width: 100%; height: 100%; } .dv-chain.is-btc .who { color: var(--w-btc); } .dv-chain.is-lq .who { color: var(--w-liquid); } .dv-chain .amt { margin-top: 6px; font: 800 22px/1 var(--w-head); letter-spacing: -.02em; } .dv-chain .sub { font-size: 12px; color: var(--w-ink-2); } .dv-chain .cn-bot { padding: 9px 14px 11px; border-top: 1px solid var(--w-edge); } .dv-chain .cn-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; } .dv-chain .lnk { font-size: 12px; color: var(--w-ink-2); } .dv-tx { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; } .dv-tx > svg { width: 13px; height: 13px; color: var(--w-ok); } .dv-tx div b { display: block; font-size: 12.5px; font-weight: 500; } .dv-tx div span { font-size: 10.5px; color: var(--w-ok); } .dv-tx .amt { margin: 0; font: 600 13px/1 var(--w-sans); letter-spacing: 0; color: var(--w-ok); } .dv-lqchip { display: grid; gap: 6px; width: 62%; padding: 9px 10px; border: 1px solid var(--w-liquid-deep); border-radius: 10px; background: linear-gradient(160deg, rgba(14, 142, 142, .28), rgba(14, 142, 142, .08)); } .dv-lqchip p { display: flex; align-items: center; gap: 8px; } .dv-lqchip i { width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: var(--w-liquid-deep); color: #fff; display: grid; place-items: center; } .dv-lqchip i svg { width: 100%; height: 100%; } .dv-lqchip b { height: 20px; padding: 0 7px; border-radius: 5px; background: #D5EFEC; color: #0B5557; font: 700 10px/20px var(--w-sans); letter-spacing: .06em; } .dv-lqchip > span { font-size: 11.5px; } /* ---------- send (send_screen.dart): the six-step wizard — a stepper of rings joined by rules, one panel per step that pans in, the content in a centred column; the review draws the transaction ---------- */ .dv-send .dv-title { margin-bottom: 12px; } .dv-stepper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 14px; } .dv-stepper li { position: relative; display: grid; justify-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--w-ink-2); transition: color .3s; } .dv-stepper li:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(50% + 21px); right: calc(-50% + 21px); height: 1.5px; background: var(--w-edge); } .dv-stepper i { position: relative; width: 26px; height: 26px; border: 1.5px solid var(--w-edge); border-radius: 50%; background: var(--w-bg); display: grid; place-items: center; color: var(--w-ink-2); transition: background-color .3s, border-color .3s, color .3s; } .dv-stepper i b { font: 700 11px/1 var(--w-sans); transition: opacity .2s; } .dv-stepper i svg { position: absolute; width: 12px; height: 12px; color: var(--w-accent); opacity: 0; transition: opacity .25s; } .dv-panels { position: relative; display: grid; } .dv-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(60px); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1), visibility 0s .5s; } .dv-panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease .1s, transform .5s cubic-bezier(.2, .7, .2, 1) .1s, visibility 0s; } .dv-panel.is-past { transform: translateX(-60px); } .dv-panels > .dv-panel { align-self: start; } .dv-col { display: grid; gap: 8px; align-content: start; width: min(100%, 640px); margin: 0 auto; } /* a big choice (_BigChoiceCard): icon, title with its badge, the line under it, a radio that fills with a check */ .dv-big { display: grid; grid-template-columns: 26px minmax(0, 1fr) 18px; gap: 12px; align-items: center; padding: 9px 14px; border: 1.5px solid var(--w-edge); border-radius: 12px; background: var(--w-panel-2); transition: border-color .3s, background-color .3s; } .dv-big .ic { width: 22px; height: 22px; color: var(--w-ink-2); transition: color .3s; } .dv-big b { display: flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--w-sans); transition: color .3s; } .dv-big div > span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--w-ink-2); } .dv-radio { width: 18px; height: 18px; border: 1.5px solid var(--w-ink-2); border-radius: 50%; display: grid; place-items: center; color: var(--w-accent); transition: border-color .25s; } .dv-radio svg { width: 18px; height: 18px; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .4s cubic-bezier(.16, 1, .3, 1); } .dv-big.is-on:not(.is-off) { border-color: var(--w-accent); background: color-mix(in srgb, var(--w-accent) 15%, var(--w-bg)); } .dv-big.is-on:not(.is-off) b, .dv-big.is-on:not(.is-off) .ic { color: var(--w-accent); } .dv-big.is-on:not(.is-off) .dv-radio { border-color: transparent; } .dv-big.is-on:not(.is-off) .dv-radio svg { opacity: 1; transform: none; } .dv-big-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dv-big-row .dv-big { padding-block: 14px; } /* the coin marks (AssetLogo): bitcoin orange, L-BTC teal */ .dv-logo { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 5px; border-radius: 50%; color: #fff; } .dv-logo svg { width: 100%; height: 100%; } .dv-logo.is-btc { background: #F7931A; } .dv-logo.is-lq { background: #14909C; } /* badges (StatusBadge): warning = pale amber, neutral = the inset grey */ .dv-badge { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 5px; font: 600 10.5px/1 var(--w-sans); font-style: normal; letter-spacing: 0; white-space: nowrap; } .dv-badge.is-warn { background: #FEF3C7; color: #B45309; } .dv-badge.is-frz { background: var(--w-panel-2); color: var(--w-ink-2); } .dv-badge svg { width: 10px; height: 10px; } /* a form card (FormCard): the title and its line over a rule, the body under it */ .dv-form { border: 1px solid var(--w-edge); border-radius: 12px; background: var(--w-panel-2); overflow: hidden; transition: border-color .3s; } .dv-form .fh { padding: 11px 16px 10px; border-bottom: 1px solid var(--w-edge); } .dv-form .fh b { display: block; font: 600 14.5px/1.2 var(--w-sans); } .dv-form .fh span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--w-ink-2); } .dv-form .fb { padding: 12px 16px 14px; } /* step 3: «Your coins» unrolls under the two choices once Manual is picked (its room is kept, so Continue never jumps); the list is the picker's default view */ .dv-pick { opacity: 0; transform: translateY(8px); clip-path: inset(0 0 100% 0 round 12px); transition: clip-path .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1), opacity .3s ease; } .dv-pick.is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 12px); } .dv-pick .fh { padding-block: 9px 8px; } .dv-pick .fb { padding: 8px 16px 10px; } .dv-pick .pk-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 11.5px; color: var(--w-ink-2); } .dv-seg.is-ic span { padding: 4px 8px; } .dv-seg.is-ic span.is-on { padding: 3px 7px; } .dv-seg.is-ic svg { display: block; width: 13px; height: 13px; } .dev { --w-huge: #A78BFA; --w-dust: #8B93A7; } .dev[data-theme="light"] { --w-huge: #8B5CF6; --w-dust: #7A8496; } .dv-rows { border: 1px solid var(--w-edge); border-radius: 10px; background: var(--w-panel); overflow: hidden; } .dv-row { --t: var(--w-huge); display: grid; grid-template-columns: 16px 26px minmax(0, 1fr) 40px 58px 100px 13px; gap: 10px; align-items: center; padding: 6px 12px; transition: background-color .3s; } .dv-row + .dv-row { border-top: 1px solid var(--w-edge); } .dv-row.t-dust { --t: var(--w-dust); } .dv-row .rk { width: 16px; height: 16px; border: 1.5px solid var(--w-muted); border-radius: 50%; display: grid; place-items: center; color: var(--t); transition: border-color .2s; } .dv-row .rk svg { width: 16px; height: 16px; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .4s cubic-bezier(.16, 1, .3, 1); } .dv-row.is-on { background: color-mix(in srgb, var(--t) 11%, var(--w-panel)); } .dv-row.is-on .rk { border-color: transparent; } .dv-row.is-on .rk svg { opacity: 1; transform: none; } .dv-row .tile { width: 26px; height: 26px; border-radius: 8px; background: var(--w-panel-2); display: grid; place-items: center; color: var(--t); } .dv-row .tile svg { width: 14px; height: 14px; } .dv-row .op { display: flex; align-items: center; gap: 7px; min-width: 0; font: 500 11px/1.3 var(--w-mono); white-space: nowrap; } .dv-row .shr { display: grid; justify-items: end; gap: 4px; } .dv-row .shr b { font: 800 12px/1 var(--w-sans); color: var(--t); } .dv-row .amt { font: 700 12.5px/1 var(--w-sans); text-align: right; white-space: nowrap; } .dv-row .inf { width: 13px; height: 13px; color: var(--w-ink-2); } /* the share meter and the tag chip (ShareMeter, TagChip): both in the coin's tier colour */ .meter { position: relative; display: block; width: 100%; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--t) 20%, transparent); overflow: hidden; } .meter::after { content: ""; position: absolute; inset: 0; background: var(--t); transform: scaleX(var(--s, 0)); transform-origin: 0 50%; } .tgc { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--t) 65%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--t) 12%, transparent); color: var(--t); font: 700 8.5px/1 var(--w-sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .dv-strip { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--w-edge); border-radius: 10px; background: var(--w-panel); font-size: 12px; color: var(--w-ink-2); opacity: 0; transform: translateY(8px); transition: opacity .3s ease .15s, transform .6s cubic-bezier(.16, 1, .3, 1) .15s; } .dv-strip.is-in { opacity: 1; transform: none; } .dv-strip svg { width: 15px; height: 15px; } .dv-strip b { margin-left: auto; font-weight: 700; color: var(--w-ink); } /* step 4: the recipient card — the address typed, three shortcuts, the amount field in focus with MAX */ .dv-field { display: grid; gap: 6px; margin-top: 14px; } .dv-field label { font-size: 12px; color: var(--w-ink-2); } .dv-input { display: flex; align-items: center; height: 42px; padding: 0 12px; border: 1px solid var(--w-edge); border-radius: 9px; background: var(--w-panel-2); font-family: var(--w-mono); font-size: 12px; overflow: hidden; white-space: nowrap; } .dv-input .typed { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; } .js [data-scene="send"].at-4 .dv-input .typed { animation: dv-type 1.8s steps(42, end) .3s forwards; } html:not(.js) .dv-input .typed, [data-scene="send"].past-4 .dv-input .typed { width: 42ch; } @keyframes dv-type { to { width: 42ch; } } .dv-input .unit { margin-left: auto; color: var(--w-ink-2); font-family: var(--w-sans); } .dv-input > svg { flex: none; margin-left: auto; padding-left: 8px; box-sizing: content-box; } .dv-input .typed { max-width: calc(100% - 26px); } .dv-rcp .fb { display: grid; gap: 10px; } .dv-rcp .dv-input { background: var(--w-bg); } .dv-rcp .dv-input .typed { max-width: calc(100% - 84px); } .dv-rcp .ics { display: flex; gap: 12px; margin-left: auto; color: var(--w-ink); } .dv-rcp .ics svg { width: 16px; height: 16px; } .dv-input.is-amt { gap: 8px; font: 700 14px/1 var(--w-sans); transition: border-color .3s, box-shadow .3s; } .dv-input.is-amt .v, .dv-input.is-amt .caret { opacity: 0; transition: opacity .2s; } .dv-input.is-amt.is-focus { border-color: var(--w-accent); box-shadow: 0 0 0 1px var(--w-accent); } .dv-input.is-amt.is-focus .v { opacity: 1; } .dv-input.is-amt .caret { width: 1.5px; height: 18px; margin-left: -6px; background: var(--w-accent); } .dv-input.is-amt.is-focus .caret { opacity: 1; animation: caret 1s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } .dv-input .max { margin-left: auto; padding: 4px 7px; border: 1px solid var(--w-edge); border-radius: 6px; font: 700 10.5px/1 var(--w-sans); letter-spacing: .04em; color: var(--w-ink-2); } .dv-input.is-amt .unit { margin-left: 0; font-size: 12px; font-weight: 500; } .dv-add { justify-self: start; height: 34px; padding: 0 14px; background: var(--w-panel-2); } .dv-add svg { width: 13px; height: 13px; } .dv-sum-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--w-ink-2); } .dv-sum-row b { font-weight: 700; color: var(--w-ink); } /* step 5: the fee options (the crimson ring hops across them and settles on Normal), the forecast under the card */ .dv-fees { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .dv-fee { position: relative; display: grid; gap: 3px; padding: 11px 12px; border: 1px solid var(--w-edge); border-radius: 9px; background: var(--w-bg); } .dv-fee b { font: 600 13px/1.2 var(--w-sans); transition: color .3s; } .dv-fee span { font-size: 11.5px; color: var(--w-ink-2); } .dv-fee .rate { font-family: var(--w-mono); font-size: 11px; color: var(--w-ink-2); } .dv-fee.is-on b { color: var(--w-accent); } .dv-ring { position: absolute; z-index: 2; left: 0; top: 0; width: calc(25% - 7.5px); height: 100%; border: 2px solid var(--w-accent); border-radius: 9px; background: var(--w-accent-soft); pointer-events: none; transform: translateX(calc((100% + 10px) * 1)); } .js [data-scene="send"].at-5 .dv-ring { animation: ring-hop 3.4s cubic-bezier(.6, 0, .4, 1) .2s both; } @keyframes ring-hop { 0%, 18% { transform: translateX(0); } 30%, 48% { transform: translateX(calc((100% + 10px) * 1)); } 60%, 78% { transform: translateX(calc((100% + 10px) * 2)); } 90%, 100% { transform: translateX(calc((100% + 10px) * 1)); } } .dv-forecast { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 11.5px; color: var(--w-ink-2); } .dv-forecast span b { display: block; margin-bottom: 2px; font-weight: 500; font-size: 12.5px; color: var(--w-ink); } .dv-forecast > b { font-weight: 700; font-size: 12.5px; color: var(--w-ink); } .dv-nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; } .dv-nav-row .back { font-size: 13px; color: var(--w-ink-2); } .dv-col > .dv-nav-row { margin-top: 6px; } .dv-nav-row .dv-btn svg { width: 14px; height: 14px; } /* step 6, the review: the inputs on the left, the hub, three arrows out to the recipient, the change and the fee */ .dv-review { padding: 10px 14px 12px; background: var(--w-bg); } .rv-chips { display: flex; justify-content: space-between; margin-bottom: 4px; } .rv-chips span { height: 18px; padding: 0 6px; border: 1px solid; border-radius: 4px; font: 700 8.5px/16px var(--w-sans); letter-spacing: .1em; } .rv-chips .is-in { border-color: var(--w-warn); color: var(--w-warn); background: var(--w-warn-soft); } .rv-chips .is-out { border-color: var(--w-accent); color: var(--w-accent); background: var(--w-accent-soft); } .dv-flow { display: block; width: 100%; height: auto; } .dv-flow text { font-family: var(--w-mono); font-size: 10.5px; fill: var(--w-ink-2); } .dv-flow .sans { font-family: var(--w-sans); font-size: 11px; fill: var(--w-ink); } .dv-flow .a-p { fill: var(--w-accent); } .dv-flow .a-s { fill: var(--w-warn); } .dv-flow .lbl { font-family: var(--w-sans); font-weight: 700; font-size: 8px; letter-spacing: .08em; } .dv-flow .amt { font-family: var(--w-sans); font-weight: 700; font-size: 12.5px; fill: var(--w-ink); } .dv-flow .box { stroke-width: 1.5; } .dv-flow .b-in { fill: color-mix(in srgb, var(--w-warn) 9%, var(--w-bg)); stroke: var(--w-warn); } .dv-flow .b-out { fill: color-mix(in srgb, var(--w-accent) 11%, var(--w-bg)); stroke: var(--w-accent); } .dv-flow .b-chg { fill: var(--w-panel-2); stroke: var(--w-ink-2); } .dv-flow .b-fee { fill: color-mix(in srgb, var(--w-warn) 9%, var(--w-bg)); stroke: var(--w-warn); } .dv-flow .lb { fill: var(--w-panel-2); } .dv-flow .lb-in, .dv-flow .lb-fee { fill: var(--w-warn-soft); } .dv-flow .lb-out { fill: var(--w-accent-soft); } .dv-flow .t-in, .dv-flow .t-fee { fill: var(--w-warn); } .dv-flow .t-out { fill: var(--w-accent); } .dv-flow .t-chg { fill: var(--w-ink-2); } .dv-flow .wire, .dv-flow .tip { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .dv-flow .w-in { stroke: var(--w-warn); } .dv-flow .w-out, .dv-flow .tip.t-out { stroke: var(--w-accent); } .dv-flow .w-chg, .dv-flow .tip.t-chg { stroke: var(--w-ink-2); } .dv-flow .w-fee, .dv-flow .tip.t-fee { stroke: var(--w-warn); } .dv-flow .tip { fill: none; } .dv-flow .hub { fill: var(--w-bg); stroke: var(--w-accent); stroke-width: 2; } .dv-flow .hub-ic { fill: none; stroke: var(--w-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .js .dv-flow .wire { stroke-dasharray: 1; stroke-dashoffset: 1; } .js .dv-flow .box, .js .dv-flow .txt, .js .dv-flow .hub, .js .dv-flow .hub-ic, .js .dv-flow .tip { opacity: 0; } .js .at-6 .dv-flow .g-in .box, .js .at-6 .dv-flow .g-in .txt { animation: pop .5s cubic-bezier(.16, 1, .3, 1) .2s forwards; } .js .at-6 .dv-flow .w-in { animation: wire .6s ease .6s forwards; } .js .at-6 .dv-flow .hub, .js .at-6 .dv-flow .hub-ic { animation: pop .4s cubic-bezier(.16, 1, .3, 1) 1.1s forwards; } .js .at-6 .dv-flow .w-out { animation: wire .6s ease 1.4s forwards; } .js .at-6 .dv-flow .g-wo .tip { animation: pop .2s ease 1.95s forwards; } .js .at-6 .dv-flow .g-out .box, .js .at-6 .dv-flow .g-out .txt { animation: pop .5s cubic-bezier(.16, 1, .3, 1) 1.9s forwards; } .js .at-6 .dv-flow .w-chg { animation: wire .6s ease 2.3s forwards; } .js .at-6 .dv-flow .g-wc .tip { animation: pop .2s ease 2.85s forwards; } .js .at-6 .dv-flow .g-chg .box, .js .at-6 .dv-flow .g-chg .txt { animation: pop .5s cubic-bezier(.16, 1, .3, 1) 2.8s forwards; } .js .at-6 .dv-flow .w-fee { animation: wire .6s ease 3.2s forwards; } .js .at-6 .dv-flow .g-wf .tip { animation: pop .2s ease 3.75s forwards; } .js .at-6 .dv-flow .g-fee .box, .js .at-6 .dv-flow .g-fee .txt { animation: pop .5s cubic-bezier(.16, 1, .3, 1) 3.7s forwards; } .js .at-6 .dv-flow-foot { animation: pop .5s cubic-bezier(.16, 1, .3, 1) 4.2s forwards; } .js .dv-flow-foot { opacity: 0; } html:not(.js) .dv-flow .wire { stroke-dasharray: none; } html:not(.js) .dv-flow .box, html:not(.js) .dv-flow .txt, html:not(.js) .dv-flow .hub, html:not(.js) .dv-flow .hub-ic, html:not(.js) .dv-flow .tip, html:not(.js) .dv-flow-foot { opacity: 1; } @keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } @keyframes wire { to { stroke-dashoffset: 0; } } .dv-flow-foot { display: grid; grid-template-columns: 20px repeat(5, minmax(0, 1fr)); gap: 10px; align-items: center; margin-top: 10px; padding: 11px 16px; border: 1px solid var(--w-edge); border-radius: 10px; background: var(--w-panel-2); } .dv-flow-foot .fuel { width: 17px; height: 17px; color: var(--w-warn); } .dv-flow-foot div { font-size: 11px; color: var(--w-ink-2); } .dv-flow-foot b { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--w-ink); } .dv-flow-foot .fee b { color: var(--w-warn); } /* ---------- 4 · multisig (wallet_type_screen.dart, multisig_setup_screen.dart, 2026-09-27): the app's wizard in its centred column, no sidebar. The step header keeps the back arrow's slot even on the first step (StepHeader), then «Step n of N» in crimson, title, subtitle, Cancel, the segmented bar; the actions sit at the foot of the column ---------- */ .dv-wiz { grid-column: 1 / -1; justify-self: center; width: 548px; height: 640px; padding: 24px 0 22px; } .dv-wiz > .dv-panels, .dv-wiz .dv-panel { height: 100%; } .dv-wiz .dv-panel, .lq-flow, .lq-flow .fr { display: flex; flex-direction: column; gap: 12px; } .lq-flow > .lq-frames { flex: 1; min-height: 0; } .wz-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; } .wz-back { width: 17px; height: 17px; margin-top: 23px; color: var(--w-ink); transform: scaleX(-1); } .wz-head .stepof { font: 700 11px/1 var(--w-sans); color: var(--w-accent); } .wz-head h2 { margin-top: 5px; font: 800 23px/1.12 var(--w-head); letter-spacing: -.02em; } .wz-head .wsub { margin-top: 5px; font-size: 13px; line-height: 1.35; color: var(--w-ink-2); } .wz-cancel { margin-top: 21px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--w-accent); } .dv-bar { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 5px; margin-bottom: 4px; } .dv-bar i { height: 3px; border-radius: 2px; background: var(--w-edge); } .dv-bar i.is-on { background: var(--w-accent); } .wz-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: auto; } .wz-nav .dv-btn { height: 34px; padding: 0 20px; border-radius: 7px; font-weight: 700; } .dv-btn.is-line { background: transparent; border-color: #3A3A42; } .dv-btn.is-text { background: transparent; border-color: transparent; color: var(--w-ink-2); } /* the kinds of wallet (SelectableOptionCard): icon, title with its badge, two lines, the radio disc */ .dv-kinds { display: grid; gap: 10px; } .dv-kind { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; gap: 14px; align-items: center; padding: 11px 16px 12px; border: 1.5px solid var(--w-edge); border-radius: 11px; background: var(--w-panel); transition: border-color .35s, background-color .35s; } .dv-kind .ic { width: 19px; height: 19px; color: var(--w-ink-2); transition: color .35s; } .dv-kind b { display: flex; align-items: center; gap: 8px; font: 700 15px/1.2 var(--w-head); } .dv-kind div > span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.42; color: var(--w-ink-2); } .dv-kind .rd, .wz-list .rd { display: grid; place-items: center; width: 17px; height: 17px; border: 1.5px solid var(--w-muted); border-radius: 50%; color: #fff; transition: background-color .3s, border-color .3s; } .dv-kind .rd svg { width: 10px; height: 10px; opacity: 0; transition: opacity .25s; } .dv-kind.is-on:not(.is-un) { border-color: var(--w-accent); background: color-mix(in srgb, var(--w-accent) 40%, var(--w-bg)); } .dv-kind.is-on:not(.is-un) .ic { color: #F0505B; } .dv-kind.is-on:not(.is-un) .rd { background: var(--w-accent); border-color: var(--w-accent); } .dv-kind.is-on:not(.is-un) .rd svg { opacity: 1; } .dv-kind.is-dis { opacity: .42; } .wz-rule { display: block; height: 1px; margin: 8px 0; background: var(--w-edge); } /* the threshold: the name field, the two pickers, «I hold one of these keys here» (_RoleCard), the 2-of-3 banner */ .dv-tf { position: relative; display: grid; align-content: center; gap: 2px; min-height: 46px; padding: 6px 14px; border: 1px solid var(--w-edge); border-radius: 8px; background: var(--w-panel); transition: border-color .25s, box-shadow .25s; } .dv-tf > span { font-size: 10.5px; line-height: 1.2; color: var(--w-ink-2); } .dv-tf > b { display: flex; align-items: center; min-height: 18px; font: 500 14px/1.3 var(--w-sans); white-space: nowrap; overflow: hidden; } .dv-tf > svg { position: absolute; right: 12px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; color: var(--w-ink-2); } .dv-tf .ph { color: var(--w-muted); font-weight: 400; } .dv-tf.is-focus:not(.is-done) { border-color: var(--w-accent); box-shadow: 0 0 0 1px var(--w-accent); } .dv-counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .dv-counter { display: grid; justify-items: center; gap: 12px; padding: 15px 12px 17px; border: 1px solid var(--w-edge); border-radius: 12px; background: var(--w-panel); } .dv-counter > span { font-size: 12px; font-weight: 600; } .dv-counter .n { display: flex; align-items: center; gap: 22px; font: 700 25px/1 var(--w-sans); } .dv-counter .n svg { width: 20px; height: 20px; } .wz-role { display: grid; grid-template-columns: 20px minmax(0, 1fr) 42px; gap: 16px; align-items: center; padding: 13px 18px; border: 1px solid color-mix(in srgb, var(--w-accent) 50%, transparent); border-radius: 12px; background: var(--w-panel); transition: box-shadow .5s ease; } .wz-role .ic { width: 19px; height: 19px; color: var(--w-accent); } .wz-role b { font: 600 15px/1.25 var(--w-sans); } .wz-role div > span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--w-ink-2); } .wz-role.is-hl { box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-accent) 30%, transparent); } /* a switch: off = dark track, grey ring, pale knob (ListSwitch); on = crimson track (the theme's primary) */ .dv-sw { position: relative; display: block; width: 42px; height: 26px; border: 2px solid #6B7079; border-radius: 13px; background: var(--w-panel-2); } .dv-sw::after { content: ""; position: absolute; top: 4px; left: 4px; width: 14px; height: 14px; border-radius: 50%; background: #E5E7EB; } .dv-sw.is-on { border-color: var(--w-accent); background: var(--w-accent); } .dv-sw.is-on::after { top: 2px; left: 18px; width: 18px; height: 18px; background: #fff; } .dv-sw.is-on.is-lq::after { background: var(--w-liquid-deep); } /* SwitchListTile(activeThumbColor: AppColors.liquid) */ .wz-info { display: flex; gap: 11px; align-items: flex-start; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--w-accent) 55%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--w-accent) 13%, var(--w-bg)); font-size: 12.5px; line-height: 1.45; } .wz-info svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: #F87171; } /* importing the keys: the collected ones fold to a row, the open one names its source from a list (ChoiceList) */ .wz-lbl { display: flex; justify-content: space-between; align-items: baseline; font: 700 10px/1 var(--w-sans); letter-spacing: .12em; } .wz-lbl .cnt { font: 500 11.5px/1 var(--w-sans); letter-spacing: 0; color: var(--w-ink-2); } .wz-slot { display: grid; grid-template-columns: 17px 15px auto minmax(0, 1fr) 15px; gap: 10px; align-items: center; height: 40px; padding: 0 14px; border: 1px solid var(--w-edge); border-radius: 10px; background: var(--w-panel); } .wz-slot .sk { width: 17px; height: 17px; color: var(--w-ok); } .wz-slot .st-o { width: 16px; height: 16px; border: 1.5px solid var(--w-muted); border-radius: 50%; } .wz-slot .lb { width: 15px; height: 15px; color: var(--w-ink-2); } .wz-slot b { font: 600 13.5px/1 var(--w-sans); } .wz-slot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--w-ink-2); } .wz-slot .ex { width: 15px; height: 15px; color: var(--w-ink-2); transform: rotate(-90deg); } .wz-card { display: grid; gap: 9px; padding: 12px 16px 14px; border: 1px solid var(--w-edge); border-radius: 12px; background: var(--w-panel); } .wz-kt { font: 600 14px/1 var(--w-sans); } .wz-name { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; } .wz-name .disc { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--w-accent) 70%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--w-accent) 14%, transparent); color: var(--w-accent); } .wz-name .disc svg { width: 16px; height: 16px; } .wz-name .dv-tf { min-height: 40px; } .wz-list { border: 1px solid var(--w-edge); border-radius: 10px; background: var(--w-panel-2); overflow: hidden; } .wz-list p { position: relative; display: grid; grid-template-columns: 15px minmax(0, 1fr) 17px; gap: 12px; align-items: center; height: 30px; padding: 0 14px; font-size: 12.5px; font-weight: 500; color: var(--w-ink-2); transition: background-color .3s, color .3s; } .wz-list p + p::before { content: ""; position: absolute; top: 0; left: 41px; right: 0; height: 1px; background: var(--w-edge); } .wz-list svg { width: 15px; height: 15px; } .wz-list small { font-size: 11px; font-weight: 500; color: var(--w-muted); } .wz-list .rd::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .25s; } .wz-card:not(.k-usb) .r-paste, .wz-card.k-usb .r-usb { background: var(--w-accent-soft); color: var(--w-accent); font-weight: 700; } .wz-card:not(.k-usb) .r-paste .rd, .wz-card.k-usb .r-usb .rd { background: var(--w-accent); border-color: var(--w-accent); } .wz-card:not(.k-usb) .r-paste .rd::after, .wz-card.k-usb .r-usb .rd::after { opacity: 1; } .wz-src { display: grid; } .wz-src > * { grid-area: 1 / 1; transition: opacity .3s ease; } .wz-src .s-paste { min-height: 42px; } .wz-src .s-paste b { font-size: 11.5px; } .wz-src .s-usb, .wz-src .s-got, .wz-card.k-usb .s-paste { opacity: 0; } .wz-card.k-usb:not(.k-got) .s-usb, .wz-card.k-got .s-got { opacity: 1; } .s-usb { width: 100%; height: 42px; font-weight: 700; } .s-usb .spin, .s-usb .lr, .k-read .s-usb .lf, .k-read .s-usb svg { display: none; } .k-read .s-usb .spin { display: block; } .k-read .s-usb .lr { display: inline; } .k-read .s-usb { animation: dv-press .5s ease; } .s-got { display: flex; align-items: center; gap: 10px; height: 42px; font-size: 12.5px; } .s-got svg { flex: none; width: 16px; height: 16px; color: var(--w-ok); } .s-got span { flex: 1; } .s-got b { font: 500 11px/1 var(--w-mono); color: var(--w-ink-2); } .s-got .rf { color: var(--w-ink-2); } /* steps 4-5: the wizard steps back and dims; outside the app, three keys and a lock that needs two of them */ .stage-keys > .dev { transition: transform .9s cubic-bezier(.4, 0, .2, 1), opacity .6s ease, filter .6s ease; } .stage-keys[data-cam="back"] > .dev { opacity: .26; filter: saturate(.4); } .kx { position: absolute; z-index: 4; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); padding: clamp(18px, 2.4vw, 30px) clamp(20px, 3vw, 38px); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .5); opacity: 0; scale: .94; transition: opacity .4s ease, scale .6s cubic-bezier(.16, 1, .3, 1); pointer-events: none; } .kx.is-in { opacity: 1; scale: 1; transition-delay: .25s; } .kx-key { display: grid; place-items: center; width: clamp(46px, 5vw, 66px); aspect-ratio: 1; border: 1.5px solid var(--line-strong); border-radius: var(--r); color: var(--muted); transition: color .35s, border-color .35s, opacity .45s, transform .5s cubic-bezier(.16, 1, .3, 1); } .kx-key svg { width: 54%; height: 54%; } .kx-key.is-on { border-color: var(--ink-strong); color: var(--ink-strong); transform: translateY(-3px); } .kx-key.is-gone { border-style: dashed; opacity: .3; transform: translateY(5px) rotate(-12deg); } .kx-to { width: clamp(18px, 2vw, 26px); height: clamp(18px, 2vw, 26px); color: var(--muted); } .kx-lock { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(5px, .6vw, 8px); width: clamp(62px, 6.8vw, 88px); aspect-ratio: 1; border: 1.5px solid var(--line-strong); border-radius: var(--r); color: var(--ink-strong); transition: color .35s, border-color .35s; } .kx-lock .ic { display: grid; width: clamp(22px, 2.5vw, 32px); height: clamp(22px, 2.5vw, 32px); } .kx-lock .ic svg { grid-area: 1 / 1; width: 100%; height: 100%; transition: opacity .3s; } .kx-lock .open { opacity: 0; } .kx-lock b { font: 600 12px/1 var(--mono); letter-spacing: .06em; font-variant-ligatures: none; font-feature-settings: "frac" 0; color: var(--muted); } .kx-lock.is-open { border-color: var(--proof); color: var(--proof); } .kx-lock.is-open .open { opacity: 1; } .kx-lock.is-open .shut { opacity: 0; } .kx-lock.is-shake { animation: shake .5s ease 2; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* ---------- 5 · Liquid (liquid_screen.dart, issue/reissue/burn_screen.dart, swap_screen.dart, 2026-09-27): the pages as the shell shows them. The Liquid page (the note, Asset Operations, the assets held), the issuance in three steps, reissue and burn as their own pages, LiquiDEX's order book ---------- */ .dv-lq > .dv-panels { height: 100%; } .lq-eye { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--w-ink-2); } .lq-home .dv-title { margin-bottom: 10px; } .lq-note { display: flex; align-items: center; gap: 8px; margin: 0 -8px 10px; padding: 6px 8px; border-radius: 8px; font-size: 12px; color: var(--w-ink-2); transition: background-color .6s ease, color .6s ease; } .lq-note svg { flex: none; width: 14px; height: 14px; color: var(--w-liquid); } .lq-note.is-hl { background: var(--w-liquid-soft); color: var(--w-ink); } .lq-h { margin: 0 0 9px; font: 600 16px/1.2 var(--w-sans); } .lq-ops { display: grid; gap: 9px; margin-bottom: 18px; } .lq-op { display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; gap: 14px; align-items: center; padding: 11px 16px; border: 1px solid var(--w-edge); border-radius: 10px; background: var(--w-panel); transition: background-color .3s, border-color .3s; } .lq-op > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; } .lq-op > i svg { width: 17px; height: 17px; } .lq-op.is-issue > i { background: rgba(14, 142, 142, .16); color: var(--w-liquid); } .lq-op.is-re > i { background: rgba(22, 163, 74, .16); color: #22C55E; } .lq-op.is-burn > i { background: rgba(239, 68, 68, .16); color: #EF4444; } .lq-op b { display: block; font: 600 13px/1.2 var(--w-sans); } .lq-op div > span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--w-muted); } .lq-op .go { width: 14px; height: 14px; color: var(--w-ink-2); transform: scaleX(-1); } .lq-op.is-hover { border-color: #3A3A42; background: var(--w-panel-2); } .lq-op.is-press { animation: dv-press .5s ease; } .lq-assets { display: grid; grid-template-columns: repeat(2, 196px); gap: 10px; align-items: start; } .lq-ast { display: grid; gap: 4px; padding: 11px 13px 12px; border: 1px solid color-mix(in srgb, var(--w-liquid-deep) 75%, transparent); border-radius: 12px; background: linear-gradient(160deg, rgba(14, 142, 142, .32), rgba(14, 142, 142, .1)); } .lq-ast .who { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .lq-ast .dv-logo { width: 24px; height: 24px; padding: 5px; } .lq-ast .who b { height: 22px; padding: 0 7px; border-radius: 5px; background: #D5EFEC; color: #0B5557; font: 700 10.5px/22px var(--w-sans); letter-spacing: .04em; } .lq-ast .nm { font-size: 12.5px; } .lq-ast .dom { margin-top: -3px; font-size: 10.5px; color: var(--w-muted); opacity: .7; } .lq-ast .amt { font: 700 14.5px/1.25 var(--w-sans); } .lq-ast .sub { font-size: 11px; color: var(--w-ink-2); } .js [data-scene="liquid"].at-1 :is(.lq-op, .lq-ast) { animation: note-in .6s cubic-bezier(.16, 1, .3, 1) calc(.25s + var(--i) * .1s) both; } /* the issuance, reissue and burn pages: a centred column (760 / 640 px in the app), banners, form cards, summaries */ .lq-flow { width: 628px; margin: 0 auto; height: 100%; } .lq-flow.is-narrow { width: 560px; } .lq-frames { display: grid; height: 100%; } .lq-frames > .fr { grid-area: 1 / 1; min-height: 0; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1), visibility 0s; } .lq-frames > .fr-b, .lq-frames.is-b > .fr-a { opacity: 0; visibility: hidden; transition: opacity .3s ease, transform .5s cubic-bezier(.2, .7, .2, 1), visibility 0s .5s; } .lq-frames > .fr-b { transform: translateX(50px); } .lq-frames.is-b > .fr-a { transform: translateX(-50px); } .lq-frames.is-b > .fr-b { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease .1s, transform .5s cubic-bezier(.2, .7, .2, 1) .1s, visibility 0s; } .lq-flow .wz-head .stepof { font-size: 11px; } .dv-ban { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 10px 14px; border: 1px solid; border-radius: 9px; font-size: 12px; line-height: 1.45; color: var(--w-ink-2); } .dv-ban svg { width: 16px; height: 16px; margin-top: 1px; } .dv-ban b { display: block; margin-bottom: 2px; font-weight: 700; color: var(--w-ink); } .dv-ban.is-warn { border-color: rgba(251, 191, 36, .42); background: rgba(217, 119, 6, .12); } .dv-ban.is-warn svg { color: #FBBF24; } .dv-ban.is-danger { border-color: rgba(248, 113, 113, .42); background: rgba(239, 68, 68, .11); } .dv-ban.is-danger svg { color: #F87171; } .dv-fc { border: 1px solid var(--w-edge); border-radius: 12px; background: var(--w-panel); } .dv-fc .fc-t { padding: 10px 16px 9px; border-bottom: 1px solid var(--w-edge); font: 600 13.5px/1.2 var(--w-sans); } .dv-fc .fc-t.is-plain { border-bottom: 0; padding-bottom: 2px; } .dv-fc .fc-b { display: grid; gap: 9px; padding: 11px 16px 13px; } .tf-help { margin: -4px 0 0 14px; font-size: 10.5px; color: var(--w-muted); } .dv-tf .typed { display: inline-block; width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; } .js [data-scene="liquid"].at-2 .dv-panel[data-on="2"] .typed, .js [data-scene="liquid"].at-3 .dv-panel[data-on="3"] .typed, .js [data-scene="liquid"].at-4 .dv-panel[data-on="4"] .typed { animation: typew .8s steps(var(--n, 10), end) var(--d, .3s) forwards; } html:not(.js) .dv-tf .typed, [data-scene="liquid"]:is(.past-2, .past-3, .past-4) .dv-tf .typed { width: calc(var(--ch, 10) * 1ch); } @keyframes typew { to { width: calc(var(--ch, 10) * 1ch); } } .dv-tf .p8 { color: var(--w-ink); } .dv-tf.is-focus .p8, html:not(.js) .dv-tf .p8 { display: none; } .lq-tok { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 16px; align-items: center; margin: -2px -8px; padding: 6px 8px; border-radius: 8px; transition: background-color .6s ease; } .lq-tok b { font: 500 14px/1.3 var(--w-sans); } .lq-tok div > span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--w-ink-2); } .lq-tok.is-hl { background: var(--w-panel-2); } .dv-sum .fc-b { gap: 0; padding-block: 6px 10px; } .dv-sum .fc-b > div { display: flex; justify-content: space-between; gap: 16px; padding: 3.5px 0; font-size: 12px; } .dv-sum dt { color: var(--w-ink-2); } .dv-sum dd { margin: 0; font-weight: 600; text-align: right; } .dv-sum dd.mono { font-weight: 500; font-size: 11px; } .lq-ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 4px; } .lq-ph h2 { font: 800 24px/1.1 var(--w-head); letter-spacing: -.02em; } .lq-ph p { margin-top: 4px; font-size: 13px; color: var(--w-ink-2); } .lq-ph .dv-btn { height: 32px; padding: 0 14px; font-size: 12px; } .dv-tf.is-dd { min-height: 40px; } .dv-tf.is-dd b { font-size: 13px; } .dv-btn.is-wide { width: 100%; height: 38px; margin-top: 4px; font-weight: 700; } .dv-btn.is-danger { gap: 8px; border-color: #EF4444; background: #EF4444; color: #fff; opacity: .38; transition: opacity .35s ease; } .dv-btn.is-danger.is-ok { opacity: 1; } .dv-btn.is-danger.is-press { animation: dv-press .5s ease; } .lq-burnall { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; } .lq-link { font-size: 12.5px; font-weight: 600; color: var(--w-accent); } .lq-type { font-size: 13px; } .dv-tf.is-conf { min-height: 40px; } .dv-tf.is-conf.is-focus { border-color: var(--w-liquid-deep); box-shadow: 0 0 0 1px var(--w-liquid-deep); } .dv-tf.is-conf.is-ok { border-color: #EF4444; box-shadow: 0 0 0 1px #EF4444; } .lq-flow.is-narrow .fr { gap: 10px; } /* LiquiDEX: the header's four actions, the tabs, the book (verify tick, receive → pay, price, status, network, Take) */ .lq-dex { display: flex; flex-direction: column; } .lq-dex .lq-ph { align-items: center; margin-bottom: 14px; } .lq-dex .lq-ph > div { min-width: 0; } .lq-dex .lq-ph p { white-space: nowrap; font-size: 12.5px; } .dx-acts { flex: none; display: flex; align-items: center; gap: 6px; } .dx-acts .dv-btn { height: 32px; padding: 0 10px; gap: 6px; font-size: 11.5px; } .dx-acts .dv-btn svg { width: 13px; height: 13px; } .dx-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border: 1px solid #D1D5DB; border-radius: 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .dx-tabs { display: flex; gap: 28px; margin: 0 -26px 14px; padding: 0 26px 0 42px; border-bottom: 1px solid var(--w-edge); font-size: 13px; font-weight: 600; } .dx-tabs span { padding: 0 0 10px; } .dx-tabs .is-on { color: var(--w-accent); box-shadow: inset 0 -2px 0 var(--w-accent); } .dx-book { flex: 1; border: 1px solid var(--w-edge); border-radius: 10px; background: var(--w-panel); overflow: hidden; } .dx-h, .dx-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 128px 64px 130px 48px; gap: 10px; align-items: center; padding: 0 16px; } .dx-h { height: 34px; border-bottom: 1px solid var(--w-edge); font: 700 8.5px/1 var(--w-sans); letter-spacing: .1em; color: var(--w-muted); } .dx-h span:nth-child(3) { text-align: right; } .dx-h span:nth-child(4), .dx-h span:nth-child(5) { text-align: center; } .dx-row { min-height: 50px; border-bottom: 1px solid var(--w-edge); transition: background-color .3s; } .dx-row + .dx-row { background: var(--w-panel-2); } .dx-row.is-hover { background: #1C1C21; } .dx-row .vf { width: 14px; height: 14px; color: #22C55E; } .dx-row .pair { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; white-space: nowrap; } .dx-row .pair .dv-logo { width: 17px; height: 17px; padding: 3.5px; } .dx-row .pair b { font-weight: 700; } .dx-row .pair span { color: var(--w-ink-2); } .dx-row .pair .to { width: 12px; height: 12px; color: var(--w-muted); } .dx-row .px { font-size: 11.5px; font-weight: 700; line-height: 1.35; text-align: right; } .dx-st { justify-self: center; height: 22px; padding: 0 8px; border-radius: 5px; background: #DCFCE7; color: #15803D; font: 600 11px/22px var(--w-sans); } .dx-net { justify-self: center; height: 18px; padding: 0 7px; border: 1px solid; border-radius: 4px; font: 700 8.5px/16px var(--w-sans); letter-spacing: .08em; white-space: nowrap; } .dx-net.is-test { border-color: #16A34A; background: rgba(22, 163, 74, .14); color: #4ADE80; } .dx-net.is-main { border-color: #D97706; background: rgba(217, 119, 6, .14); color: #FBBF24; } .dx-take { position: relative; justify-self: end; padding: 6px 4px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--w-accent); } .dx-take.is-off { color: var(--w-muted); } .dx-take.is-press { animation: dv-press .5s ease; } .dx-take.is-press::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; animation: tap-ring .8s cubic-bezier(.16, 1, .3, 1); pointer-events: none; } .js [data-scene="liquid"].at-5 .dx-row { animation: note-in .6s cubic-bezier(.16, 1, .3, 1) calc(.35s + var(--i) * .14s) both; } /* ---------- coins (utxo_screen.dart): the stats, the banknote wall sized by tier, the selection bar (Tag · Freeze · Clear), the Tag dialog, the consolidate bar. The whole chapter reads one set of classes on .dv-ux, put by its beats: c-h HUGE picked · c-d/c-dc the dialog opens/closes · c-t typing · c-b BIG picked · c-f frozen (the app clears the selection) · c-b2 BIG picked again (the button reads Unfreeze) · c-m consolidate mode · c-mh/c-md HUGE, then DUST picked; c-tp c-fp c-sv c-cp c-rp are the presses. past-2 / past-3 on the scene keep the tag and the freeze ---------- */ .dev { --w-big: #5D9BE8; --w-huge-t: #C0A6F9; --w-big-t: #8FBEF2; --w-dust-t: #B6BEC9; } .dev[data-theme="light"] { --w-big: #3B82D6; --w-huge-t: #6D3FD1; --w-big-t: #1D5FB0; --w-dust-t: #4B5563; } .dv-ux .dv-title { align-items: center; margin-bottom: 12px; } .ux-tools { display: flex; align-items: center; gap: 12px; } .ux-tools > svg { width: 17px; height: 17px; color: var(--w-ink-2); } .dv-seg span.is-btc { background: var(--w-btc-soft); color: var(--w-btc); border: 1px solid var(--w-btc); padding: 5px 9px; } .ux-chain span, .ux-view span { display: inline-flex; align-items: center; gap: 6px; } .ux-chain svg, .ux-view svg { width: 12px; height: 12px; } .ux-stats { display: flex; align-items: flex-end; gap: 22px; margin: 0 -26px; padding: 0 26px 14px; border-bottom: 1px solid var(--w-edge); } .ux-st span { display: block; font-size: 11.5px; color: var(--w-ink-2); } .ux-st b { display: block; margin-top: 3px; font: 600 16px/1 var(--w-sans); } .ux-st i { display: none; font-style: normal; } .ux-st .v0 { display: inline; } :is(.c-h, .c-b:not(.c-f), .c-b2, .c-mh, .c-md) .ux-st .v0 { display: none; } :is(.c-h, .c-b:not(.c-f), .c-b2, .c-mh:not(.c-md)) .ux-st .v1 { display: inline; } .c-md .ux-st .v2, .c-md .ux-st .vm { display: inline; } :is(.c-h, .c-mh:not(.c-md)) .ux-st .vh { display: inline; } :is(.c-b:not(.c-f), .c-b2) .ux-st .vb { display: inline; } .ux-st .fz { display: none; } .c-f .ux-st .fz, [data-scene="coins"].past-3 .ux-st .fz { display: inline; } .ux-cons { margin-left: auto; transition: opacity .3s, filter .3s, box-shadow .3s; } .c-m .ux-cons { opacity: .4; filter: saturate(0); box-shadow: none; } /* the wall: the notes side by side, bottom-aligned, each as wide as its tier */ .dv-ux { display: flex; flex-direction: column; } .ux-wall { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin-block: auto; padding-bottom: 104px; } /* centred in the room the bars leave (the app keeps it at the top) */ .note { --t: var(--w-huge); --tt: var(--w-huge-t); position: relative; display: grid; align-content: start; gap: 6px; padding: 10px 11px; border: 1.5px solid color-mix(in srgb, var(--t) 55%, transparent); border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--t) 18%, var(--w-panel)), color-mix(in srgb, var(--t) 6%, var(--w-panel-2))); box-shadow: 0 4px 8px color-mix(in srgb, var(--t) 12%, transparent); transition: border-color .3s, box-shadow .3s; } .note.n-huge { width: 218px; min-height: 115px; } .note.n-big { --t: var(--w-big); --tt: var(--w-big-t); width: 176px; min-height: 99px; } .note.n-pend { --t: var(--w-muted); --tt: var(--w-ink-2); width: 176px; min-height: 99px; background: var(--w-panel-2); box-shadow: none; } .note.n-dust { --t: var(--w-dust); --tt: var(--w-dust-t); width: 138px; min-height: 74px; padding: 9px 9px; } .n-dust .nt-top { gap: 4px; } .n-dust .dv-logo { width: 14px; height: 14px; padding: 2.5px; } .nt-top { display: flex; align-items: center; gap: 5px; } .note .tier { flex: 1; min-width: 0; font: 700 8.5px/1 var(--w-sans); letter-spacing: .08em; color: var(--tt); white-space: nowrap; } .n-pend .tier { font-size: 10.5px; letter-spacing: .02em; } .note .dv-logo { width: 16px; height: 16px; padding: 3px; } .note .inf { flex: none; width: 13px; height: 13px; color: var(--tt); opacity: .8; } .note .chk { flex: none; display: none; width: 14px; height: 14px; color: var(--t); } .nt-amt { font: 800 18px/1.05 var(--w-head); letter-spacing: -.01em; white-space: nowrap; } .n-huge .nt-amt { font-size: 21px; } .n-dust .nt-amt { font-size: 13.5px; } .n-pend .nt-amt { color: var(--w-ink-2); } .nt-cap { font-size: 10.5px; color: var(--w-ink-2); } .nt-bot { display: flex; align-items: center; gap: 5px; min-width: 0; } .note .ser { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 9.5px/1.2 var(--w-mono); letter-spacing: .03em; color: var(--tt); opacity: .85; } .nt-tags { display: flex; gap: 5px; } .note .dv-badge { height: 16px; padding: 0 5px; font-size: 9.5px; } .spin { flex: none; width: 11px; height: 11px; border: 1.5px solid var(--w-ink-2); border-right-color: transparent; border-radius: 50%; animation: spin 1.2s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* picked: the note's ring thickens in its tier colour and a check lands in its corner (no layout shift) */ :is(.c-h, .c-mh) .n-huge, :is(.c-b:not(.c-f), .c-b2) .n-big, .c-md .n-dust { border-color: var(--t); box-shadow: inset 0 0 0 1px var(--t), 0 4px 16px color-mix(in srgb, var(--t) 32%, transparent); } :is(.c-h, .c-mh) .n-huge .chk, :is(.c-b:not(.c-f), .c-b2) .n-big .chk, .c-md .n-dust .chk { display: block; animation: pop .35s cubic-bezier(.16, 1, .3, 1); } /* the tag lands on HUGE when the dialog closes; the freeze badge on BIG, and both stay for the steps after */ .n-huge .nt-tags, .n-big .is-frz { display: none; } .c-dc .n-huge .nt-tags, [data-scene="coins"].past-2 .n-huge .nt-tags { display: flex; } .c-f .n-big .is-frz, [data-scene="coins"].past-3 .n-big .is-frz { display: inline-flex; } .c-dc .n-huge .nt-tags, .c-f .n-big .is-frz { animation: pop .45s cubic-bezier(.16, 1, .3, 1); } /* step 1: the notes land one after the other, then the Dust badge pings once */ .js [data-scene="coins"].at-1 .note { animation: note-in .6s cubic-bezier(.16, 1, .3, 1) calc(.3s + var(--i) * .14s) both; } @keyframes note-in { from { opacity: 0; transform: translateY(16px) scale(.96); } } .js [data-scene="coins"].at-1 .n-dust .is-warn { animation: badge-ping 1s ease-out 1.9s; } @keyframes badge-ping { from { box-shadow: 0 0 0 0 rgba(251, 191, 36, .75); } to { box-shadow: 0 0 0 9px rgba(251, 191, 36, 0); } } /* the selection bar at the foot: the count, Tag, Freeze (Unfreeze once the picked coin is frozen), Clear */ .ux-bar, .ux-cbar { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--w-edge); background: var(--w-panel); transform: translateY(101%); transition: transform .45s cubic-bezier(.16, 1, .3, 1); } .ux-bar { display: flex; align-items: center; gap: 8px; padding: 12px 26px; } .ux-bar > b { margin-right: 14px; font-size: 13px; font-weight: 600; } .ux-bar .dv-btn, .cb-row .dv-btn, .dlg .dv-btn { height: 32px; padding: 0 12px; font-size: 12px; } .ux-bar .dv-btn svg { width: 13px; height: 13px; } .dv-ux .ghost { padding: 0 10px; font-size: 12.5px; font-weight: 600; color: var(--w-accent); } .ux-bar .ghost { margin-left: auto; } .ux-bar .lu, .c-b2 .ux-bar .lf { display: none; } .c-b2 .ux-bar .lu { display: inline; } :is(.c-h, .c-b:not(.c-f), .c-b2) .ux-bar { transform: none; } .c-tp .b-tag, .c-fp .b-frz, .c-sv .b-save, .c-cp .ux-cons, .c-rp .b-rc { animation: dv-press .5s ease; } /* consolidate mode: the fee chips, the hint that becomes the sum, Cancel, Review & consolidate */ .ux-cbar { display: grid; gap: 10px; padding: 14px 26px 16px; } .c-m .ux-cbar { transform: none; } .cb-fees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .cb-fees p { padding: 7px 9px; border: 1px solid var(--w-edge); border-radius: 7px; } .cb-fees b { display: block; font-size: 12px; font-weight: 700; } .cb-fees span { font-size: 10.5px; color: var(--w-ink-2); } .cb-fees .is-on { padding: 6px 8px; border: 2px solid var(--w-accent); background: var(--w-accent-soft); } .cb-fees .is-on b { color: var(--w-accent); } .cb-row { display: flex; align-items: center; gap: 8px; } .cb-row .hint { flex: 1; font-size: 12px; color: var(--w-ink-2); } .cb-row .hm, .c-md .cb-row .hn { display: none; } .c-md .cb-row .hm { display: inline; } .cb-row .b-rc { opacity: .45; filter: saturate(.2); box-shadow: none; transition: opacity .3s, filter .3s; } .c-md .cb-row .b-rc { opacity: 1; filter: none; } /* the Tag dialog: over a dimmed page, the field typed, Save */ .ux-dlg { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; } .c-d:not(.c-dc) .ux-dlg { opacity: 1; visibility: visible; transition: opacity .3s; } .dlg { width: 340px; padding: 20px 22px 16px; border: 1px solid var(--w-edge); border-radius: 16px; background: var(--w-panel-2); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7); transform: translateY(10px) scale(.97); transition: transform .45s cubic-bezier(.16, 1, .3, 1); } .c-d:not(.c-dc) .dlg { transform: none; } .dlg .dt { margin-bottom: 14px; font: 700 17px/1.2 var(--w-head); } .dlg .df { position: relative; display: flex; align-items: center; height: 38px; padding: 0 2px; border-bottom: 2px solid var(--w-accent); font-size: 13px; } .dlg .df .hint { position: absolute; left: 2px; color: var(--w-muted); transition: opacity .15s; } .c-t .dlg .df .hint { opacity: 0; } .dlg .typed { --ch: 12; display: inline-block; width: 0; overflow: hidden; white-space: nowrap; } .js [data-scene="coins"].at-2 .c-t .dlg .typed { animation: typew 1.3s steps(12, end) forwards; } html:not(.js) .dlg .typed, [data-scene="coins"].past-2 .dlg .typed { width: 12ch; } .dlg .caret { width: 1.5px; height: 16px; margin-left: 1px; background: var(--w-accent); animation: caret 1s steps(1) infinite; } .dlg .da { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 18px; } /* ---------- open: the x-ray, the three plates, the labels ---------- */ .dev.is-xray .dev-in { background: transparent; border-color: var(--w-accent); color: var(--muted); } .dev.is-xray { --w-ink: var(--ink-strong); --w-ink-2: var(--muted); --w-muted: var(--muted); --w-warn: #8A5F00; --w-ok: #15803D; --w-btc: #C2410C; --w-liquid: #0E7C86; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dev.is-xray { --w-warn: #FBBF24; --w-ok: #4ADE80; --w-btc: #F7931A; --w-liquid: #4DB6AC; } } :root[data-theme="dark"] .dev.is-xray { --w-warn: #FBBF24; --w-ok: #4ADE80; --w-btc: #F7931A; --w-liquid: #4DB6AC; } :root:not([data-theme="dark"]) .dev[data-theme="light"] .dev-in { border-color: #B9C0CB; box-shadow: 0 1px 2px rgba(14, 17, 22, .06), 0 18px 40px -18px rgba(14, 17, 22, .28); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dev[data-theme="light"] .dev-in { border-color: var(--w-edge); box-shadow: none; } } .dev.is-xray .dv-net-card .val, .dev.is-xray .dv-asset .amt, .dev.is-xray .dv-title h2 { color: var(--ink); } .dev.is-xray .dv-side, .dev.is-xray .dv-card, .dev.is-xray .dv-item, .dev.is-xray .dv-wallet, .dev.is-xray .dv-btn, .dev.is-xray .dv-seg, .dev.is-xray .dv-status .row span, .dev.is-xray .dv-brand .cross, .dev.is-xray .dv-asset .who i, .dev.is-xray .dv-wallet .key { background: transparent !important; border-color: var(--w-accent) !important; box-shadow: none !important; color: var(--w-ink-2) !important; transition: background-color .6s, border-color .6s, color .6s; } .dev.is-xray .dv-chart .area { opacity: 0; } .dev.is-xray .dv-item.is-on::after { background: var(--w-accent); } .xr { position: relative; } .xr .plate { grid-area: 1 / 1; width: 86%; aspect-ratio: 1000 / 640; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4, 0, .2, 1), opacity .6s; backface-visibility: hidden; position: relative; } .xr .plate .dev { width: 100%; } .xr .p-core, .xr .p-vault { border: 1px solid var(--w-accent, #C1121F); border-radius: 14px; background: var(--surface); padding: 26px 30px; display: grid; align-content: start; gap: 14px; color: var(--ink); } .xr .p-core .board, .xr .p-vault .board { display: grid; gap: 12px; } .xr .pl-h { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink-strong); } .xr .pl-h .way-ic { width: 32px; height: 32px; padding: 7px; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--primary); } .xr .chips { display: flex; flex-wrap: wrap; gap: 8px; } .xr .chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r); font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); } .xr .chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--proof); } .xr .traces { display: block; width: 100%; height: auto; } .xr .traces path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 6; } .xr .traces circle { fill: var(--primary); } .xr .vault { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; } .xr .gear { width: 96px; height: 96px; color: var(--muted); } .xr .gear svg { width: 100%; height: 100%; transform-origin: 50% 50%; } .js .at-3 .xr .gear svg { animation: gear 14s linear infinite; } @keyframes gear { to { transform: rotate(360deg); } } .xr .vault-rows { display: grid; gap: 8px; font-size: 14px; } .xr .vault-rows li { display: flex; align-items: center; gap: 10px; } .xr .vault-rows .ic { width: 16px; height: 16px; color: var(--primary); flex: 0 0 auto; } .xr .vault-rows .lk { transition: color .35s; } /* the labels, flat, on the right; leader lines drawn by wallet.js from each plate's anchor */ .xr-labels { z-index: 5; position: absolute; right: 3%; top: 6%; bottom: 17%; width: 30%; display: grid; align-content: space-evenly; gap: var(--s2); z-index: 3; pointer-events: none; } .xr-label { border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); padding: 12px 14px; opacity: 0; transform: translateX(16px); transition: opacity .5s ease, transform .5s ease, border-color .35s; } .xr-label b { display: block; font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink-strong); } .xr-label span { text-wrap: balance; display: block; margin-top: 2px; font: 500 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .xr-label.is-in { opacity: 1; transform: none; } .xr-label.is-hot { border-color: var(--primary); } .xr-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; } .xr-lines path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; } .xr-lines path.is-hot { stroke: var(--primary); } .xr-lines circle { fill: var(--primary); } .xr .anchor { position: absolute; right: 0; top: 50%; width: 1px; height: 1px; } /* ---------- 7 · sign (2026-09-27, plan C1): the Lend app's signing page on the left, then the wallet's protocol screens as the app draws them (protocol_request_screen.dart at ad1fb01, no sidebar). Cameras, as shares of the stage so the framing holds at any width: focus = the window across the stage, its top 84% (steps 1 and 4); turn = the browser beside the wallet (step 2); cmp = ×2 on the two readings, the site's column first, then a slow pan (.is-pan) to the wallet's, the way a reader compares them (step 3). No tick or badge ties the two columns: the app draws none ---------- */ .stage-sign { perspective-origin: 68% 50%; } .stage-sign > .dev { width: 68%; justify-self: end; margin-right: 3%; } /* the stage crops the zoomed device like a lens, 3% wider than itself (the arrows sit further out) */ .stage-sign { clip-path: inset(0 -3%); } .stage.stage-sign[data-cam="focus"] > .dev { transform: scale(1.62) translate(-11.8%, 8.7%); } .stage.stage-sign[data-cam="cmp"] > .dev { transform: scale(2) translate(2.1%, -10.7%); } .stage.stage-sign[data-cam="cmp"] > .dev.is-pan { transform: scale(2) translate(-21.2%, -10.7%); transition: transform 1.8s cubic-bezier(.45, 0, .2, 1); } /* paused or reduced motion: both readings at once, a notch further away */ .is-still .stage.stage-sign[data-cam="cmp"] > .dev, .is-still .stage.stage-sign[data-cam="cmp"] > .dev.is-pan { transform: scale(1.62) translate(-11.8%, -1.9%); } .stage-sign:not([data-cam="turn"]) .browser { opacity: 0; transform: translateX(-40%); } /* the zoomed device never widens the page: the chapter clips sideways, 24px out so the arrows keep their focus ring */ [data-scene="sign"] .sc-body { overflow-x: clip; margin-inline: -24px; padding-inline: 24px; } .stage-sign .browser { position: absolute; left: 3%; top: 12%; z-index: 2; width: clamp(170px, 27%, 300px); aspect-ratio: 4 / 5; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); overflow: clip; transition: opacity .5s, transform .6s; } .stage-sign .browser .bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); } .stage-sign .browser .bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); } .stage-sign .browser .bar span { flex: 1; min-width: 0; height: 16px; margin-left: 6px; padding-left: 6px; border: 1px solid var(--line); border-radius: 3px; font: 500 8px/14px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stage-sign .browser .pg { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; } .stage-sign .browser .pg > * { min-width: 0; overflow-wrap: anywhere; } .stage-sign .browser .pg .t { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink-strong); } .stage-sign .browser .pg .ln { flex: none; height: 6px; border-radius: 3px; background: var(--line); } .stage-sign .browser .pg .ln.s { width: 70%; margin-bottom: 4px; } .stage-sign .browser .pg .kv { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; } .stage-sign .browser .pg .kv b { color: var(--ink-strong); white-space: nowrap; } .stage-sign .browser .pg .go { flex: none; margin-top: auto; height: 30px; display: grid; place-items: center; border-radius: var(--r); background: var(--primary); color: var(--on-primary); font: 700 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; } .js .at-2 .stage-sign .browser .go { animation: dv-press .5s ease .6s; } .stage-sign .pill { position: absolute; z-index: 4; left: 19%; top: 62%; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border: 1px solid var(--primary); border-radius: var(--r); background: var(--bg); color: var(--primary); font: 600 10px/1 var(--mono); letter-spacing: .06em; opacity: 0; } .stage-sign .pill img { width: 13px; height: 13px; } .js .at-2 .stage-sign .pill { animation: pill-fly 1.6s cubic-bezier(.5, 0, .3, 1) 1s forwards; } @keyframes pill-fly { 0% { opacity: 0; transform: translate(0, 0) scale(.8); } 15% { opacity: 1; transform: translate(0, -10px) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(220%, -70px) scale(.9); } } /* the protocol screens: the page header with its quiet Cancel (GhostButton), the cards, the consent gate */ .rq { padding: 22px 30px; } .rq > .dv-panels, .rq .dv-panel { height: 100%; } .rq-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .rq-head h2 { font: 800 24px/1.1 var(--w-head); letter-spacing: -.02em; } .rq-head p { margin-top: 4px; font-size: 13px; color: var(--w-ink-2); } .rq-x { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; font-size: 13px; font-weight: 600; color: var(--w-ink-2); } .rq-x svg { width: 14px; height: 14px; transform: rotate(45deg); } .rq-card { padding: 16px 20px 16px; border: 1px solid var(--w-edge); border-radius: 12px; background: var(--w-panel); } .rq-card > h3 { margin-bottom: 4px; font: 700 15px/1.25 var(--w-head); } /* Connect wallet: «Shared with …», CopyRow (label 160px, value, copy) and CodeBox (label over an inset well) */ .rq-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) 14px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--w-edge); font-size: 13px; } .rq-row:last-of-type { border-bottom: 0; } .rq-row span { color: var(--w-ink-2); } .rq-row b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rq-row svg, .rq-code svg { flex: none; width: 14px; height: 14px; color: var(--w-muted); } .rq-code { margin-top: 12px; } .rq-code > span { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; color: var(--w-ink-2); } .rq-code > p { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--w-edge); border-radius: 6px; background: var(--w-bg); } .rq-code b { font-weight: 500; } /* the gate (ProtocolConfirmGate): the statement with its box, the full-width button that waits for the tick */ .rq-gate { display: grid; gap: 12px; margin-top: 18px; } .rq-ck { display: flex; align-items: flex-start; gap: 14px; font-size: 13.5px; line-height: 1.4; } .rq-ck .cb { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border: 2px solid var(--w-ink-2); border-radius: 3px; color: #fff; transition: background-color .25s, border-color .25s; } .rq-ck .cb svg { width: 12px; height: 12px; opacity: 0; transition: opacity .2s; } .rq-gate.is-on .cb { background: var(--w-accent); border-color: var(--w-accent); } .rq-gate.is-on .cb svg { opacity: 1; } .rq-gate .dv-btn { width: 100%; height: 40px; font-weight: 700; opacity: .38; box-shadow: none; } .rq-gate.is-on .dv-btn { opacity: 1; box-shadow: 0 6px 20px -8px var(--w-accent-glow); } /* step 2: the connect screen stays until the link lands, then the request slides in */ .dv-panel.rq-conn.is-gone { opacity: 0; visibility: hidden; transform: translateX(-60px); transition: opacity .3s ease, transform .5s cubic-bezier(.2, .7, .2, 1), visibility 0s .5s; } .at-2 .dv-panel.rq-sign:not(.is-open) { opacity: 0; visibility: hidden; transform: translateX(60px); transition: none; } /* Loan origination: the InfoBanner, the two RailPanels (an uppercase head strip with a 3px rail, crimson for the site, teal for the wallet), TagChips, KvRows and the wallet's DataWells, one per input and output */ .dv-ban.is-info { border-color: color-mix(in srgb, var(--w-accent) 45%, transparent); background: color-mix(in srgb, var(--w-accent) 12%, var(--w-bg)); } .dv-ban.is-info svg { color: #F87171; } .rq .dv-ban { font-size: 12.5px; } .rq-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 14px; } .rq-rail { border: 1px solid var(--w-edge); border-radius: 12px; background: var(--w-panel); overflow: hidden; } .rq-rail .rh { padding: 10px 16px 9px 13px; border-left: 3px solid var(--w-accent); border-bottom: 1px solid var(--w-edge); background: var(--w-panel-2); font: 700 10.5px/1.2 var(--w-sans); letter-spacing: .11em; text-transform: uppercase; color: var(--w-ink-2); } .rq-rail.is-lq .rh { border-left-color: var(--w-liquid-deep); } .rq-rail .rb { display: grid; gap: 6px; padding: 12px 16px 12px; } .rq-tag { justify-self: start; display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--w-muted) 70%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--w-muted) 12%, transparent); font: 700 10px/1 var(--w-sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--w-ink-2); white-space: nowrap; } .rq-tag.is-acc { border-color: color-mix(in srgb, var(--w-accent) 65%, transparent); background: color-mix(in srgb, var(--w-accent) 12%, transparent); color: #F0505B; } .rq-tag.is-lq { border-color: color-mix(in srgb, var(--w-liquid) 65%, transparent); background: color-mix(in srgb, var(--w-liquid) 12%, transparent); color: var(--w-liquid); } .rb > .rq-tag { margin-bottom: 3px; } .rq-kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; align-items: baseline; } .rq-rail.is-lq .rq-kv { grid-template-columns: 86px minmax(0, 1fr); } .rq-kv span { font: 700 10px/1.4 var(--w-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--w-ink-2); } .rq-kv b { font: 500 13px/1.4 var(--w-mono); letter-spacing: -.01em; color: var(--w-ink); } .rq-sh { font: 700 13px/1.2 var(--w-sans); } .rq-well { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid var(--w-edge); border-radius: 8px; background: var(--w-bg); } .rq-well b { font: 700 12.5px/1.2 var(--w-mono); letter-spacing: -.01em; white-space: nowrap; } .rq-well + .rq-sh, .rq-well + .rq-kv { margin-top: 6px; } /* step 4: the page scrolls to the gate; the password dialog (showSpendPasswordGate: lock, title, field, Cancel · Sign); then Signature sent */ .rq-scroll { transition: transform .8s cubic-bezier(.4, 0, .2, 1); } .rq-scroll.is-down { transform: translateY(-170px); } .rq-dlg { position: absolute; inset: -22px -30px; z-index: 3; display: grid; place-items: center; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; } .rq-dlg.is-open:not(.is-shut) { opacity: 1; visibility: visible; transition: opacity .3s; } .rq-dlg.is-open:not(.is-shut) .dlg { transform: none; } .rq-dlg .dlg { width: 380px; } .rq-dlg .dt { display: flex; align-items: center; gap: 10px; } .rq-dlg .dt svg { width: 16px; height: 16px; color: var(--w-accent); } .rq-dlg .ghost { padding: 0 10px; font-size: 12.5px; font-weight: 600; color: var(--w-accent); } .js [data-scene="sign"].at-4 .rq-dlg.is-open .typed { animation: typew .6s steps(10, end) .35s forwards; } html:not(.js) .rq-dlg .typed, [data-scene="sign"].is-still .rq-dlg .typed { width: 10ch; } .rq-done { display: grid; gap: 14px; } .rq-done > h3 { margin: 0; } .rq-ok { display: flex; align-items: center; gap: 8px; font: 700 14px/1 var(--w-sans); } .rq-ok svg { width: 20px; height: 20px; color: var(--w-ok); } .rq-acts { display: flex; gap: 10px; } /* ---------- the device against the landing's stylesheet: names both use (.tag, .fee, .st) keep the device's look ---------- */ .dev-in .tag { height: auto; padding: 0; border: 0; border-radius: 0; } .dev-in .fee { display: block; justify-items: normal; gap: 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; } .has-play .dev-in .st { grid-area: auto; opacity: 1; will-change: auto; } /* ---------- state vocabulary shared by the scenes ---------- */ /* a value that changes with a beat: .n0 shows, .n1/.n2 wait for is-one / is-two / is-out / is-sent / is-bad */ .n1, .n2 { display: none; } .is-one .n0, .is-two .n0, .is-two .n1, .is-out .n0, .is-sent .n0, .is-bad .n0 { display: none; } .is-one .n1, .is-out .n1, .is-sent .n1, .is-bad .n1, .is-two .n2 { display: inline; } .is-one.is-two .n1 { display: none; } /* one subtitle per step under the page title */ .dv-title p[data-on] { display: none; } .dv-title p[data-on].is-on { display: block; } /* the send stepper follows the scene's step: the step on screen filled crimson, the ones behind it a crimson ring with a check */ :is(.at-1 .dv-stepper li:nth-child(-n+1), .at-2 .dv-stepper li:nth-child(-n+2), .at-3 .dv-stepper li:nth-child(-n+3), .at-4 .dv-stepper li:nth-child(-n+4), .at-5 .dv-stepper li:nth-child(-n+5), .at-6 .dv-stepper li) { color: var(--w-ink); } :is(.at-1 .dv-stepper li:nth-child(1), .at-2 .dv-stepper li:nth-child(2), .at-3 .dv-stepper li:nth-child(3), .at-4 .dv-stepper li:nth-child(4), .at-5 .dv-stepper li:nth-child(5), .at-6 .dv-stepper li:nth-child(6)) i { background: var(--w-accent); border-color: var(--w-accent); color: var(--w-on-accent); } :is(.at-2 .dv-stepper li:nth-child(-n+1), .at-3 .dv-stepper li:nth-child(-n+2), .at-4 .dv-stepper li:nth-child(-n+3), .at-5 .dv-stepper li:nth-child(-n+4), .at-6 .dv-stepper li:nth-child(-n+5)) i { border-color: var(--w-accent); } :is(.at-2 .dv-stepper li:nth-child(-n+1), .at-3 .dv-stepper li:nth-child(-n+2), .at-4 .dv-stepper li:nth-child(-n+3), .at-5 .dv-stepper li:nth-child(-n+4), .at-6 .dv-stepper li:nth-child(-n+5)) i b { opacity: 0; } :is(.at-2 .dv-stepper li:nth-child(-n+1), .at-3 .dv-stepper li:nth-child(-n+2), .at-4 .dv-stepper li:nth-child(-n+3), .at-5 .dv-stepper li:nth-child(-n+4), .at-6 .dv-stepper li:nth-child(-n+5)) i svg { opacity: 1; } /* ===================================================================================================== 3 · THE CAMERA — per scene, per step. The engine puts at-k / past-k on the scene root and data-cam on the stage. ===================================================================================================== */ .stage[data-cam="tilt"] > .dev { transform: translateX(-1.2%) rotateX(5deg) rotateY(-9deg) scale(.95); } .stage[data-cam="tilt-r"] > .dev { transform: rotateX(4deg) rotateY(9deg) scale(.95); } .stage[data-cam="flat"] > .dev { transform: none; } .stage[data-cam="zoom"] > .dev { transform: scale(1.06) translate(0, -1.5%); } .stage[data-cam="zoom-side"] > .dev { transform: scale(1.25) translate(7%, 4%); } .stage[data-cam="turn"] > .dev { transform: rotateY(-10deg) scale(.97); } .stage[data-cam="back"] > .dev { transform: scale(.82) translateY(0); } /* the exploded view: the three plates tilt together, then separate one at a time */ .stage-open { perspective: 2200px; --xs: .53; --xx: 52deg; --xz: -16deg; --xt: -19%; --xy: -24%; --xd: 150px; } .stage-open:is([data-cam="open"], .xo) .dev.is-xray .dev-in { background: var(--bg); } .stage-open:is([data-cam="open"], .xo) .p-core { background: var(--surface); } .xr .plate.p-core { min-height: 0; display: flex; flex-direction: column; } .xr .p-core .board { display: flex; flex-direction: column; min-height: 0; } .xr .p-core .traces { flex: 0 1 auto; min-height: 0; aspect-ratio: 600 / 140; } @media (min-width: 721px) { .stage-open:is([data-cam="open"], .xo) .p-core { justify-content: flex-end; } .stage-open:is([data-cam="open"], .xo) .p-vault { align-content: end; } } @media (min-width: 961px) and (max-height: 800px) { .stage-open { --xy: -33%; } } .stage-open .plate { transform: translateZ(0); } .stage-open:is([data-cam="open"], .xo) .p-ui { transform: translate(var(--xt), var(--xy)) rotateX(var(--xx)) rotateZ(var(--xz)) scale(var(--xs)) translateZ(0); } .stage-open:is([data-cam="open"], .xo) .p-core { transform: translate(var(--xt), var(--xy)) rotateX(var(--xx)) rotateZ(var(--xz)) scale(var(--xs)) translateZ(calc(-1 * var(--xd))); } .stage-open:is([data-cam="open"], .xo) .p-vault { transform: translate(var(--xt), var(--xy)) rotateX(var(--xx)) rotateZ(var(--xz)) scale(var(--xs)) translateZ(calc(-2 * var(--xd))); } .stage-open[data-cam="flat"]:not(.xo) .p-core, .stage-open[data-cam="flat"]:not(.xo) .p-vault { opacity: 0; } .stage-open .plate.is-dim { opacity: .2; } .xr .p-ui { z-index: 3; } .xr .p-core { z-index: 2; } .xr .p-vault { z-index: 1; } /* ---------- reduced motion: no clocks, no loops; every state is the finished one ---------- */ @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .js .dv-fee .clock::after, .js .xr .gear svg { animation: none; } .js .dv-tf .typed, .js .dv-label .typed { width: calc(var(--ch, 10) * 1ch); animation: none; } .kx, .lq-frames > .fr, .rq-scroll, .rq-dlg, .ux-bar, .ux-cbar, .ux-dlg, .dlg, .note, .dv-pick, .dv-strip { transition: none; } .js .sc-p .w { opacity: 1; translate: 0; animation: none; } .dev, .plate, .dv-panel, .dv-btn, .xr-label, .kx-key, .kx-lock { transition: none; } .js .dv-flow .box, .js .dv-flow .txt, .js .dv-flow .hub, .js .dv-flow .hub-ic, .js .dv-flow .tip, .js .dv-flow-foot { opacity: 1; animation: none; } .js .dv-flow .wire { stroke-dashoffset: 0; animation: none; } .js [data-scene="send"] .dv-input .typed { width: 42ch; animation: none; } .js .dlg .typed { width: 12ch; animation: none; } .spin, .dlg .caret, .dv-input.is-amt.is-focus .caret { animation: none; } .js .dv-ring { animation: none; } .js .dv-two .dv-card { opacity: 1; transform: none; } .js .dv-chart .line { stroke-dashoffset: 0 !important; } .js .dv-chart .area { opacity: .9 !important; } .player [data-play] { display: none; } /* nothing plays by itself: no play button that would claim otherwise */ .js .tr, .js .tour-in.is-in .tr { opacity: 1; translate: 0 0; } .js .tr, .js .tr-more, .js .tr-more > div, .js .tr-box, .js .tr.is-on .tr-box, .tr-n, .tr-t { transition: none; } .js .chapter *, .js .chapter *::before, .js .chapter *::after, .js .wh-stage * { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; } } .js .chapter.is-still *, .js .chapter.is-still *::before, .js .chapter.is-still *::after { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } /* ===================================================================================================== 4 · PHONES AND SHORT SCREENS ===================================================================================================== */ @media (max-width: 1100px) { .wh .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wh-ctas { gap: var(--s2); } } @media (max-width: 960px) { .wh .wrap { grid-template-columns: 1fr; gap: var(--s4); } .sc-body { grid-template-columns: minmax(0, 1fr); } .has-play .sc-body .pl-side { display: none; } .has-play .chapter .pl-in { display: inline-grid; } .stage > .dev { width: 94%; } .stage-sign > .dev { width: 68%; } /* the sign scene keeps its composition: the flat camera zooms it to the centre */ .chapter .sc-top { min-height: calc(2.1 * 22px + 8px + 2 * 1.38 * 16px); } .sc-step { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; } .dl-grid, .and { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } .and-copy { order: -1; } .gh-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .sc-body { grid-template-columns: minmax(0, 1fr); } .has-play .sc-body .pl-side { display: none; } .has-play .pl-in { display: inline-grid; } .stage > .dev { width: 94%; } /* the stage follows the device; each scene's device is as tall as its screen needs (--dh, authored px) */ .stage { aspect-ratio: auto; width: 100%; padding-block: 8px; } /* the device without its sidebar: authored at 420×640, the type a size up, not the desktop scaled down */ .dev { --dw: 420; --dh: var(--sdh, 640); aspect-ratio: 420 / var(--dh); } .dev-in { width: 420px; height: calc(var(--dh) * 1px); grid-template-columns: minmax(0, 1fr); font-size: 15px; align-content: start; } /* each chapter's height (--sdh, authored px, 2026-09-26): the tallest step's content plus the 18px padding, measured with every step in its finished state — the device ends just under its screen, no black band */ [data-scene="dash"] { --sdh: 720; } /* the two asset cards arrive at step 2 and fill it */ [data-scene="send"] { --sdh: 700; } /* the review, the tallest of the six panels; the nav row sits under it */ [data-scene="coins"] { --sdh: 514; } /* four coins and the «Invia da queste» bar of step 4 */ [data-scene="keys"] { --sdh: 664; } /* the four kinds of wallet, step 1 */ [data-scene="liquid"] { --sdh: 490; } /* phones never show the drawn tour (≤767px); kept for a narrow window over 767px */ [data-scene="open"] { --sdh: 566; } /* the x-ray dashboard; the two plates follow (.xr .plate) */ [data-scene="sign"] { --sdh: 812; } /* the protocol screens */ .has-play .chapter .player { position: sticky; bottom: 8px; z-index: 6; } /* the step controls stay in reach */ [data-scene="send"] .dv-main { display: flex; flex-direction: column; } [data-scene="send"] .dv-panels { flex: 1; } [data-scene="send"] .dv-panel { display: flex; flex-direction: column; } [data-scene="send"] .dv-panel .dv-nav-row { margin-top: auto; } .dv-input .typed { font-size: 11.5px; } .wh-ctas > *, .gh-ctas > * { width: 100%; justify-content: center; } .dv-side { display: none; } .dv-main { padding: 18px 16px; } .dv-title h2 { font-size: 22px; } .dv-net-card .val { font-size: 34px; } .dv-two { grid-template-columns: 1fr; gap: 12px; } .dv-fees { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .dv-ring { width: calc(50% - 5px); height: calc(50% - 5px); transform: translateX(calc(100% + 10px)); } @keyframes ring-hop { 0%, 18% { transform: translate(0, 0); } 30%, 48% { transform: translate(calc(100% + 10px), 0); } 60%, 78% { transform: translate(0, calc(100% + 10px)); } 90%, 100% { transform: translate(calc(100% + 10px), 0); } } .stage[data-cam="zoom"] > .dev { transform: none; } /* the sign scene on a phone: the browser above, the wallet under it, never on top of each other */ .stage-sign { aspect-ratio: auto; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; align-items: start; justify-items: stretch; perspective: none; } .stage-sign .browser { position: relative; left: auto; top: auto; grid-row: 1; width: 100%; height: 168px; aspect-ratio: auto; opacity: 1; transform: none; transition: height .5s ease, opacity .4s, border-width .5s; } .stage-sign .browser .pg { padding: 10px 14px; gap: 5px; } .stage-sign .browser .pg .ln { display: none; } .stage-sign .browser .pg .go { margin-top: 4px; } .stage-sign[data-cam="flat"] .browser { opacity: .3; transform: none; } .stage-sign > .dev { grid-area: auto; grid-row: 2; width: 100%; margin: 0; transform: none; } .stage.stage-sign[data-cam="flat"] > .dev, .stage.stage-sign[data-cam="turn"] > .dev { transform: none; } /* the close-ups on a phone: the wallet slides up over the site (its 168px + 12px gap) and comes a little closer (×1.08, still inside the gutters); the rows and the gate a size up, so they read at 12px or more (×0.92 at 390px) */ .stage-sign { clip-path: none; } [data-scene="sign"] .sc-body { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } /* the clip at the screen's edge */ .stage-sign > .dev { transform-origin: 50% 0; } /* 2026-09-26: the browser folds away (height 0, the gap with it) instead of staying as an empty 168px band the wallet slides over: the chapter is ~125px shorter in the close-ups; the stage keeps the 8% the wallet grows */ .stage-sign { transition: padding-bottom .5s ease; } .stage.stage-sign[data-cam="focus"] > .dev { transform: scale(1.08); } .stage-sign[data-cam="focus"] { padding-bottom: calc(8px + 15.5%); } .stage-sign[data-cam="focus"] .browser { opacity: 0; transform: none; height: 0; border-width: 0; margin-bottom: -12px; } .stage-sign .pill { left: 50%; top: 110px; translate: -50% 0; } @keyframes pill-fly { 0% { opacity: 0; transform: translate(0, 0) scale(.8); } 15% { opacity: 1; transform: translate(0, -6px) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 90px) scale(.9); } } .xr .plate { width: 94%; aspect-ratio: 420 / var(--sdh, 640); grid-row: 1; grid-column: 1; } .xr { aspect-ratio: auto; grid-template-rows: auto auto auto; row-gap: 12px; } /* the labels wait under the deck: the three tilted plates reach 116px (at 360) to 130px (at 720) past their row, measured 2026-09-26 with --sdh 566; with the grid's 12px row gap the margin keeps ~14px of air under them at every width */ .xr-labels { position: static; grid-row: 2; grid-column: 1; width: 100%; margin-top: calc(104px + 4%); display: grid; grid-template-columns: 1fr; gap: var(--s1); pointer-events: none; } .xr-label span { font-size: 12px; } .xr-label { transform: none; opacity: .4; } .xr-label.is-in { opacity: 1; } .xr-lines { display: none; } /* the exploded view on a phone: three plates in a vertical deck, no turn in the plane */ .stage-open { --xs: .64; --xx: 48deg; --xz: 0deg; --xt: 0; --xd: 80px; } .stage-open:is([data-cam="open"], .xo) .p-ui { transform: translateY(-29%) rotateX(var(--xx)) scale(var(--xs)) translateZ(0); } .stage-open:is([data-cam="open"], .xo) .p-core { transform: translateY(-3%) rotateX(var(--xx)) scale(var(--xs)) translateZ(calc(-1 * var(--xd))); } .stage-open:is([data-cam="open"], .xo) .p-vault { transform: translateY(28%) rotateX(var(--xx)) scale(var(--xs)) translateZ(calc(-2 * var(--xd))); } .xr .p-core, .xr .p-vault { padding: 18px; } /* the page around the device */ .os-tabs { display: flex; width: 100%; } .os-tab { flex: 1 1 0; justify-content: center; gap: 8px; padding: 0 8px; font-size: 12px; } .os-tab .os-you { display: none !important; } .os-kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .os-kv dt { font-size: 12px; } .os-all { font-size: 12px; } /* Android: the phone first, centred, then the words; the two buttons full width like the hero's */ .and { margin-top: var(--s8); padding-top: var(--s6); gap: var(--s4); } .and-phones { order: -1; justify-self: center; width: 100%; } .and-copy { order: 0; } .and-btns { flex-direction: column; width: 100%; } .and-btns > * { width: 100%; justify-content: center; } /* the repository: the clone line wraps inside its box (nothing hidden past the edge), «Copia» on its own row */ .gh { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s3); } .gh-mark { width: 72px; } .gh-clone { flex-wrap: wrap; max-width: none; } .gh-clone code { flex: 1 1 100%; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; line-height: 1.5; } .gh-copy { flex: 1 1 100%; height: 44px; padding: 0; border-left: 0; border-top: 1px solid var(--line-strong); font-size: 12px; } .gh-stack li { font-size: 12px; } .gh-docs { grid-template-columns: minmax(0, 1fr); } /* the hero: the platform list reads at 12px */ .wh-os-k { font-size: 12px; } } /* phones without wallet.js: the table reads as eight blocks, each wallet on its own line (name, then mark and note) */ @media (max-width: 620px) { .cm-t, .cm-t tbody, .cm-t tbody tr, .cm-t tbody th, .cm-t tbody td { display: block; } .cm-t thead { display: none; } .cm-t tbody tr { padding: var(--s2) 0; border-bottom: 1px solid var(--line); } .cm-t tbody tr:last-child { border-bottom: 0; } .cm-t tbody th { padding: 0 0 6px; border: 0; } .cm-t tbody td { padding: 8px 0 0; border: 0; } .cm-t tbody td::before { content: attr(data-w); display: block; margin-bottom: 4px; font: 600 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-strong); } .cm-t tbody td.is-us::before { color: var(--primary); } } @media (max-width: 520px) { .sc-k { font-size: 22px; } .pillars { gap: 12px; } .pillars li { font-size: 12px; letter-spacing: .08em; } } /* phones and tablets: the knight under the words, never taller than half the screen (600×640 drawing: its width is capped from its height); the toggles and the rows' links get a 44px touch area */ @media (max-width: 960px) { .wh-knight { width: min(100%, 360px, 47svh); } .cm-src > summary { min-height: 44px; } .tr-links a { padding-block: 14px; margin-block: -14px; } } /* the accordion: a tapped row lands 8px under the navbar (wallet.js reads this margin) */ @media (max-width: 1023px) { .tr-h[id] { scroll-margin-top: calc(var(--nav-h) + 16px); } } @media (max-width: 380px) { .pillars { gap: 8px 10px; } .pillars li { gap: 6px; } .pillars .way-ic { width: 28px; height: 28px; padding: 6px; } } /* ===================================================================================================== 5 · PHONES (≤767px) — the reduced version, 2026-09-26: no scroll animations, the long pieces as swipe strips, the desktop-only pieces step aside with one line. Nothing here reaches 768px and up. ===================================================================================================== */ @media (max-width: 767px) { /* the hero: the knight never taller than 40% of the screen, so words, buttons and knight read in ~1.5 screens */ .wh { padding-bottom: var(--s6); } .wh-knight { width: min(100%, 360px, 40svh); } /* the page's rhythm, a notch tighter (the hero keeps its own top padding under the fixed bar) */ .sec:not(.wh) { padding-block: var(--s6); } .sec-head { margin-bottom: var(--s4); } /* ---------- 001 · the tour as a swipe strip: seven cards, a real screenshot each (16:10 in a dark frame; the phone shot of the connector in a 4:5 frame of the same height), number, title, one sentence ---------- */ .mt-card { display: grid; gap: 8px; align-content: start; padding: 10px 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); } .mt-slot { display: flex; justify-content: center; aspect-ratio: 16 / 10; } .mt-shot { width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r); background: #0A0E0D; } .mt-shot.is-phone { flex: 0 0 auto; width: auto; aspect-ratio: 4 / 5; } .mt-shot picture, .mt-shot img { display: block; width: 100%; height: 100%; } .mt-shot img { object-fit: cover; object-position: 50% 0; } .mt-t { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; font: 600 17px/1.3 var(--display); letter-spacing: -.01em; color: var(--ink-strong); text-wrap: balance; } .mt-n { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink-strong); color: var(--bg); font: 500 12px/1 var(--mono); } .mt-p { margin: 0 0 0 40px; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; } .mt-note { margin: var(--s2) 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; } /* ---------- 004 · the four ways into the documentation as a compact list: one row each, the arrow at the end ---------- */ .gh-docs { grid-template-columns: minmax(0, 1fr); } .doc-link { grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: center; gap: 12px; min-height: 56px; padding: 8px 14px; } .doc-link b { grid-column: 1; font-size: 15px; } .doc-link i { position: static; grid-column: 2; grid-row: 1; } /* ---------- the footer: the links two columns wide, the contact row across both, the address never past the edge ---------- */ .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .foot-col:nth-child(3) { grid-column: 1 / -1; } .foot-col ul { gap: 0; margin-top: var(--s1); } .foot-col a, .foot-col .foot-soon { display: flex; min-height: 40px; padding-block: 8px; min-width: 0; overflow-wrap: anywhere; } /* ---------- the two floors: 12px for any text, 44px for anything you tap ---------- */ .btn.is-soon em, .os-you { font-size: 12px; } .mob-tour + .snap-dots { gap: 0; } .mob-tour + .snap-dots button { width: 44px; height: 44px; } /* links inside running text keep their place; the padding only widens what a finger can hit */ .os-note a, .os-alt a, .os-all a, .dl-src a, .cm-note a, .cm-links a, .foot-small a { padding-block: 14px; } .cm-links { gap: 12px; } } /* ---------- 6 · PHONES, second pass: a shorter Download and a Comparison you swipe through ---------- */ @media (max-width: 767px) { /* the drawn monitor is a desktop piece: the system switch, the sheet and the button say it all */ .mon { display: none; } .dl-grid { gap: 0; } /* the comparison: on phones wallet.js rebuilds the table as a strip of eight cards (one per row: the feature, then the four wallets one under the other, mark · name · note) and switches the table off; a flex tbody would not clip its overflow and Chrome for Android widened the whole page to it */ .cm-t.is-off { display: none; } .cm-card { display: flex; flex-direction: column; padding: 20px var(--s2) 4px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); } .cm-card h3 { margin: 0; font: 600 18px/1.25 var(--display); letter-spacing: -.01em; color: var(--ink-strong); text-wrap: balance; } .cm-card .cm-q { margin: 4px 0 0; font-size: 14px; } .cm-card ul { margin: 12px 0 0; padding: 0; list-style: none; } .cm-card li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); } .cm-card .cm-w { display: block; font: 600 12px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-strong); } .cm-card .is-us .cm-w { color: var(--primary); } .cm-card .cm-alpha { margin-left: 8px; font-size: 12px; font-weight: 500; } .cm-card .cm-n { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; } /* eight dots: 8 × 44px is wider than a 360px screen's text column, so the row takes the gutters too (and below 352px each dot's touch area narrows to an eighth of the screen, still 44px tall) */ .cm-strip + .snap-dots { margin-inline: calc(-1 * var(--gutter)); } .cm-strip + .snap-dots button { width: min(44px, 12.5vw); } /* a horizontal overflow must never widen the page: Chrome for Android would shrink everything to fit it */ html { overflow-x: clip; } }