/* Layered on top of vendor/uzh_bcc_ui_kit/css/uzh-bcc-ui.css — this file only adds what the kit doesn't already provide: the four-tile landing grid, the site-wide dark/light theme, and a couple of wrapper-page-specific tweaks. */ /* --------------------------------------------------------------------- Site-wide dark / light theme. The kit's own palette (:root) is the light theme; this only redefines the handful of tokens + surfaces our pages actually use once data-theme="dark" is set on by js/theme.js. The blue/black "frame" header and footer are deliberately left alone in both themes — they're a fixed brand surface, not part of the toggle (see the kit's own comment on .uzh-frame-header). --------------------------------------------------------------------- */ :root[data-theme="dark"] { --uzh-bg: #0c0c0c; --uzh-grey: #c7c7c7; --uzh-mut: #9aa7ad; --uzh-line: rgba(255, 255, 255, 0.14); } :root[data-theme="dark"] body { background: var(--uzh-bg); color: var(--uzh-grey); } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3 { color: #f3ede4; } /* ...but NOT inside a toned band. The band paints its own background from --tc-bg and derives its ink from that tone's luminance, so on a light tone (#a3ddec, #f7931a) the correct text is black in BOTH themes. The blanket rule above has the same specificity as the kit's `.uzh-toned-card__band h1 { color: inherit }` and, loading later, was winning -- so switching to dark mode flipped the ticker line to #f3ede4 while the wallet row in the same band, which is not a heading, stayed dark. That is the whole bug: a heading rule reaching into a surface that is not the page background. Theme decides the page's ink; a toned band's ink comes from its tone. */ :root[data-theme="dark"] .uzh-toned-card__band h1, :root[data-theme="dark"] .uzh-toned-card__band h2, :root[data-theme="dark"] .uzh-toned-card__band h3 { color: inherit; } :root[data-theme="dark"] a { color: #7ea1ff; } :root[data-theme="dark"] .uzh-card { background: #17130f; color: #f3ede4; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] .uzh-card--outline { border-color: var(--uzh-blue-60); } :root[data-theme="dark"] .wrapper-tile { background: #17130f; color: #f3ede4; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] .wrapper-tile__badge { background: #2a2a2a; color: #bbb; } .wrapper-tile__badge--beta { background: #fff3e0; color: #bf6000; } :root[data-theme="dark"] .wrapper-tile__badge--beta { background: #4a3418; color: #ffc845; } :root[data-theme="dark"] .balance-row { border-bottom-color: rgba(255, 255, 255, 0.12); } :root[data-theme="dark"] .balance-row__label { color: #a89a89; } :root[data-theme="dark"] .balance-row__value { color: #f3ede4; } /* Paint the html element itself, not just body — so a page shorter than the viewport, or the gutter beside a centred .uzh-wrap on a wide window, never shows through as the browser's default white regardless of theme. Reads the same --uzh-bg the dark-mode block above redefines, so one rule covers both themes. */ html { background: var(--uzh-bg); min-height: 100%; } /* ------------------------------------------------------------------ */ /* [hidden] must actually hide. */ /* */ /* The browser's own `[hidden] { display: none }` is the weakest rule */ /* there is, so ANY component rule that sets a display -- .uzh-card */ /* (flex), .uzh-calm-btn, .withdraw-status__id (flex) -- silently */ /* beats it, and an element the JS "hid" stays on screen at full */ /* height. That is how #balances-card sat there as a 219px empty card */ /* on every wrapper page while hidden === true, and how the withdrawal */ /* hash / dispute game rows showed an em-dash for values that do not */ /* exist yet. */ /* */ /* One !important rule ends the whole class of bug. Nothing in this */ /* frontend sets style.display, so there is no legitimate way to show */ /* an element that still carries the attribute: JS removes `hidden`. */ /* ------------------------------------------------------------------ */ [hidden] { display: none !important; } /* ------------------------------------------------------------------ */ /* One header box on every page. */ /* */ /* The two header designs stay as they are -- the wrapper pages keep */ /* their coloured kiosk band, the others keep .uzh-frame-header -- but */ /* the BOX they occupy is now identical everywhere, so moving between */ /* pages does not move the fold. Width comes from every page using */ /* .uzh-wrap--wide; height comes from the one value below, which is */ /* the tallest header's natural height (a wrapper band: coins, ticker */ /* line, wallet rows). Shorter headers centre their content in it */ /* rather than shrinking, so the internal content can differ freely */ /* while the frame does not. */ /* ------------------------------------------------------------------ */ :root { --uzh-head-h: 227px; } .uzh-frame-header, .uzh-toned-card__band { min-height: var(--uzh-head-h); box-sizing: border-box; } /* .uzh-frame-header is already a centred flex row. The band is a block with centred text, so it needs to become a column that centres what it holds -- otherwise a short band would pin its content to the top of the taller box. */ .uzh-toned-card__band { display: flex; flex-direction: column; justify-content: center; } /* The kiosk form was drawn for an 860px column; at 1140 its fields would stretch into unusable letterboxes. The band and the page frame are what widen -- the controls keep a readable measure, centred. */ .uzh-toned-card__body > * { /* width:100% matters. The body is a flex column, and `margin-inline: auto` alone cancels the default stretch, leaving each child sized to its own content -- which is why the Wrap/Unwrap (Deposit/Withdraw) toggle came out 151px wide while the fields under it were 704. With an explicit width every block in the card measures the same. */ width: 100%; max-width: 44rem; margin-left: auto; margin-right: auto; } .uzh-theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 100; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--uzh-line); background: #fff; color: var(--uzh-blue); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--uzh-shadow); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .uzh-theme-toggle:hover { filter: brightness(0.95); } .uzh-theme-toggle:focus-visible { outline: 2px solid var(--uzh-blue); outline-offset: 2px; } .uzh-theme-toggle svg { width: 20px; height: 20px; display: none; } .uzh-theme-toggle svg.is-shown { display: block; } :root[data-theme="dark"] .uzh-theme-toggle { background: #17130f; color: #f3ede4; border-color: rgba(255, 255, 255, 0.22); } /* Header variant for the landing page: a large BCC coin mark, but on a plain surface that matches the page instead of a fixed colour block (2026-09-15 -- this used to be permanently solid black regardless of the site's own light/dark toggle). Background and text now track the theme the same way every other heading on the page already does; only the coin mark is left alone (see the comment below it), since it's already a self-contained black-backed, white-lineart badge that reads the same on either surface without any help. */ .uzh-frame-header--dark { background: transparent; border-color: var(--uzh-line); color: var(--uzh-ink); } .uzh-frame-header--dark h1 { color: inherit; } .uzh-frame-header--dark p { color: var(--uzh-mut); } :root[data-theme="dark"] .uzh-frame-header--dark { color: #f3ede4; } .uzh-frame-header__coin--lg { width: 96px; height: 96px; } @media (max-width: 560px) { .uzh-frame-header__coin--lg { width: 72px; height: 72px; } } /* uzh-bcc-coin.svg (the plain, unsuffixed variant — not "-white"/"-blue", which both have an opaque coloured face and don't read as monochrome) is ring + wordmark drawn in white with an unfilled/default-black backing rect, which is exactly a white-on-black mark once it's sitting on this header — no CSS recolouring needed, and none should be added: a brightness/invert filter turns that backing rect's opaque fill into a solid white square, wiping out the artwork. */ .tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin: 1.75rem 0; } @media (max-width: 620px) { .tile-grid { grid-template-columns: 1fr; } } .wrapper-tile { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; background: #fff; border: 2px solid var(--tile-tone, var(--uzh-blue, #0028A5)); border-radius: 12px; padding: 1.75rem 1.5rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); transition: transform 0.15s ease, box-shadow 0.15s ease; } .wrapper-tile:not(.is-disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1); } .wrapper-tile.is-disabled { opacity: 0.6; cursor: default; } .wrapper-tile__coins { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; } .wrapper-tile__coin { width: 84px; height: 84px; } @media (max-width: 480px) { .wrapper-tile__coin { width: 64px; height: 64px; } } .wrapper-tile__arrow { width: 24px; height: 24px; color: var(--tile-tone, var(--uzh-blue, #0028A5)); flex: none; } .wrapper-tile__label { margin: 0; font-size: 0.95rem; font-weight: 700; } /* A large "enter" arrow instead of an "Open wrapper" text link — the tile is already a full-card link, so this is purely the visual affordance that it opens something, not a second piece of copy to read. */ .wrapper-tile__enter { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-top: 0.75rem; border-radius: 50%; border: 2px solid var(--tile-tone, var(--uzh-blue, #0028A5)); color: var(--tile-tone, var(--uzh-blue, #0028A5)); transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease; } .wrapper-tile__enter svg { width: 22px; height: 22px; } .wrapper-tile:not(.is-disabled):hover .wrapper-tile__enter { transform: translateX(3px); background: var(--tile-tone, var(--uzh-blue, #0028A5)); color: #fff; } .wrapper-tile__badge { display: inline-block; margin-top: 0.5rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #888; background: #f0f0f0; padding: 0.2rem 0.55rem; border-radius: 999px; } .uzh-form { display: none; flex-direction: column; gap: 1.1rem; } .uzh-form.is-active { display: flex; } .direction-toggle { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .back-link { display: inline-block; margin-bottom: 1rem; color: var(--uzh-blue, #0028A5); text-decoration: none; font-weight: 600; } .back-link:hover { text-decoration: underline; } #balances-card { border-color: var(--tile-tone, var(--uzh-blue, #0028A5)); } .balance-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.88rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .balance-row:last-child { border-bottom: none; } .balance-row__label { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--uzh-grey); } /* Add-to-wallet, relocated (2026-09-15) from its own full-width button row into the wrapped-balance row itself -- a mild pill right beside the token's own name, same idea as the Connect pill up in the band, just recoloured for this neutral card surface instead of the accent-coloured one. Only the wrapped row gets one; the native coin needs no wallet_watchAsset call, it's already visible in any EVM wallet. */ .balance-row__add-btn { font: inherit; font-weight: 700; font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--uzh-line, rgba(0, 0, 0, 0.15)); background: transparent; color: var(--tile-tone, var(--uzh-blue, #0028A5)); cursor: pointer; transition: border-color 0.2s ease, opacity 0.15s ease; } .balance-row__add-btn:hover:not(:disabled) { border-color: var(--tile-tone, var(--uzh-blue, #0028A5)); } .balance-row__add-btn:focus-visible { outline: 2px solid var(--tile-tone, var(--uzh-blue, #0028A5)); outline-offset: 2px; } .balance-row__add-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Balance-row token mark reuses the kit's .uzh-coin-frame (same circular framing + shine-sweep treatment as the coin-pair up in the wrap/unwrap header) instead of a bare rounded , so a token's icon looks the same wherever it appears on the page. */ .balance-row__coin { width: 28px; height: 28px; flex: none; } .balance-row__value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tile-tone, var(--uzh-blue, #0028A5)); white-space: nowrap; } .pending-note { font-size: 0.85rem; color: var(--uzh-blue, #0028A5); margin-top: 0.5rem; } /* Replaces the old editable recipient-address field: the destination is always the connected wallet's own address, so this is a fixed note, not an input. Sits where the field used to, styled a little quieter than the kit's default .uzh-muted since it's informational, not actionable. */ .uzh-calm-field__note { margin: -0.4rem 0 0; font-size: 0.82rem; } /* Connect button, relocated (2026-09-15) from the button row down in the body up next to the connection status itself, in the band -- it's about the connection state shown right there, not another form action mixed in with Submit/Add-token. A small pill matching the theme-toggle's own translucent-on-accent treatment, since it lives on the coloured band surface, not the neutral body below it. Sibling of #status, not nested inside it: setStatus() replaces #status's innerHTML wholesale on every connect, which would otherwise wipe this button out and detach its listener. */ .uzh-toned-card__connect-btn { font: inherit; font-weight: 700; font-size: 0.78rem; margin-left: 0.5rem; padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.16); color: var(--tc-ink); cursor: pointer; transition: background 0.2s ease, opacity 0.15s ease; } .uzh-toned-card__connect-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.28); } .uzh-toned-card__connect-btn:focus-visible { outline: 2px solid var(--tc-ink); outline-offset: 2px; } .uzh-toned-card__connect-btn:disabled { opacity: 0.5; cursor: not-allowed; background: transparent; } /* Add-token reuses --ghost but the kit never gave that variant a disabled look (only --primary has one) -- needed now that it's disabled until a wallet is connected, same as Submit. */ .uzh-calm-btn--ghost:disabled { opacity: 0.5; cursor: not-allowed; color: var(--tc-neutral-dim); } .uzh-calm-btn--ghost:disabled:hover { border-color: var(--tc-neutral-border); } /* Footer: was a solid-blue block (the kit's default .uzh-frame-footer). Now it's just the page's own background with a single separating line -- .uzh-powered-by already draws that line itself (border-top, reading --tc-neutral-border/--tc-neutral-dim with a plain-page fallback of --uzh-line/--uzh-mut), so the wrapper only needs to feed it colour tokens that make sense off a blue surface and get out of the way layout-wise. Net effect: no colour block, one thin theme-aware line, less vertical space than the old padded block. */ .uzh-frame-footer { --tc-neutral-border: var(--uzh-line); --tc-neutral-dim: var(--uzh-mut); background: transparent; border-radius: 0; padding: 0; margin-top: 1.5rem; } /* bdlt-logo.svg is a solid-white cutout; on a light surface it needs inverting to read as solid black (the kit's own .uzh-powered-by--light modifier already does exactly this via filter:invert(1) -- see uzh-bcc-ui.css). js/theme.js applies it here based on the site-wide toggle, same as it does for .uzh-toned-card__body's is-dark/is-light. */ /* Bridge page (Deposit/Withdraw, eth_optimism leg): the withdraw flow is multi-step and stateful (unlike the single-shot wrap/unwrap form), so it gets its own small status block instead of the plain .uzh-calm-field__note pattern. Re-uses the toned-card body's own --tc-neutral-* tokens so it matches whatever tone the card is set to, same as everything else in the body. */ .withdraw-track { margin-top: 0.25rem; } .withdraw-status { border: 1px solid var(--tc-neutral-border, var(--uzh-line)); border-radius: 12px; padding: 0.85rem 1rem; margin: 0.75rem 0 1rem; } /* Withdraw status box, v3 (2026-09-18). Three fixed blocks, top to bottom: a head carrying the shared round refresh control on the right, a four-column step tracker spanning the full width, and one full-width status rectangle of constant height. Nothing in here changes size as the withdrawal advances -- only tone, LED shape and wording change (see docs/UI_CONVENTIONS.md, conventions 1 and 3). */ .withdraw-status__head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .withdraw-status__title { margin: 0; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--tc-neutral-dim, var(--uzh-mut)); } /* Four equal columns, so the tracker reads as a progress bar across the whole card rather than four pills huddled at the left edge. */ .withdraw-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; margin: 0 0 0.85rem; padding: 0; list-style: none; } .withdraw-step { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 0; font-size: 0.8rem; font-weight: 600; color: var(--tc-neutral-dim, var(--uzh-mut)); padding: 0.42rem 0.5rem; border-radius: 999px; border: 1px solid var(--tc-neutral-border, var(--uzh-line)); background: transparent; } .withdraw-step__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The step LED. Same grammar as the wallet rows: not-yet is a thin dashed ring, the current step is a filled dot with a halo, a passed step is filled flat. Shape carries the state, colour only reinforces it. */ .withdraw-step__dot { width: 13px; height: 13px; border-radius: 50%; border: 1.5px dashed currentColor; background: transparent; opacity: 0.55; flex: none; transition: background 220ms ease, opacity 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .withdraw-step.is-done { color: var(--tc-neutral-ink, var(--uzh-ink)); border-color: transparent; background: rgba(26, 143, 76, 0.12); } .withdraw-step.is-done .withdraw-step__dot { background: #1a8f4c; border-style: solid; border-color: #1a8f4c; opacity: 1; } .withdraw-step.is-current { color: var(--tc-neutral-ink, var(--uzh-ink)); border-color: var(--tc-bg, var(--uzh-blue, #0028A5)); } .withdraw-step.is-current .withdraw-step__dot { background: var(--tc-bg, var(--uzh-blue, #0028A5)); border-style: solid; border-color: var(--tc-bg, var(--uzh-blue, #0028A5)); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-bg, #0028A5) 25%, transparent); } /* The status rectangle. Full width, same corner radius as the box around it, and a reserved height of one headline plus two detail lines -- the longest stage explanations run to two lines, and a box that grows and shrinks would shift every control under it. */ .withdraw-banner { --banner-tone: var(--tc-neutral-dim, #8a7d6d); display: flex; flex-direction: row; align-items: flex-start; gap: 0.7rem; width: 100%; box-sizing: border-box; padding: 0.7rem 0.9rem; margin: 0 0 0.9rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--banner-tone) 38%, transparent); background: color-mix(in srgb, var(--banner-tone) 9%, transparent); min-height: 4.6rem; } .withdraw-banner.is-ready { --banner-tone: #1a8f4c; } .withdraw-banner.is-wait { --banner-tone: var(--tc-bg, var(--uzh-blue, #0028A5)); } .withdraw-banner.is-error { --banner-tone: #c0392b; } .withdraw-banner__led { width: 13px; height: 13px; border-radius: 50%; flex: none; margin-top: 0.28rem; background: var(--banner-tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--banner-tone) 22%, transparent); } .withdraw-banner__text { min-width: 0; flex: 1 1 auto; } .withdraw-banner__headline { font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--tc-neutral-ink, var(--uzh-ink)); } .withdraw-banner__detail { color: var(--tc-neutral-dim, var(--uzh-mut)); font-size: 0.88rem; line-height: 1.35; margin: 0.15rem 0 0; /* Two lines reserved whether or not the stage has an explanation. */ min-height: 2.7em; } .withdraw-status__ids { margin: 0 0 0.9rem; font-size: 0.78rem; } .withdraw-status__id { display: flex; gap: 0.5rem; padding: 0.15rem 0; } .withdraw-status__id dt { color: var(--tc-neutral-dim, var(--uzh-mut)); flex: none; width: 8.5rem; } .withdraw-status__id dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; color: var(--tc-ink); } .withdraw-track__paste { margin-top: 1rem; } /* Health dashboard (health.html) -- added 2026-09-16, ops-only page, not linked from index.html. Reuses .uzh-card/.uzh-chip/.uzh-dot/.uzh-stat-row/ .uzh-stat-grid from the shared kit for everything that fits their shape; the handful of classes below are just this page's own card layout. */ .health-summary { margin-bottom: 1.25rem; } .health-toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.5rem; font-size: 0.85rem; color: var(--uzh-mut); } .health-toolbar label { font-weight: 600; } .health-toolbar input { flex: 1 1 260px; min-width: 200px; font-family: var(--uzh-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 0.82rem; padding: 0.35rem 0.55rem; border: 1px solid var(--uzh-line); border-radius: 6px; background: var(--uzh-bg, #fff); color: var(--uzh-ink); } /* The refresh status line -- one rule for balance.html and health.html so the two panels cannot drift apart in size, colour or alignment. Fixed min-width and nowrap keep the round button from shifting sideways as "updating…" becomes a timestamp. The wording itself lives in js/theme.js (UzhRefresh). */ .uzh-refresh-note, .health-toolbar__note, .balance-bar__note { font-size: 0.78rem; color: var(--uzh-mut); flex: 0 0 auto; min-width: 14rem; text-align: right; white-space: nowrap; } .health-section-title { font-size: 1.05rem; margin: 0 0 0.75rem; } .health-subsection-title { font-size: 0.92rem; color: var(--uzh-mut); margin: 1rem 0 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; } .health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem; margin-bottom: 1.75rem; } .health-card { padding: 1rem 1.1rem; border: 2px solid var(--tile-tone, var(--uzh-line)); } .health-card--wide { grid-column: 1 / -1; } .health-card__head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.6rem; } .health-card__coin { width: 40px; height: 40px; flex: none; } .health-card__title { font-weight: 700; font-size: 0.95rem; } .health-card__subtitle { font-size: 0.78rem; color: var(--uzh-mut); } .health-card__chip-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; flex-wrap: wrap; } .health-card__latency { font-size: 0.75rem; color: var(--uzh-mut); font-family: var(--uzh-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); } .health-card__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 0.6rem; } .health-card__stat b { display: block; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--uzh-ink); } .health-card__stat span { font-size: 0.68rem; color: var(--uzh-mut); text-transform: uppercase; letter-spacing: 0.04em; } .health-card__error { margin-top: 0.6rem; font-size: 0.78rem; color: var(--uzh-berry); overflow-wrap: anywhere; } :root[data-theme="dark"] .health-toolbar input { background: #1e1e1e; border-color: #3a3a3a; color: #f3ede4; } /* Icon-only "refresh balances" button (2026-09-16, later) -- on-demand reload for just the Balances card, requested after the Bitcoin address-api rate-limit investigation made clear that balance reads shouldn't happen on any kind of timer here; this button is the deliberate opposite of that -- purely user-initiated, one call per click, on every wrap page (they all share the identical Balances markup and a refreshBalances() function, so one shared style + one shared click-handler pattern in each page's own JS covers all four). Visually mirrors the existing .uzh-theme-toggle icon-button (same circular shape, border, currentColor SVG stroke icon, light/dark pair) just smaller and inline instead of fixed-position. */ .balances-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .balances-heading h3 { margin: 0; } /* The balances card's refresh control is the same .uzh-icon-btn as every other one on the site; only its size differs, because it sits beside an h3 rather than in a toolbar. The old .balance-refresh-btn was a fifth variant with its own size, its own white background (which stayed white in dark mode) and its own blue glyph. */ .uzh-icon-btn.is-spinning svg { animation: uzh-icon-spin 0.6s linear; } @keyframes uzh-icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } } /* "Add to MetaMask" network list, networks.html only (2026-09-17, later -- moved off index.html entirely per feedback that a full card there was too heavy; index.html now just links to this page via one .wrapper-tile like any other product; later still, restyled to reuse health.html's own .health-card / .health-card__head / .health-card__coin / .health-card__title classes directly, per explicit feedback that health.html's logo size + shine-sweep + title treatment was "perfect" and this page's own small-icon rows looked worse -- reusing the exact same classes guarantees identical sizing rather than a hand-tuned approximation, INCLUDING the --tile-tone accent border (also reused from .health-card, set the same way from each network's own background_color). Wrap width matches index.html/health.html's .uzh-wrap--wide (it used to be --narrow, which made the shared .uzh-frame-header's UZH BCC coin sit at a different x position than on every other page -- a jarring "moving logo" between pages) -- .network-add-list is a grid rather than a single column so cards don't stretch edge-to-edge at that width. Cardano/Bitcoin spokes have no chain_id/rpc_url and are correctly never listed here -- MetaMask has no concept of either chain. */ .network-add-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 0.75rem; } .network-add-card { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; } .network-add-card .health-card__head { margin-bottom: 0; flex: 1 1 auto; min-width: 0; } .network-add-card .health-card__coin { flex-shrink: 0; } .network-add-card .health-card__title { /* Never truncate to an ellipsis -- a hidden "UZH Ethereum Po..." is useless for telling PoW and PoS apart. The 420px column minimum above is sized to fit the longest name unwrapped in the normal case; this is just a fallback for an extreme window resize, where wrapping to a second line (not hiding text) is the safe outcome. */ min-width: 0; overflow-wrap: break-word; } .network-add-card__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; flex: 0 0 auto; white-space: nowrap; } .network-add-card__status { font-size: 0.78rem; } .network-add-card__status.is-ok { color: #3a8c3a; } .network-add-card__status.is-error { color: var(--uzh-berry, #bf0d3e); } /* "Wrappers / Networks" nav menu (2026-09-17, replacing the earlier in-grid tile and standalone-page link, both of which read as too heavy / out of place) -- deliberately styled identically to .uzh-theme-toggle (same 40px circle, 1px --uzh-line border, plain white/dark fill, no bold colour) rather than the filled-tone circle tried for the removed tile, since a solid accent-coloured disc was the specific thing that looked wrong there. Sits top-left, mirroring the theme toggle's own top-right position. */ .uzh-nav-menu { position: fixed; top: 1rem; left: 1rem; z-index: 100; } .uzh-nav-menu__toggle, .uzh-nav-menu__back { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--uzh-line); background: #fff; color: var(--uzh-blue); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--uzh-shadow); text-decoration: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .uzh-nav-menu__toggle svg, .uzh-nav-menu__back svg { width: 20px; height: 20px; } .uzh-nav-menu__toggle:hover, .uzh-nav-menu__back:hover { filter: brightness(0.95); } .uzh-nav-menu__toggle:focus-visible, .uzh-nav-menu__back:focus-visible { outline: 2px solid var(--uzh-blue); outline-offset: 2px; } :root[data-theme="dark"] .uzh-nav-menu__toggle, :root[data-theme="dark"] .uzh-nav-menu__back { background: #17130f; color: #f3ede4; border-color: rgba(255, 255, 255, 0.22); } /* Wrap pages and health.html additionally need a "back to wrappers" arrow next to the burger -- .uzh-page-nav groups the two round buttons in a row at the same top-left spot the standalone .uzh-nav-menu occupies on index.html/networks.html, so the burger keeps its exact look everywhere; only its positioning switches from fixed (standalone) to relative (inside this flex row). */ .uzh-page-nav { position: fixed; top: 1rem; left: 1rem; z-index: 100; display: flex; align-items: center; gap: 0.5rem; } .uzh-page-nav .uzh-nav-menu { position: relative; top: auto; left: auto; z-index: auto; } .uzh-nav-menu__panel { position: absolute; top: calc(100% + 0.5rem); left: 0; background: #fff; border: 1px solid var(--uzh-line); border-radius: 10px; box-shadow: var(--uzh-shadow); padding: 0.35rem; min-width: 150px; display: flex; flex-direction: column; gap: 0.1rem; } .uzh-nav-menu__panel[hidden] { display: none; } .uzh-nav-menu__panel a { display: block; padding: 0.5rem 0.7rem; border-radius: 6px; color: inherit; text-decoration: none; font-weight: 600; font-size: 0.9rem; white-space: nowrap; } .uzh-nav-menu__panel a:hover { background: var(--uzh-light-grey, #f0f0f0); } .uzh-nav-menu__panel a.is-current { color: var(--uzh-blue); } :root[data-theme="dark"] .uzh-nav-menu__panel { background: #17130f; border-color: rgba(255, 255, 255, 0.22); } :root[data-theme="dark"] .uzh-nav-menu__panel a:hover { background: rgba(255, 255, 255, 0.08); } .uzh-nav-menu__sublist { display: flex; flex-direction: column; gap: 0.1rem; padding-left: 0.9rem; } .uzh-nav-menu__sublink { font-weight: 500; font-size: 0.82rem; opacity: 0.85; } .uzh-nav-menu__divider { height: 1px; background: var(--uzh-line); margin: 0.3rem 0.2rem; } :root[data-theme="dark"] .uzh-nav-menu__divider { background: rgba(255, 255, 255, 0.22); } /* ------------------------------------------------------------------ */ /* health.html -- balance sheet */ /* Assets (locked coins) vs liabilities (wrapped supply); the surplus */ /* is equity and is what pays payout fees. Two different alarm colours */ /* on purpose: a thin fee float is an operations problem, backing */ /* below supply is a solvency one, and they must not read the same. */ /* See docs/VAULT_MONITORING.md. */ /* ------------------------------------------------------------------ */ .health-section-note { font-size: 0.82rem; color: var(--uzh-mut); margin: -0.35rem 0 0.9rem; max-width: 66ch; line-height: 1.5; } .health-bs__lines { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.7rem; } .health-bs__line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.84rem; } .health-bs__label { color: var(--uzh-mut); } .health-bs__value { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; } .health-bs__line--total { border-top: 1px solid var(--uzh-line); margin-top: 0.2rem; padding-top: 0.4rem; } .health-bs__line--warn .health-bs__value { color: #bf6000; } .health-bs__line--bad .health-bs__value { color: var(--uzh-berry); } .health-bs__note { font-size: 0.75rem; color: var(--uzh-mut); margin-top: 0.35rem; } /* ------------------------------------------------------------------ */ /* balance.html -- allow-list gate and member list */ /* ------------------------------------------------------------------ */ .balance-gate { max-width: 62ch; } .balance-gate h2 { margin: 0 0 0.5rem; font-size: 1.05rem; } .balance-gate p { margin: 0 0 0.6rem; font-size: 0.9rem; } .balance-gate__note { font-size: 0.8rem !important; color: var(--uzh-mut); border-top: 1px solid var(--uzh-line); padding-top: 0.6rem; margin-bottom: 0 !important; line-height: 1.5; } .balance-member__actions { display: flex; align-items: center; gap: 0.4rem; flex: none; } .balance-member__form { display: flex; gap: 0.5rem; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--uzh-line); flex-wrap: wrap; } .balance-member__form input { flex: 1 1 22rem; min-width: 14rem; padding: 0.4rem 0.6rem; border: 1px solid var(--uzh-line); border-radius: 6px; font: inherit; font-size: 0.85rem; background: transparent; color: inherit; } /* The kit's .uzh-card / .uzh-btn set their own display, which beats the browser's [hidden] { display: none } exactly the way .uzh-nav-menu__panel did (see that fix) -- so hiding them needs an explicit override, or the gate card and the Connect button stay on screen after access is granted. */ .balance-gate[hidden], /* ------------------------------------------------------------------ */ /* balance.html -- one toned card per network, each holding a table */ /* ------------------------------------------------------------------ */ .balance-card { padding: 1rem 1.15rem 1.15rem; } .balance-card__head { align-items: center; } .balance-card__chip { margin-left: auto; } .balance-table-wrap { overflow-x: auto; margin-top: 0.85rem; } .balance-table { font-size: 0.85rem; } .balance-table thead th { cursor: default; } .balance-table thead th:hover { color: var(--uzh-mut); } .balance-table tr.uzh-row-main:hover td { background: transparent; } .balance-table tr.uzh-row-main td { white-space: nowrap; } .balance-table tr.uzh-row-main td.l { white-space: normal; } .balance-table__name { font-weight: 600; } .balance-table__sub { font-size: 0.75rem; color: var(--uzh-mut); } .balance-table__note-cell, .balance-table__muted { color: var(--uzh-mut); font-size: 0.78rem; } .balance-table__warn { color: #bf6000; font-weight: 600; } .balance-table__bad td { background: rgba(191, 13, 62, 0.06); } .balance-table__total td { font-weight: 700; border-top: 2px solid var(--uzh-line); } .balance-table__fn { cursor: help; white-space: nowrap; } .balance-footnotes { margin: 0.7rem 0 0; padding: 0 0 0 1.4rem; font-size: 0.76rem; color: var(--uzh-mut); line-height: 1.55; } .balance-footnotes li { margin: 0.12rem 0; } .balance-fn__marker { margin-left: 0.25rem; font-size: 0.68em; color: var(--uzh-mut); cursor: help; } .balance-footnotes__code { font-size: 0.95em; word-break: break-all; } .balance-caveat { border-left: 3px solid var(--tile-tone, var(--uzh-blue)); padding-left: 0.8rem; margin-bottom: 1.1rem; } /* balance.html -- assumptions box, and the mark for every figure derived from one. UZH berry is the site's alarm colour, so "estimated" reads as "treat with care" without inventing a second visual language. */ .balance-assumptions { border-left: 4px solid var(--uzh-berry, #bf0d3e); margin-bottom: 1.2rem; padding: 1rem 1.15rem; } .balance-assumptions__lead { font-size: 0.83rem; color: var(--uzh-mut); line-height: 1.55; margin: 0.4rem 0 0.9rem; max-width: 82ch; } .balance-assumptions__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem 1.6rem; } .balance-assumptions__head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--uzh-mut); margin-bottom: 0.3rem; } .balance-assumptions__item { font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--uzh-berry, #bf0d3e); line-height: 1.5; } .balance-table .est { color: var(--uzh-berry, #bf0d3e); } .balance-table .est.balance-table__warn { color: #bf6000; } .balance-table .est.balance-table__muted { color: var(--uzh-mut); } /* balance.html -- the connected-account bar. One row: who you are on the left in the site's chip language, actions on the right. */ .balance-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.7rem 0.9rem; margin-bottom: 1.2rem; border: 1px solid var(--uzh-line); border-radius: var(--uzh-radius, 10px); background: var(--uzh-card-bg, #fff); } .balance-bar__identity { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex: 1 1 auto; } .balance-bar__addr { font-size: 0.78rem; color: var(--uzh-mut); overflow-wrap: anywhere; } .balance-bar__actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; } /* ------------------------------------------------------------------ */ /* The pair arrow (see js/theme.js's UzhArrow for why it has two heads) */ /* ------------------------------------------------------------------ */ .uzh-pair-arrow { width: 30px; height: 24px; flex: none; color: inherit; } .uzh-pair-arrow__head { transition: opacity 240ms ease; } .uzh-pair-arrow.is-forward .uzh-pair-arrow__head--left, .uzh-pair-arrow.is-back .uzh-pair-arrow__head--right { opacity: 0.08; } /* Inline in a line of text: matches the surrounding type rather than sitting at icon size. */ .uzh-pair-arrow--inline { width: 1.55em; height: 0.85em; margin: 0 0.3em; vertical-align: -0.08em; stroke-width: 2.6; } /* ------------------------------------------------------------------ */ /* Wallet row (see js/theme.js's UzhWallet for the rules it encodes) */ /* Fixed grid: LED | name | button, with the full address on its own */ /* line beneath. Nothing moves when a string changes length. */ /* ------------------------------------------------------------------ */ .uzh-wallet-bar { /* Two wallet rows (Cardano, Bitcoin) sat stacked, which made those two bands 41px taller than the other wrapper bands. In the wide column they fit side by side, so every wrapper band is the same height and nothing is compressed; a single row still spans the full width. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 0.55rem 1.25rem; width: 100%; margin-top: 0.9rem; text-align: left; } .uzh-wallet-row { display: grid; /* One line per wallet: LED, name, the address beside the name, the copy cue, then the button. The name column is a fixed width so every address starts at the same x, on every row and every page. */ grid-template-columns: 12px 6.5rem minmax(0, 1fr) 1.65rem 7.5rem; grid-template-areas: "led name addr copy button"; align-items: center; column-gap: 0.6rem; } .uzh-wallet-row__name { grid-area: name; font-size: 0.85rem; font-weight: 600; } .uzh-wallet-row__addr { grid-area: addr; font-family: var(--uzh-mono, ui-monospace, "SF Mono", Menlo, monospace); font-size: 0.71rem; line-height: 1.5; /* One line, always. A Cardano base address is 103 characters -- no column is that wide, and wrapping it to three lines would make the row's height depend on which chain it belongs to. The full string is still all there: scroll the box, select it, read the tooltip, or use the Copy button beside it. */ white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; opacity: 0.9; align-self: center; } .uzh-wallet-row__addr::-webkit-scrollbar { height: 0; } /* Fade the last few characters rather than cutting them dead: the start of the address stays readable as a recognition cue, and the fade says there is more without spending a column on an ellipsis. */ .uzh-wallet-row__addr { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent 100%); } .uzh-wallet-row__addr.is-placeholder, .uzh-wallet-row__addr:focus-within { -webkit-mask-image: none; mask-image: none; } .uzh-wallet-row__addr.is-placeholder { opacity: 0.5; font-style: italic; /* break-all is for hashes. Applied to ordinary words it split "not connected" across two lines inside a cell wide enough to hold it. */ word-break: normal; white-space: nowrap; } /* ONE button style for every wallet control on the site -- the pill from the top of the wrapper cards. It draws itself from currentColor, so the same rule works white-on-blue inside a toned band and blue-on-white on an ordinary card, without a second variant to drift out of sync. */ .uzh-wallet-row__btn, .uzh-wallet-row__copy { font: inherit; font-weight: 600; color: inherit; background: transparent; border: 1.5px solid currentColor; border-radius: 999px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; transition: background 160ms ease, opacity 160ms ease; } .uzh-wallet-row__btn { grid-area: button; width: 100%; font-size: 0.8rem; padding: 0.35rem 0.6rem; } /* The copy control is a cue, not a button: a small two-pages icon beside the address, borderless, taking the width of an icon rather than a column. It still occupies a fixed slot, so nothing moves when it becomes active or shows its confirmation. */ .uzh-wallet-row__copy { grid-area: copy; justify-self: start; align-self: center; width: 1.65rem; height: 1.65rem; padding: 0.22rem; border: 0; border-radius: 6px; opacity: 0.5; } .uzh-wallet-row__copy svg { width: 100%; height: 100%; display: block; } .uzh-wallet-row__btn:hover:not(:disabled) { background: color-mix(in srgb, currentColor 14%, transparent); } .uzh-wallet-row__copy:hover:not(:disabled) { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); } .uzh-wallet-row__btn:disabled, .uzh-wallet-row__copy:disabled { opacity: 0.4; cursor: default; } .uzh-wallet-row__copy.is-done { opacity: 1; background: transparent; } .uzh-wallet-row__copy:disabled { opacity: 0.18; } .uzh-led { grid-area: led; align-self: center; width: 11px; height: 11px; border-radius: 50%; border: 1.5px dashed currentColor; background: transparent; opacity: 0.5; transition: background 220ms ease, opacity 220ms ease, box-shadow 220ms ease; } .uzh-wallet-row.is-connected .uzh-led { border-style: solid; background: currentColor; opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); } /* balance.html's bar: the shared wallet row plus the refresh control, both on fixed widths so the row never reflows as the note text or the role label changes length. */ .balance-bar { display: flex; /* .uzh-card sets flex-direction: column. Without restating it here the bar's main axis was vertical, which made `flex: 1 1 26rem` on the wallet bar a 416px HEIGHT rather than a width -- the mystery empty space under the bar. State the direction whenever styling a component that sits inside a kit container. */ flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 0.85rem 1rem; margin-bottom: 1.2rem; } .balance-bar .uzh-wallet-bar { margin-top: 0; flex: 1 1 26rem; min-width: 0; max-width: 42rem; } .balance-bar__actions { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; } .uzh-wallet-row.is-denied .uzh-led { background: var(--uzh-berry, #bf0d3e); border-color: var(--uzh-berry, #bf0d3e); } /* Round icon button -- one component for every icon-only action. Same construction as the wallet pill (border from currentColor, so it works on any surface), just circular and sized to its glyph. */ .uzh-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; padding: 0.42rem; flex: none; color: inherit; background: transparent; border: 1.5px solid currentColor; border-radius: 50%; cursor: pointer; transition: background 160ms ease, opacity 160ms ease, transform 400ms ease; } .uzh-icon-btn svg { width: 100%; height: 100%; display: block; } .uzh-icon-btn:hover:not(:disabled) { background: color-mix(in srgb, currentColor 14%, transparent); } .uzh-icon-btn:disabled { opacity: 0.35; cursor: default; } /* Smaller variant, for a control sitting beside an h3 rather than in a toolbar. Must come after the base rule: same specificity, so source order decides. */ .uzh-icon-btn--sm { width: 1.75rem; height: 1.75rem; padding: 0.3rem; border-width: 1px; } /* ------------------------------------------------------------------ */ /* Pair line -- coins and the title beneath them share ONE grid, so */ /* their arrows sit on the same vertical axis whatever the names are. */ /* Centring each row as a whole does not do this: "UZHETHw" and */ /* "wUZHETHw" are different widths, so the title's arrow drifts off the */ /* coin arrow above it. Three columns (1fr | arrow | 1fr) put the arrow */ /* at the exact centre of both rows, with the names hugging it. */ /* ------------------------------------------------------------------ */ .uzh-coin-pair, .uzh-pair-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 0.9rem; } .uzh-coin-pair > :first-child, .uzh-pair-line__left { justify-self: end; } .uzh-coin-pair > :last-child, .uzh-pair-line__right { justify-self: start; } .uzh-coin-pair > .uzh-pair-arrow, .uzh-pair-line > .uzh-pair-arrow { justify-self: center; } .uzh-pair-line { text-align: initial; } /* The tile grid uses the same line for its coins and its label. */ .wrapper-tile__coins { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 0.6rem; } .wrapper-tile__coins > :first-child { justify-self: end; } .wrapper-tile__coins > :last-child { justify-self: start; } .wrapper-tile__label.uzh-pair-line { column-gap: 0.45rem; } /* health.html -- oracle legs and services. The cards carry their network's tone like the network cards above them; without it their border fell back to the faint neutral line and the boxes read as borderless next to the toned ones. */ .health-card__pair { display: flex; align-items: center; gap: 0.3rem; flex: none; } .health-card__coin--sm { width: 28px; height: 28px; } .health-card__pair-arrow { display: inline-flex; color: var(--uzh-mut); } .health-card__slug { font-family: var(--uzh-mono, ui-monospace, monospace); font-size: 0.68rem; opacity: 0.75; } .health-card--service { border-color: var(--tile-tone, var(--uzh-blue)); } .health-card__service-icon { width: 34px; height: 34px; padding: 0.35rem; flex: none; border-radius: 8px; color: var(--uzh-blue); background: color-mix(in srgb, var(--uzh-blue) 10%, transparent); } .health-card__service-icon svg { width: 100%; height: 100%; display: block; }