…
… Numbers (01, 02 …) are generated with a CSS counter: never type them in the markup. */ .index-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule-strong); counter-reset: index; } .index-row { counter-increment: index; display: grid; grid-template-columns: var(--row-cols); column-gap: var(--row-gap); row-gap: var(--space-2xs); align-items: baseline; padding-block: 1.375rem 1.5rem; border-bottom: var(--rule); } .index-row::before { content: counter(index, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--green); } .index-row__title { font-size: var(--text-lg); line-height: 1.25; letter-spacing: var(--tracking-title); } .index-row__text { color: var(--muted); font-size: 0.9375rem; line-height: 1.65; } /* Row text may be a
holding paragraphs, a callout and links. */ .index-row__text > * + * { margin-top: var(--space-xs); } .index-row__text :is(a, strong, b) { color: var(--ink); } .index-row__text a:hover { color: var(--green); } /* A note inside row text is a compact callout. */ .index-row__text .callout { padding: var(--space-xs) var(--space-s); } /* Rows whose copy already carries its numbers ("1. Mine it.", step 1-5): the typed number sits in the number column, styled like the counter, and the counter is switched off.-
1.
…
… */ .index-list--typed > .index-row::before { content: none; } .index-row__num { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--green); } /* Stacked rows (title over text): below 48rem, where a 16rem title column would squeeze the text to a narrow strip, and on desktops below 80rem where the list sits in the narrow 2.1fr split column. Three columns only from 768 to 899px and from 1280px up. */ @media (max-width: 47.99rem), (min-width: 56.25rem) and (max-width: 79.99rem) { .index-row { grid-template-columns: var(--row-num) minmax(0, 1fr); } .index-row__text { grid-column: 2; max-width: 38rem; } } @media (max-width: 40rem) { .index-row { padding-block: 1.125rem 1.25rem; } } /* 13 Specification table ================================================================= */ /*Label Value instead of . */ .spec-table tbody td:first-child:not(:last-child) { width: 44%; color: var(--muted); } .spec-table code { font-size: 0.875em; background: none; padding: 0; } /* --rows: a spec table in the same column as numbered rows. Wherever those rows show three columns, the label column is as wide as number + title, so values start where row descriptions start. */ @media (min-width: 48rem) and (max-width: 56.24rem), (min-width: 80rem) { .spec-table--rows tbody th, .spec-table--rows tbody td:first-child:not(:last-child) { width: var(--row-label); } } @media (max-width: 30rem) { .spec-table.spec-table--stack, .spec-table--stack tbody, .spec-table--stack tbody tr, .spec-table--stack tbody th, .spec-table--stack tbody td { display: block; width: auto; } .spec-table--stack tr { padding-block: 0.6875rem; border-bottom: var(--rule); } .spec-table--stack :is(th, td) { padding: 0; border: 0; } .spec-table--stack tbody th { font-size: var(--text-sm); } /* Column headers (whitepaper tables) stack like the rows, label over label, under the table's ink rule with a hairline below: one ink rule per table. */ .spec-table--stack thead, .spec-table--stack thead tr, .spec-table--stack thead th { display: block; } .spec-table--stack thead th { padding: 0; border-bottom: 0; } } /* 14 Stat strip ========================================================================== */ /* … (value first, label second) Where the page's baseline read label then value (price.html), keep the label first in the DOM so screen readers read it first; `order` puts the value in front, so both orders look the same. */ .stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--rule-strong); border-bottom: var(--rule-strong); } .stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.875rem; min-width: 0; padding: 1.375rem 1.5rem; border-left: var(--rule); } .stat:first-child { border-left: 0; padding-left: 0; } .stat__value { font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2.125rem); line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; } .stat__label { color: var(--muted); font-size: var(--text-sm); line-height: 1.35; } .stat__label + .stat__value { order: -1; } .stat--live .stat__label::before { content: ""; display: inline-block; width: 0.4375rem; height: 0.4375rem; margin-right: 0.5rem; vertical-align: 0.08em; background: var(--green); } /* Value over label below 80rem. A wrapping row would stack only the cells whose translated label is long, so neighbouring cells would disagree. */ @media (max-width: 79.99rem) { .stat { flex-direction: column; align-items: flex-start; padding: 1.125rem 1.25rem; } } @media (max-width: 47.99rem) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(odd) { border-left: 0; padding-left: 0; } .stat:nth-child(n + 3) { border-top: var(--rule); } .stat:nth-child(even) { padding-right: 0; } } /* 15 Market panel ======================================================================== */ /*21MMax Supply… site.v1.js sets data-state to live or unavailable from the [data-live-value] elements inside. */ .market { min-width: 0; padding-block: var(--space-s) 0.875rem; border-top: var(--rule-strong); border-bottom: var(--rule); } .market__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); } .market__pair { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink); } .market__signal { width: 0.75rem; height: 0.75rem; border: 1px solid var(--line-ui); background: transparent; flex: none; } .market__price { --price-size: clamp(2.75rem, 2.1rem + 2.4vw, 4.25rem); min-height: calc(var(--price-size) * 1.02 + 2.625rem); /* same height in every state */ padding-block: 1.25rem 1.375rem; font-size: var(--price-size); line-height: 1.02; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .market__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s) var(--space-m); margin: 0; padding-top: 1.125rem; border-top: var(--rule); } .market__stats > div { min-width: 0; } .market__stats dt { color: var(--muted); font-size: 0.8125rem; line-height: 1.4; } .market__stats dd { margin: 0.25rem 0 0; font-size: 1.0625rem; line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .market__source { margin-top: 1.25rem; padding-top: 0.875rem; border-top: var(--rule); color: var(--muted); font-size: 0.8125rem; } .market__source a { color: var(--ink); } .market__source a:hover { color: var(--green); } /* States: loading = hollow square + hairline placeholders; live = filled square; unavailable = crossed square + a small muted dash in place of the big price. */ .market[data-state="loading"] :is(.market__price, .market__stats dd) { color: transparent; background: linear-gradient(var(--line-ui), var(--line-ui)) 0 60% / 4ch 1px no-repeat; background-origin: content-box; background-clip: content-box; } .market[data-state="live"] .market__signal { background: var(--green); border-color: var(--green); } .market[data-state="unavailable"] .market__price { display: flex; align-items: center; font-size: var(--text-lg); letter-spacing: 0; color: var(--muted); } .market[data-state="unavailable"] .market__stats dd { color: var(--muted); } .market[data-state="unavailable"] .market__signal { border-color: var(--muted); background: linear-gradient(to top right, transparent calc(50% - 0.75px), var(--muted) calc(50% - 0.75px), var(--muted) calc(50% + 0.75px), transparent calc(50% + 0.75px)); } /* 16 Link directory ====================================================================== */ /*-
…
…
… */
.directory {
list-style: none;
margin: 0;
padding: 0;
border-top: var(--rule-strong);
counter-reset: index;
}
.directory > li { counter-increment: index; border-bottom: var(--rule); }
.directory__link {
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 12.5 12 4M5 3.75h7.25V11' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
position: relative;
display: grid;
grid-template-columns: var(--row-cols);
column-gap: var(--row-gap);
row-gap: 0.25rem;
align-items: baseline;
padding-block: 1.125rem 1.1875rem;
padding-right: 2rem; /* room for the arrow */
color: var(--ink);
text-decoration: none;
}
.directory__link::before {
content: counter(index, decimal-leading-zero);
grid-column: 1;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.04em;
color: var(--green);
}
.directory__link::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 0.875rem;
height: 0.875rem;
margin-top: -0.4375rem;
background-color: currentColor;
-webkit-mask: var(--icon-external) center / contain no-repeat;
mask: var(--icon-external) center / contain no-repeat;
transition: transform 0.15s ease;
}
.directory__title {
grid-column: 2;
font-size: 1.1875rem;
line-height: 1.3;
letter-spacing: var(--tracking-title);
}
.directory__text { grid-column: 3; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.directory__link:hover { color: var(--green); }
.directory__link:hover::after { transform: translate(0.15em, -0.15em); }
.directory__link:focus-visible { outline-offset: 2px; }
.directory--internal .directory__link { --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8h12M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); }
@media (max-width: 47.99rem), (min-width: 56.25rem) and (max-width: 79.99rem) {
.directory__link { grid-template-columns: var(--row-num) minmax(0, 1fr); }
.directory__title, .directory__text { grid-column: 2; }
.directory__text { max-width: 38rem; }
}
/* Plain link list (no numbers), e.g. exchanges or downloads */
.link-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule-strong); }
.link-list > li { border-bottom: var(--rule); }
.link-list a {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-s);
padding-block: 0.9375rem;
font-size: var(--text-md);
color: var(--ink);
text-decoration: none;
}
.link-list a:hover { color: var(--green); }
/* Closing call-to-action row */
.closing {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: var(--space-m) var(--space-xl);
padding-block: var(--section-pad);
border-top: var(--rule-strong);
}
.closing__title {
font-size: var(--text-2xl);
line-height: 1.04;
letter-spacing: var(--tracking-display);
}
.closing__text { margin-top: var(--space-s); color: var(--muted); font-size: var(--text-md); max-width: 31rem; }
/* Several buttons (.actions--stack): the title starts on the line of the first button instead of
sitting at the foot of a tall stack. From 1280px the buttons form two columns, so the block is
about as tall as title + text; with an odd count the first (primary) button spans both columns.
The homepage closing holds one plain .btn and keeps the bottom alignment. */
.closing:has(> .actions--stack) { align-items: start; }
@media (min-width: 80rem) {
.closing > .actions--stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.closing > .actions--stack > .btn:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
.closing { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
/* 17 Callouts ============================================================================ */
/*
*/ .callout { padding: 1.25rem 1.5rem; border-left: 3px solid var(--green); background: var(--wash); color: var(--ink); } .callout > * + * { margin-top: 0.5rem; } .callout p { color: var(--muted); max-width: var(--measure); } /* the box may be wider than the text */ .callout strong { color: var(--ink); } .callout a { color: var(--ink); } .callout a:hover { color: var(--green); } .callout--ink { border-left-color: var(--ink); } /* Dark panel for technical settings (miner connection etc.) */ .surface-dark { background: var(--ink); color: var(--on-dark); } .surface-green { background: var(--green); color: var(--on-dark); } .surface-dark .muted, .surface-dark .eyebrow { color: var(--on-dark-muted); } .surface-green .muted { color: var(--on-green-muted); } .surface-dark a, .surface-green a { color: var(--on-dark); } .surface-dark a:hover, .surface-green a:hover { color: var(--bright); } .panel { padding: clamp(1.25rem, 1rem + 1vw, 1.875rem); } .panel__field { padding-block: 1rem; border-top: 1px solid var(--rule-on-dark); } .panel__field:first-of-type { margin-top: 1.25rem; } .panel__label { display: block; margin-bottom: 0.375rem; font-size: 0.8125rem; color: var(--on-dark-muted); } /* 18 Tables ============================================================================== */ /* Any table with more than two columns: wrap it so only the table scrolls.Title. Text link
*/ .table-scroll, .table-wrap { --scroll-ground: var(--paper); --scroll-edge: var(--line-ui); max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; /* Scroll edges: a 1px --line-ui rule on each side where part of the table is hidden. The two "local" fills move with the content and cover the fixed rules at its start and end, so a box that does not scroll shows no rule. Solid fills, not shading. */ background: linear-gradient(var(--scroll-ground), var(--scroll-ground)) left / 1px 100% no-repeat local, linear-gradient(var(--scroll-ground), var(--scroll-ground)) right / 1px 100% no-repeat local, linear-gradient(var(--scroll-edge), var(--scroll-edge)) left / 1px 100% no-repeat scroll, linear-gradient(var(--scroll-edge), var(--scroll-edge)) right / 1px 100% no-repeat scroll; } .table-scroll > table, .table-wrap > table { min-width: var(--table-min, 0); } .data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; } .data-table th, .data-table td { padding: 0.75rem var(--space-s) 0.75rem 0; border-bottom: var(--rule); text-align: left; vertical-align: baseline; } .data-table thead th { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); white-space: nowrap; border-top: var(--rule-strong); border-bottom: var(--rule-strong); } /* Row keys read like spec-table labels on every page: regular weight, muted. Row-group headers (downloads platforms, scope="rowgroup") keep their page's title styling. */ .data-table tbody th { font-weight: 400; } .data-table tbody th[scope="row"] { color: var(--muted); } .data-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .data-table :is(th, td):last-child { padding-right: 0; } /* right-aligned last column ends on the edge */ /* An empty corner cell (a row-header column without header copy) keeps the ink header rules. */ .data-table thead td { border-top: var(--rule-strong); border-bottom: var(--rule-strong); } /* On ink: hairlines and header labels use the on-dark tokens (--muted on ink fails contrast). */ .surface-dark .data-table :is(th, td) { border-bottom-color: var(--rule-on-dark); } .surface-dark .data-table thead :is(th, td) { color: var(--on-dark-muted); border-top-color: var(--rule-on-dark); border-bottom-color: var(--rule-on-dark); } .surface-dark .data-table tbody th[scope="row"] { color: var(--on-dark-muted); } .surface-dark :is(.table-scroll, .table-wrap) { --scroll-ground: var(--ink); --scroll-edge: var(--rule-on-dark); } /* 19 Code and commands =================================================================== */ code, kbd, samp, pre { font-family: var(--font-mono); } :not(pre) > code { font-size: 0.875em; padding: 0.08em 0.3em; background: var(--wash); overflow-wrap: anywhere; /* prevents overflow; prefer .command or…
for long tokens */ } pre { margin: 0; max-width: 100%; overflow-x: auto; padding: 1.125rem 1.25rem; border: var(--rule); background: var(--wash); font-size: 0.8125rem; line-height: 1.65; white-space: pre; } pre code { font-size: inherit; background: none; padding: 0; overflow-wrap: normal; } /* Copyable command or token: never breaks inside the token, scrolls inside its own box. (button text must be existing, translated copy or an aria-label from existing copy) */ .command { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; padding: 0.5rem 0.5rem 0.5rem 0.875rem; border: var(--rule); background: var(--wash); } .command code { flex: 1; min-width: 0; overflow-x: auto; padding: 0.3125rem 0; background: none; font-size: 0.875rem; line-height: 1.5; white-space: nowrap; overflow-wrap: normal; } .command__copy { flex: none; min-height: 2.25rem; padding: 0.375rem 0.75rem; border: 1px solid var(--line-ui); border-radius: 0; background: var(--paper); font-size: 0.8125rem; } .command__copy:hover { border-color: var(--ink); } .surface-dark .command { background: rgba(248, 249, 246, 0.05); border-color: var(--rule-on-dark); } .surface-dark .command__copy { background: transparent; border-color: var(--on-dark-muted); color: var(--on-dark); } .surface-dark :not(pre) > code { background: rgba(248, 249, 246, 0.08); } /* The rule above (0,1,2) outranks ".command code" (0,1,1): the box already carries the ground. */ .surface-dark .command code { background: none; } /* A command box whose token wraps, but only at thestratum+tcp://forge.bch2.org:3333in the markup, so a stratum URL stays fully visible at 320px without scrolling: . No tabindex: nothing scrolls. */ .command--wrap code { white-space: normal; overflow-wrap: normal; word-break: normal; } /* A token in running text that breaks only where the markup hasstratum+tcp://forge.bch2.org:3333 . On it keeps the wash chip (".token" outranks ":not(pre) > code", so overflow-wrap stays normal). Stratum URLs take oneafter "://", so host and port stay together: stratum+tcp://*/ .token { font-family: var(--font-mono); font-size: 0.875em; overflow-wrap: normal; word-break: normal; } /* 20 FAQ accordion ======================================================================= */ /* Styles the existing markup; behaviour stays in faq.js / mining.js. faq.html: .faq-item > button.faq-q (text + span.faq-icon) + .faq-a > .faq-a-inner; .faq-item.open mining.html: .faq-item > button.faq-q[aria-expanded] (text + span[aria-hidden]) + .faq-a(.open) > p */ .faq-section + .faq-section { margin-top: var(--space-xl); } .faq-section-title, .faq-section > h2.eyebrow { margin-bottom: var(--space-xs); font-weight: 400; line-height: 1.5; text-wrap: wrap; /* category labels may be h2 elements: cancel the heading rules */ font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--green); } .faq-item { border-bottom: var(--rule); } .faq-section-title + .faq-item, .faq-section > h2 + .faq-item, .faq-list > .faq-item:first-child { border-top: var(--rule-strong); } .faq-q { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m); width: 100%; margin: 0; padding: 1.1875rem 0; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: 1.1875rem; line-height: 1.4; letter-spacing: var(--tracking-title); text-align: left; } .faq-q:hover { color: var(--green); background: none; } .faq-q:focus-visible { outline-offset: 2px; } .faq-icon, .faq-q > span[aria-hidden] { flex: none; width: 1.25rem; height: auto; border: 0; border-radius: 0; background: none; color: var(--green); font-family: var(--font-mono); font-size: 1.125rem; line-height: 1; text-align: center; } .faq-item.open .faq-icon { background: none; color: var(--green); } /* An open question shows "−" on both pages; the icon never rotates. faq.html: faq.js swaps the .faq-icon text. mining.html: mining.js leaves the aria-hidden "+" as it is, so while aria-expanded is true that glyph is hidden (font-size 0) and "−" is drawn in ::after. */ .faq-q[aria-expanded="true"] > span[aria-hidden]:not(.faq-icon) { font-size: 0; } .faq-q[aria-expanded="true"] > span[aria-hidden]:not(.faq-icon)::after { content: "\2212"; font-size: 1.125rem; } .faq-a { display: none; max-height: none; overflow: visible; padding: 0; } .faq-item.open .faq-a, .faq-a.open { display: block; max-height: none; padding: 0; } .faq-a-inner, .faq-a > p { max-width: var(--measure); padding: 0 2.75rem 1.5rem 0; border: 0; color: var(--muted); font-size: var(--text-base); line-height: var(--leading-body); } .faq-a-inner a, .faq-a > p a { color: var(--ink); } .faq-a-inner a:hover, .faq-a > p a:hover { color: var(--green); } .faq-a-inner strong, .faq-a > p strong { color: var(--ink); } .faq-a-inner ul, .faq-a-inner ol { margin: 0.75rem 0 0.75rem; padding-left: 1.25rem; } .faq-a-inner li + li { margin-top: var(--space-2xs); } @media (max-width: 30rem) { .faq-q { font-size: 1.0625rem; padding-block: 1rem; } .faq-a-inner, .faq-a > p { padding-right: 0; } } /* In-page link bar (faq.html .faq-nav is a JS hook: keep the class) */ .faq-nav, .page-links { display: flex; flex-wrap: wrap; gap: 0.25rem var(--space-m); padding-block: var(--space-s); border-bottom: var(--rule); } .faq-nav a, .page-links a { padding-block: 0.25rem; color: var(--ink); font-size: 0.9375rem; text-decoration-line: underline; text-underline-offset: 0.3em; } .faq-nav a:hover, .page-links a:hover { color: var(--green); } /* Document layout: sticky side navigation + article (faq, whitepaper). The columns are the .split tracks, so the article starts on the same vertical line as section bodies and footer links. */ .content-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: var(--space-xl) clamp(2rem, 5vw, 4.5rem); padding-block: var(--space-xl) var(--section-pad); } /* Opens with an ink rule like every list. Also valid on the .faq-nav hook element: these declarations come later and replace the link bar's display, padding and rule. */ .side-nav { align-self: start; position: sticky; top: var(--space-l); display: block; max-width: var(--row-label); max-height: calc(100vh - 4rem); overflow-y: auto; padding-block: 0; border-top: var(--rule-strong); border-bottom: 0; } .side-nav .eyebrow { margin-bottom: var(--space-xs); } .side-nav a { display: block; padding-block: var(--space-2xs); border-bottom: var(--rule); color: var(--ink); font-size: var(--text-sm); line-height: 1.4; text-decoration: none; } .side-nav a:hover, .side-nav a[aria-current="true"] { color: var(--green); } /* Full focus rings in the scrolling nav. A scroll box clips at its padding box, and the links fill it, so the 3px ring at 3px offset lost its sides and the outer edges of the first and last link. The box reaches 6px (ring + offset) past the link column on both sides and at the bottom, and the 6px top padding comes out of the first link's own padding. Link boxes, text and hairlines stay where they were; the ink rule stays a border (links scrolled up are still clipped under it), drawn over the link column only (in forced colours the plain border, see section 23). */ @media (min-width: 56.25rem) { .side-nav { max-width: calc(var(--row-label) + 12px); margin-inline: -6px; margin-bottom: -6px; padding: 6px; scroll-padding-block: 6px; /* a link focused at the scroll edge scrolls in with its ring */ border-image: linear-gradient(to right, transparent 6px, var(--ink) 6px, var(--ink) calc(100% - 6px), transparent calc(100% - 6px)) 1 0 0; } .side-nav > a:first-child { padding-top: calc(var(--space-2xs) - 6px); } } .article { min-width: 0; max-width: 56rem; } .article > section + section { margin-top: var(--space-xl); padding-top: var(--space-l); border-top: var(--rule); } /* Blocks inside each article section (.prose spaces only its direct children). Text keeps the measure; tables and code use the full column. */ .article > section > * + * { margin-top: 1em; } .article > section > h2 + * { margin-top: var(--space-m); } .article > section > h3 + * { margin-top: 0.75em; } .article > section > * + h3 { margin-top: 1.75em; } .article > section > :is(p, ul, ol, h3) { max-width: var(--measure); } .article > section > :is(.table-scroll, .table-wrap, pre), .article > section > :is(.table-scroll, .table-wrap, pre) + :not(h3) { margin-top: var(--space-m); } @media (max-width: 56.24rem) { .content-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); } .side-nav { position: static; max-width: none; max-height: none; overflow: visible; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); padding-block: 0 var(--space-s); border-top: 0; border-bottom: var(--rule); } .side-nav .eyebrow { flex-basis: 100%; } /* Light underlines (--line-ui, 3.5:1) so the wrapped links read as a list, not a paragraph. */ .side-nav a { border-bottom: 0; padding-block: 0.375rem; font-size: 0.9375rem; text-decoration-line: underline; text-decoration-color: var(--line-ui); text-underline-offset: 0.3em; } .side-nav a:is(:hover, [aria-current="true"]) { text-decoration-color: currentColor; } } /* 21 Footer ============================================================================== */ /* Same tracks and column gap as .split, so the links start on the section body line. */ .site-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: var(--space-l) clamp(2rem, 5vw, 4.5rem); padding-block: clamp(2rem, 1.6rem + 1.5vw, 3rem) clamp(2.5rem, 2rem + 2vw, 3.5rem); border-top: var(--rule-strong); } .site-footer__wordmark { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.015em; } .site-footer__copy { margin-top: var(--space-s); max-width: 22rem; color: var(--muted); font-size: var(--text-sm); } /* A page's own footer note may contain links (buy, downloads, whitepaper). */ .site-footer__copy a { color: var(--ink); } .site-footer__copy a:hover { color: var(--green); } /* Three groups, each aforge.bch2.org:3333 : site pages | tools | social. No group headings (they would be new copy); the columns carry the grouping. */ .footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s) var(--space-m); align-content: start; } .footer-links__group { min-width: 0; } .footer-links a { display: block; padding-block: 0.3125rem; color: var(--ink); font-size: 0.9375rem; line-height: 1.45; text-decoration: none; } .footer-links a:hover { color: var(--green); text-decoration-line: underline; } /* Stacks a little later than .split: below 960px the 1fr copy column is under ~270px and balanced translated copy breaks after a typed hyphen ("peer-/to-peer" in es, pt). */ @media (max-width: 59.99rem) { .site-footer__inner { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 47.99rem) { .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-links__group--social { grid-column: 1 / -1; display: flex; flex-wrap: wrap; column-gap: var(--space-m); padding-top: var(--space-2xs); border-top: var(--rule); } } /* 22 Utilities =========================================================================== */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .nowrap { white-space: nowrap; } /* A phrase in a heading that should not break inside ("(no account, no custody)", "Bitcoin Cash (BCH)"): it moves to the next line whole where it fits, and wraps inside itself only where it is wider than the column (320px), so it never overflows. */ .keep { display: inline-block; } .tabular { font-variant-numeric: tabular-nums; } /* 23 Motion, forced colours, print ======================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .arrow:hover::after, .arrow-ext:hover::after, .directory__link:hover::after { transform: none; } } @media (forced-colors: active) { .arrow::after, .arrow-ext::after, .directory__link::after { forced-color-adjust: none; background-color: LinkText; } .btn { border: 1px solid ButtonText; } .status-mark::before, .stat--live .stat__label::before, .market__signal { forced-color-adjust: none; background: CanvasText; } .side-nav { border-image: none; } } @media print { .notice, .menu-toggle, .site-nav, .skip-link { display: none !important; } body { background: #fff; font-size: 11pt; } .container { width: 100%; } .faq-a { display: block !important; } .split, .split--even { grid-template-columns: minmax(0, 1fr); } } /* ----------------------------------------------------------------------------------------------- Exchange marks (exchange update, 2026-09-15) The exchange's official icon beside its name, set as real text in the exchange's own lettering: NonKYC, Biconomy, NestEx. The icon is decorative (alt="").
Biconomy
Inside a .btn the icon sits before the label; it scales with the text (1.25em).
----------------------------------------------------------------------------------------------- */
.exchange-logo {
display: inline-block;
flex: none;
width: 1.25em;
height: 1.25em;
margin-inline-end: 0.5em;
vertical-align: -0.25em;
object-fit: contain;
}
.exchange-name { display: inline-flex; align-items: center; gap: 0.5em; }
.exchange-name .exchange-logo,
.btn .exchange-logo { margin-inline-end: 0; vertical-align: 0; }
-
-
1.