/* ============================================================================ BITCOIN2 Institutional market-data aesthetic. Inter + IBM Plex Mono, tabular figures, standard market green/red. No glow, no sci-fi. ========================================================================== */ :root { --bg: #0A0D12; --bg-alt: #0D1117; --panel: rgba(18,22,30,0.72); --panel-2: rgba(22,27,36,0.80); --line: #1E242F; --line-2: #2A3340; --text: #E9EDF2; --text-2: #A7B1C0; --muted: #6E7A8A; --faint: #4A5464; /* Jupiter mobile's pair, supplied by the operator after two wrong guesses of mine — first #3CE3AB, reasoned from jup.ag's stylesheet, then #C7F284, their brand lime. Worth recording why the second was wrong: my own measurements off the badge came out at #B3E193 and #BAE899, which sit 13 and 18 from the real #AEEB8C and 27 from the value I shipped. The pixels were right and I overrode them with a "known" brand token. Measure, then trust the measurement. The pill fill is the same colour at 15% over the page, not a darkened shade of it. Both models fit, but the transparent one fits better: solving #222E20 against #08090E gives alphas of 0.157, 0.164 and 0.143 across the three channels — a spread of 0.02 — where a multiply needs 0.195, 0.196 and 0.229, a spread of 0.03. One alpha explains all three channels; a multiply has to bend the blue. */ --pos: #AEEB8C; --pos-bg: rgba(174,235,140,0.15); --pos-line: rgba(174,235,140,0.30); --neg: #DF758B; --neg-bg: rgba(223,117,139,0.15); --neg-line: rgba(223,117,139,0.28); --btc: #F7931A; --brand: #F7931A; --brand-bg: rgba(247,147,26,0.10); --brand-line:rgba(247,147,26,0.30); --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --radius: 10px; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Nothing on this page is meant to scroll sideways. A single element wider than the viewport makes a phone browser zoom the whole page out to fit, which is how it ended up rendering at ~87%. `clip` rather than `hidden` because hidden on an ancestor silently breaks position: sticky for everything inside it, and the header depends on that. */ /* On the root only. Clipping on BODY as well is what unsticks the header on a phone: body-level overflow makes body the scrollport for everything inside it, and on iOS the sticky bar then has nothing to stick to. The @supports fallback made it worse, since a browser without clip got overflow-x:hidden on body — which the comment above already says breaks sticky. Clipping the root alone still stops the page scrolling sideways. */ html { max-width: 100%; overflow-x: clip; } @supports not (overflow-x: clip) { html { overflow-x: hidden; } } /* everything sits above the starfield */ .topbar, .ticker, main, .footer { position: relative; z-index: 1; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 1, 'cv05' 1; /* No overflow here at all. Even clip makes body a clip container, which on iOS is enough to stop the header sticking; the root handles it instead. */ } img { max-width: 100%; } /* min-width: 0 because .hero is a flex container and this is a flex item. A flex item defaults to min-width: auto, which refuses to shrink below its content's min-content width — here 453px against a 390px phone — so it overflowed and Bitcoin1 was cut off the right edge. This is the fix; the overflow-x: clip on html/body is only a backstop. */ .container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); min-width: 0; } .container.narrow { max-width: 820px; } .accent { color: var(--pos); } .pos { color: var(--pos); } .neg { color: var(--neg); } /* Both coin marks are transparent PNGs in the same style, so they get the same treatment and read as a matched pair. */ /* ---- top bar ------------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 50; background: rgba(10,13,18,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .topbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); height: 64px; display: flex; align-items: center; gap: 32px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; } .brand-mark { width: 28px; height: 28px; } .brand-2 { color: var(--btc); } .topnav { display: flex; gap: 26px; margin-left: 8px; } .topnav a { color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .15s; } .topnav a:hover { color: var(--text); } /* The terminal link: just its green and the prompt mark, no pill */ .topnav a.nav-term { display: inline-flex; align-items: center; gap: 6px; color: #00FF41; } .topnav a.nav-term:hover { color: #7DFF9E; } .nav-term .term-mark { font-family: var(--mono); font-weight: 700; letter-spacing: -0.04em; } .btn { display: inline-block; text-decoration: none; font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 8px; transition: background .15s, border-color .15s, color .15s; } .btn-buy { margin-left: auto; background: var(--brand); color: #1A0E00; } .btn-buy:hover { background: #FFA733; } .btn-buy.disabled { background: transparent; color: var(--muted); border: 1px solid var(--line-2); cursor: default; } .btn-buy.disabled:hover { background: transparent; } /* ---- ticker -------------------------------------------------------------- */ .ticker { background: rgba(13,17,23,0.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .ticker::-webkit-scrollbar { display: none; } .ticker-inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); height: 44px; display: flex; align-items: center; gap: 30px; white-space: nowrap; } .tk { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; } /* a phone sees the first two figures whole — the burn and the mint — before the rest scrolls on */ @media (max-width: 480px) { .ticker-inner { gap: 14px; padding: 0 12px; } .tk { gap: 6px; } .tk-k { letter-spacing: .01em; } } .tk-k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .tk-v { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--text); } /* The burn in green and the mint in red. The markup always carried .pos and .neg here, but .tk-v's own colour comes later in the file and was winning. */ .tk-v.pos { color: var(--pos); } .tk-v.neg { color: var(--neg); } .tk-meta { margin-left: auto; gap: 7px; color: var(--faint); font-size: 12px; font-family: var(--mono); } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} } /* ---- the duel ------------------------------------------------------------ */ .duel-wrap { padding: clamp(44px, 6vw, 76px) 0 clamp(40px, 5vw, 64px); background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(247,147,26,0.07), transparent 70%), var(--bg); border-bottom: 1px solid var(--line); } .status-line { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 26px; } .chip { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: rgba(247,147,26,0.12); color: var(--btc); border: 1px solid rgba(247,147,26,0.28); } .status-text { font-size: 14px; color: var(--muted); } /* The currency mark beside "Pricing in …". One disc either way: DUSD fills it with its own logo, the dollar with a glyph, so switching between them does not change the shape or shift the line. */ .pricedin-mark { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 0; padding: 0; cursor: pointer; position: relative; transition: filter .15s ease; } /* A finger is a good deal wider than 18px. The hit area grows, the disc does not — the alternative is padding the button out and losing the mark's shape. */ .pricedin-mark::after { content: ''; position: absolute; inset: -10px; } .pricedin-mark:hover:not(:disabled) { filter: brightness(1.25); } .pricedin-mark:disabled { cursor: default; } .pricedin-mark:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } .pricedin-mark[hidden] { display: none; } .pricedin-mark img { width: 100%; height: 100%; display: block; border-radius: 50%; } .pricedin-mark.is-usd { background: var(--line-2); color: var(--text-2); font-family: var(--mono); font-size: 11px; font-weight: 600; } .headline { text-align: center; font-size: clamp(25px, 5.2vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: clamp(34px, 5vw, 54px); /* Left to wrap naturally this strands "cap." alone on a second line — it misses one line by about 20px at desktop width. Balance splits it evenly instead, at every width, rather than tuning the font size for one screen. */ text-wrap: balance; } /* ---- asset identity ------------------------------------------------------ Green is Bitcoin2, red is Bitcoin1 — the shrinking supply reads as the healthy one on sight, which is the whole argument the page is making. Brand orange stays with the logo and UI chrome so it never competes. -------------------------------------------------------------------------- */ .hl-b2 { color: var(--pos); } .hl-b1 { color: var(--neg); } .hl-neg { color: var(--neg); } .hl-pos { color: var(--pos); } .duel { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: clamp(12px, 2vw, 22px); } .side { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); } .side-b2 { border-color: var(--pos-line); background: linear-gradient(180deg, var(--pos-bg), var(--panel) 45%); } .side-b1 { border-color: var(--neg-line); background: linear-gradient(180deg, var(--neg-bg), var(--panel) 45%); } .side-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .coin { width: clamp(46px, 6vw, 60px); height: clamp(46px, 6vw, 60px); flex-shrink: 0; } .side-name { font-size: clamp(18px, 2.4vw, 23px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .side-name .num { color: var(--btc); } .side-ticker { font-size: 12.5px; color: var(--muted); font-weight: 500; } .side-price { font-family: var(--mono); font-weight: 600; font-size: clamp(28px, 4.6vw, 48px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px; overflow-wrap: anywhere; } .side-tag { /* block-level, not inline-flex: an inline box is positioned off a text baseline, and the up/down arrow glyphs have different metrics, which put the two cards 0.8px out of step */ display: flex; width: fit-content; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 6px 12px; border-radius: 6px; margin-bottom: 22px; } .side-tag .arrow { font-size: 9px; } .tag-pos { background: var(--pos-bg); color: var(--pos); border: 1px solid var(--pos-line); } .tag-neg { background: var(--neg-bg); color: var(--neg); border: 1px solid var(--neg-line); } .side-facts { border-top: 1px solid var(--line); } .side-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); } .side-facts > div:last-child { border-bottom: none; } .side-facts dt { font-size: 13px; color: var(--muted); } .side-facts dd { font-family: var(--mono); font-size: 14px; font-weight: 500; text-align: right; } /* the pairing: the currency centred like every other figure, and which way it goes in a year as a pill hung beside it, so the pill never pulls it off centre */ .side-facts .pairing { position: relative; } .side-facts .pairing dd { color: var(--text); } .side-facts .pairing .pair-cur { position: relative; display: inline-block; } .side-facts .pairing .pair-rate { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.35; white-space: nowrap; } .side-facts .pairing dd.pos .pair-rate { color: var(--pos); background: var(--pos-bg); border: 1px solid var(--pos-line); } .side-facts .pairing dd.neg .pair-rate { color: var(--neg); background: var(--neg-bg); border: 1px solid var(--neg-line); } /* narrower cards: the pill drops "/yr" (the hover still says "a year") so it stays inside the card */ @media (max-width: 900px) { .side-facts .pairing .pr-yr { display: none; } } @media (max-width: 620px) { .side-facts .pairing .pair-rate { left: calc(100% + 5px); padding: 0 5px; font-size: 9.5px; } } /* the two cards sit flush side by side; VS floats on the seam between them */ .versus { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 3; } .versus span { font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--faint); border: 1px solid var(--line-2); border-radius: 999px; width: 46px; height: 46px; display: grid; place-items: center; background: var(--bg); } /* ---- equation ------------------------------------------------------------ */ .equation { margin-top: clamp(26px, 3.5vw, 40px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 4vw, 40px) clamp(18px, 3vw, 32px); text-align: center; } .eq-row { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 20px); flex-wrap: wrap; } .eq-mult { font-family: var(--mono); font-weight: 600; font-size: clamp(26px, 5.4vw, 54px); letter-spacing: -0.02em; } .eq-coin { width: clamp(38px, 5vw, 54px); height: clamp(38px, 5vw, 54px); } .eq-eq { font-size: clamp(22px, 3.4vw, 36px); color: var(--faint); font-weight: 300; } .eq-caption { margin: 22px auto 0; max-width: 620px; font-size: 14.5px; color: var(--text-2); line-height: 1.7; } .eq-caption strong { color: var(--pos); font-weight: 600; } /* ---- sections ------------------------------------------------------------ */ .section { padding: clamp(52px, 7vw, 88px) 0; } .section.alt { background: rgba(13,17,23,0.55); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .sec-head { margin-bottom: clamp(28px, 4vw, 42px); } .sec-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; } .sec-head h2 { font-size: clamp(24px, 3.6vw, 36px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; } .sec-sub { margin-top: 10px; color: var(--muted); font-size: 15.5px; max-width: 680px; } /* ---- ratio section ------------------------------------------------------- */ .rstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .rstat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } .rstat-k { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .rstat-v { font-family: var(--mono); font-weight: 600; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; } .rstat-s { font-size: 12.5px; color: var(--faint); margin-top: 10px; line-height: 1.5; } /* ---- table --------------------------------------------------------------- */ .table-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } table.cmp { width: 100%; border-collapse: collapse; } table.cmp th, table.cmp td { text-align: left; } table.cmp thead th { padding: 18px 22px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .th-asset { display: flex; align-items: center; gap: 10px; } .th-asset span { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--text); } .th-coin { width: 26px; height: 26px; } .th-b2 { background: rgba(174,235,140,0.06); } table.cmp tbody th { padding: 16px 22px; font-size: 14px; font-weight: 500; color: var(--text-2); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); width: 30%; } table.cmp tbody td { padding: 16px 22px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: middle; } table.cmp tbody td:last-child { border-right: none; } table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom: none; } table.cmp tbody tr:hover td, table.cmp tbody tr:hover th { background: rgba(255,255,255,0.014); } .td-b2 { background: rgba(174,235,140,0.045); } table.cmp tbody tr:hover .td-b2 { background: rgba(174,235,140,0.07); } .cmp .v { display: block; font-family: var(--mono); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; } .cmp .v.strong { font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; } .cmp .v.sm { font-size: 14px; font-family: var(--sans); font-weight: 500; } .cmp .sub { display: block; font-size: 12.5px; color: var(--faint); margin-top: 4px; } .cmp .sub.pos { color: var(--pos); } .cmp .sub.neg { color: var(--neg); } .table-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 22px; background: var(--panel-2); border-top: 1px solid var(--line); font-size: 12.5px; color: var(--faint); font-family: var(--mono); } /* ---- tracker ------------------------------------------------------------- */ .tracker { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3.5vw, 36px); margin-bottom: 16px; } .tracker-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; } .tr-label { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .tr-huge { font-family: var(--mono); font-weight: 600; font-size: clamp(34px, 6vw, 60px); letter-spacing: -0.03em; line-height: 1; } .tr-of { font-size: 13.5px; color: var(--faint); margin-top: 8px; } .tr-pct-block { text-align: right; } .tr-pct { font-family: var(--mono); font-weight: 600; color: var(--pos); font-size: clamp(26px, 4vw, 40px); letter-spacing: -0.02em; line-height: 1; } .bar { height: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #6FA964, var(--pos)); border-radius: 999px; transition: width 1.2s cubic-bezier(.22,1,.36,1); } .bar-scale { display: flex; justify-content: space-between; margin-top: 9px; font-size: 11.5px; color: var(--faint); font-family: var(--mono); } .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } .kpi-k { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .kpi-v { font-family: var(--mono); font-weight: 600; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; } .kpi-s { font-size: 12.5px; color: var(--faint); margin-top: 10px; } /* ---- charts -------------------------------------------------------------- */ /* ---- embedded pool chart ------------------------------------------------- Aspect-ratio rather than a fixed height so it does not letterbox on a phone or waste half a laptop screen. Dexscreener sets its own dark theme via the query string, so the frame only has to hold the shape. -------------------------------------------------------------------------- */ .chart-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .chart-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .chart-liq { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 14px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); } .chart-liq-main, .chart-liq-side { display: flex; flex-direction: column; gap: 4px; } .chart-liq-side { align-items: flex-end; } .chart-liq-k { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .chart-liq-v { font-family: var(--mono); font-size: clamp(22px, 3vw, 30px); font-weight: 600; color: var(--brand); line-height: 1; } .chart-liq-v2 { font-family: var(--mono); font-size: clamp(16px, 2vw, 20px); font-weight: 600; color: var(--text); line-height: 1; } .chart-liq-sub { font-size: 12px; color: var(--faint); } .chart-embed-note { margin: 14px 0 0; max-width: 74ch; font-size: 13px; line-height: 1.65; color: var(--muted); } .chart-embed-note a { color: var(--brand); text-decoration: none; white-space: nowrap; } .chart-embed-note a:hover { text-decoration: underline; } /* The framed terminal chart carries a trade window under it, so the frame takes a fixed height with room for both rather than a video's 16:9. */ .chart-embed { aspect-ratio: auto; height: 860px; } @media (max-width: 640px) { .chart-embed { height: 760px; } } .chart-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); } .chart-head { display: flex; justify-content: space-between; align-items: center; /* Row gap smaller than the column gap: when the two groups wrap onto separate lines they are one control panel stacked, not two sections. */ gap: 10px 18px; flex-wrap: wrap; margin-bottom: 18px; } .chart-head h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .chart-legend { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); } .chart-legend em { color: var(--faint); font-style: normal; } /* The hint goes on a phone. "Buyback & burn — marker size = amount destroyed" wrapped to two lines at 375px and became the tallest thing above the chart, which is the opposite of what a legend is for. The key itself still reads; what the sizes mean is a detail for a screen with room for it. */ @media (max-width: 700px) { .chart-legend em { display: none; } .chart-legend { gap: 12px; } } /* The burn key is a ring, not a bar: it stands for a point on the line rather than the line itself, and drawing it as another swatch made the two read as two series. */ /* The burn key is also its own switch. A legend entry that can be turned off is a pattern people already know from every charting tool, and it saves putting another control in a row that is crowded on a phone already. */ .lg-toggle { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; transition: opacity .15s; } .lg-toggle:hover { opacity: .8; } .lg-toggle[aria-pressed="false"] { opacity: .42; } /* hollow when off, so the state reads without relying on opacity alone */ .lg-toggle[aria-pressed="false"] .sw.burn { background: none; box-shadow: inset 0 0 0 2px var(--brand); } /* Pushed to the far end of the row rather than sitting in the gap after the toggle, so the legend reads as a key on the left and a count on the right instead of three things in a queue. Tabular figures: the number reloads on its own and digits of different widths made the row twitch. */ .chart-legend .lg-count { margin-left: auto; color: var(--faint); font-variant-numeric: tabular-nums; } .chart-legend .sw.burn { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--bg); } .sw { display: inline-block; width: 13px; height: 3px; border-radius: 2px; margin-right: 7px; vertical-align: middle; } .sw.pos { background: var(--pos); } .sw.neg { background: var(--neg); } .sw.dim { background: var(--faint); } .sw.brand { background: var(--brand); } /* chart range selector */ .ranges { display: flex; gap: 4px; flex-wrap: wrap; } .ranges button { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 5px 11px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .ranges button:hover:not(:disabled) { color: var(--text); border-color: var(--line-2); } /* denomination switch — BTC2 quoted in DUSD means its dollar line and its DUSD line tell different stories; this lets a reader see which is which */ /* No bottom margin any more — the head owns the space under the controls. */ .denoms { display: flex; gap: 6px; margin: 0; flex-wrap: wrap; } .denoms button { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 5px 11px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .denoms button:hover { color: var(--text); border-color: var(--line-2); } .denoms button.on { color: var(--brand); border-color: var(--brand-line); background: var(--brand-bg); } .denoms button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .ranges button.on { color: var(--brand); border-color: var(--brand-line); background: var(--brand-bg); } .ranges button:disabled { opacity: .35; cursor: not-allowed; } /* keeps the three supply rows reading as one block */ table.cmp tbody tr.grp-start th, table.cmp tbody tr.grp-start td { border-top: 1px solid var(--line-2); } table.cmp tbody tr.grp-end th, table.cmp tbody tr.grp-end td { border-bottom: 1px solid var(--line-2); } #supply-chart, #ratio-chart { width: 100%; overflow-x: auto; } #supply-chart svg, #ratio-chart svg { display: block; width: 100%; height: auto; min-width: 540px; } .chart-note { margin-top: 18px; font-size: 13.5px; color: var(--muted); line-height: 1.7; max-width: 780px; } .chart-note strong { color: var(--text-2); font-weight: 600; } /* ---- steps --------------------------------------------------------------- */ .steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .steps li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .step-n { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--brand); margin-bottom: 14px; } .steps h3 { font-size: 16px; font-weight: 650; margin-bottom: 9px; letter-spacing: -0.01em; } .steps p { font-size: 14px; color: var(--muted); line-height: 1.65; } .specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .spec { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; } .spec-k { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .spec-v { font-family: var(--mono); font-size: 19px; font-weight: 600; } /* ---- faq ----------------------------------------------------------------- */ .faq details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; } .faq summary { cursor: pointer; list-style: none; padding: 18px 22px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--brand); font-size: 20px; font-weight: 400; flex-shrink: 0; } .faq details[open] summary::after { content: '\2212'; } .faq p { padding: 0 22px 20px; font-size: 14.5px; color: var(--muted); line-height: 1.75; } /* ---- footer -------------------------------------------------------------- */ .footer { border-top: 1px solid var(--line); padding: clamp(40px, 5vw, 60px) 0 36px; background: rgba(13,17,23,0.6); } .foot-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); } .foot-links { display: flex; gap: 24px; } .foot-links a { color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 500; } .foot-links a:hover { color: var(--brand); } .contract { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 24px; } .contract[hidden] { display: none; } .ca-k { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .contract code { font-family: var(--mono); font-size: 13px; color: var(--text-2); word-break: break-all; } .legal { font-size: 12.5px; color: var(--faint); line-height: 1.8; margin-bottom: 14px; max-width: 900px; } .legal strong { color: var(--muted); font-weight: 600; } .copyright { font-size: 12.5px; color: var(--faint); margin-top: 22px; } /* ---- responsive ---------------------------------------------------------- */ @media (max-width: 1000px) { .rstats, .kpis, .steps, .specs { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .topnav { display: none; } /* With the nav gone it is brand, switch, Buy on one line. The 32px gap was sized for a bar with navigation in it and will not fit three items on a narrow phone, so it comes down along with the switch itself. */ .topbar-inner { gap: 10px; } /* the switch's own narrow sizes sit with the switch, further down: here they came before its base rule and lost to it, so phones got the desktop size */ } /* the two asset cards stay side by side as long as they can be read; only a genuinely narrow screen forces them to stack */ @media (max-width: 620px) { .duel { grid-template-columns: 1fr; } .versus { display: none; } } @media (max-width: 680px) { .rstats, .kpis, .steps, .specs { grid-template-columns: 1fr; } /* table collapses to stacked cards */ table.cmp thead { display: none; } table.cmp, table.cmp tbody, table.cmp tr, table.cmp th, table.cmp td { display: block; width: 100%; } table.cmp tbody tr { border-bottom: 1px solid var(--line-2); } table.cmp tbody tr:last-child { border-bottom: none; } table.cmp tbody th { width: 100%; border-right: none; background: var(--panel-2); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 11px 18px; } table.cmp tbody td { border-right: none; padding: 14px 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } table.cmp tbody td::before { content: attr(data-label); font-size: 12.5px; font-weight: 600; color: var(--muted); font-family: var(--sans); flex-shrink: 0; } table.cmp tbody td > .v { text-align: right; } table.cmp tbody td > .sub { width: 100%; text-align: right; } .tracker-top { flex-direction: column; align-items: flex-start; } .tr-pct-block { text-align: left; } /* No min-width, so no horizontal scrollbar. The charts switch to a squarer viewBox with larger type below this width — see CHART_NARROW in app.js — which is what makes fitting the screen legible rather than a shrunk-down desktop chart. Scrolling right to reach the newest point is the one thing a price chart must never ask for. */ #supply-chart svg, #ratio-chart svg { min-width: 0; } /* The chart runs to the card's edges on a phone. Thirty units of side padding is right for a paragraph and wrong for a picture: at 420px it was spending fourteen per cent of the screen on air either side of the one thing in the section anybody came to look at. The controls above it and the note below keep their inset, so the card still reads as a card — the chart is just the full width of it. */ .chart-card { padding: 18px 12px; } /* width:auto, not the 100% inherited from above. A percentage width resolves against the padded content box, so the negative margins slid the chart left without making it any wider — it has to be allowed to size itself for the margins to buy anything. */ #supply-chart, #ratio-chart { margin-inline: -12px; width: auto; } } /* ---- buy CTA ------------------------------------------------------------- */ /* no panel: he sits straight on the background like the choice figure above */ .cta { /* was a two-column grid around a portrait; the quote carries it alone now */ max-width: 680px; margin: 0 auto; text-align: center; } .cta-figure { margin: 0; } .cta-portrait { width: 100%; display: block; /* monochrome reads as editorial rather than as a meme drop-in */ filter: grayscale(1) contrast(1.06); /* a transparent cut-out needs no plate; it sits straight on the panel and is allowed to run past the bottom edge like a magazine figure */ margin-bottom: calc(clamp(24px, 4vw, 44px) * -1); align-self: end; } /* the source cut-out ends in a hard horizontal crop mid-body; fading the last stretch makes that read as a deliberate edge rather than a clipping bug */ .cta-portrait { -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%); mask-image: linear-gradient(to bottom, #000 80%, transparent 99%); } .cta-quote { font-size: clamp(24px, 4vw, 40px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 20px; } .cta-sub { font-size: 15.5px; color: var(--text-2); margin-bottom: 22px; max-width: 460px; } .cta-sub strong { color: var(--brand); font-family: var(--mono); font-weight: 600; } .cta-btn { margin-left: 0; } .cta-fine { font-size: 12px; color: var(--faint); line-height: 1.7; margin-top: 18px; max-width: 460px; } @media (max-width: 680px) { .cta { grid-template-columns: 1fr; text-align: center; } .cta-figure { max-width: 220px; margin: 0 auto; } .cta-sub, .cta-fine { margin-left: auto; margin-right: auto; } } /* ---- coin mark size parity ---------------------------------------------- Coin artwork varies in how much of its frame the solid circle fills (glow or padding around the edge makes it render smaller in an identical box). normaliseCoins() in app.js measures each file at runtime and sets this scale, so swapping in new artwork needs no CSS change. -------------------------------------------------------------------------- */ img.coin, img.climb-coin, img.eq-coin, img.th-coin, img.brand-mark, img.footer-logo { transform: scale(var(--coin-scale, 1)); } /* ---- hero: the climb ------------------------------------------------------ BTC2 on the left, levitating, with an arrow running to a static BTC1 on the right. The multiplier sits on the arrow because that is the whole argument: how far BTC2 has to travel to reach parity. -------------------------------------------------------------------------- */ .hero { padding: clamp(40px, 6vw, 76px) 0 clamp(44px, 6vw, 80px); border-bottom: 1px solid var(--line); } .climb { display: grid; grid-template-columns: 1fr minmax(150px, 1.2fr) 1fr; /* named areas rather than source order: stacked on mobile the raw order puts both coins first and both prices after, detaching each price from its coin */ grid-template-areas: ". mult . " "c2 gap c1" "cta cta cta " "s2 sp s1"; align-items: center; gap: clamp(6px, 1.6vw, 18px) clamp(8px, 2vw, 24px); margin-top: clamp(30px, 4.5vw, 52px); } .area-c2 { grid-area: c2; } .area-gap { grid-area: gap; } .area-c1 { grid-area: c1; } .area-cta { grid-area: cta; } .area-cta1 { grid-area: cta1; } .area-s2 { grid-area: s2; } .area-sp { grid-area: sp; } .area-mult { grid-area: mult; } .area-s1 { grid-area: s1; } .climb-coinwrap { display: flex; justify-content: center; } /* the multiplier now lives in the gap where the arrow used to be, so it needs to sit centred in its own column rather than spanning the row */ .climb-gap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .climb-gap .climb-mult { white-space: nowrap; } /* the ratio grows a digit whenever BTC2 falls, so it is sized against the column it sits in rather than a fixed step */ /* Below this the three columns stop fitting. The prices are the stubborn part: "$0.000332" cannot wrap usefully, so each outer column has a hard min-content floor, and the ratio in the middle grows a digit every time BTC2 falls. Measured at 390px the row wanted 389px inside 354px of usable width, so the type steps down and the gutter narrows rather than the layout breaking. */ @media (max-width: 460px) { .container { padding: 0 13px; } .climb { gap: 4px 5px; } .climb-gap .climb-mult { font-size: clamp(13px, 4.4vw, 20px); } .climb-mult-label { font-size: 9px; letter-spacing: .05em; } .climb-price { font-size: clamp(14px, 4.5vw, 21px); } .climb-coin { width: clamp(48px, 15vw, 66px); } } .climb-cta { display: flex; justify-content: center; min-height: 0; } .area-cta { justify-self: center; } /* orange here is deliberate: it is UI chrome, not an asset colour, so it cannot be misread as Bitcoin2 green or a price move */ .ca-chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; max-width: 100%; margin-top: clamp(8px, 1.4vw, 14px); padding: 6px 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); background: var(--brand-bg); border: 1px solid var(--brand-line); border-radius: 999px; transition: background .15s, border-color .15s, color .15s; } .ca-chip[hidden] { display: none; } .ca-chip:hover { border-color: var(--brand); color: var(--text); } .ca-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .ca-chip-k { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--brand); flex-shrink: 0; } .ca-chip-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* one address form now — the chip spans the full width since the second chip went, so there is room for the DUSD tail on a phone too */ .ca-short { display: none; } .ca-chip-act { font-family: var(--sans); font-size: 10.5px; font-weight: 600; color: var(--brand); flex-shrink: 0; padding-left: 8px; border-left: 1px solid var(--brand-line); } .ca-chip-b1 { background: rgba(223,117,139,0.07); border-color: var(--neg-line); } .ca-chip-b1:hover { border-color: var(--neg); } .ca-chip-b1 .ca-chip-k, .ca-chip-b1 .ca-chip-act { color: var(--neg); } .ca-chip-b1 .ca-chip-act { border-left-color: var(--neg-line); } .ca-chip-b1:focus-visible { outline-color: var(--neg); } .ca-chip-b1.is-copied { background: var(--neg); border-color: var(--neg); color: #fff; } .ca-chip-b1.is-copied .ca-chip-k, .ca-chip-b1.is-copied .ca-chip-act { color: #fff; border-left-color: rgba(255,255,255,0.3); } .ca-chip.is-copied { background: var(--brand); border-color: var(--brand); color: #1A0E00; } .ca-chip.is-copied .ca-chip-k, .ca-chip.is-copied .ca-chip-act { color: #1A0E00; border-left-color: rgba(26,14,0,0.25); } .climb-side { text-align: center; } /* must stay in the grid: display:none removes the cell entirely and shifts the Bitcoin1 column left into the middle */ .climb-spacer { visibility: hidden; } .coin-float { animation: levitate 6.5s ease-in-out infinite; } /* the coin itself carries --coin-scale, so the float lives on the wrapper */ @keyframes levitate { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .climb-coin { width: clamp(74px, 12vw, 128px); height: auto; } .coin-float .climb-coin { filter: drop-shadow(0 10px 22px rgba(247,147,26,0.22)); } .climb-price { font-family: var(--mono); font-weight: 600; font-size: clamp(22px, 3.6vw, 40px); letter-spacing: -0.025em; line-height: 1.1; margin-top: clamp(16px, 2.5vw, 26px); /* breaks at the space before a unit, "0.0₇116" over "BTC1", and only splits a run that alone is wider than the card — break-all cut "BTC1" in two */ overflow-wrap: anywhere; } .climb-name { font-size: clamp(14px, 1.8vw, 18px); font-weight: 700; letter-spacing: -0.01em; margin-top: 6px; } .climb-name .num { color: var(--btc); } .climb-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px; border-radius: 6px; margin-top: 10px; } .climb-tag .arrow { font-size: 8px; } /* middle column: multiplier above, arrow beneath */ .climb-gap { display: flex; align-items: center; justify-content: center; align-self: center; } .climb-callout { text-align: center; margin-bottom: 4px; } .climb-mult { font-family: var(--mono); font-weight: 600; font-size: clamp(18px, 3vw, 34px); letter-spacing: -0.03em; color: var(--pos); line-height: 1.05; text-align: center; word-break: break-all; } .climb-mult-label { font-size: clamp(10px, 1.15vw, 12.5px); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 7px; text-align: center; } .climb-arrow { width: 100%; max-width: 230px; height: auto; } /* The comparison only works if you can see both sides at once, so on a phone the two coins stay side by side and the whole block is sized to sit inside a single viewport rather than stacking into a scroll. */ @media (max-width: 720px) { .climb { grid-template-columns: 1fr auto 1fr; /* the coin columns are far too narrow here to hold the address chip, so it spans the full width below the pair rather than under Bitcoin2 */ grid-template-areas: "mult mult mult" "c2 gap c1" "s2 sp s1" "cta cta cta "; gap: 4px 6px; margin-top: clamp(16px, 3vw, 28px); } .climb-coin { width: clamp(56px, 17vw, 74px); } .climb-gap { padding: 0 2px; } .climb-arrow { width: 100%; max-width: 74px; } .climb-callout { margin-bottom: 10px; } .climb-mult { font-size: clamp(20px, 6.4vw, 30px); } .climb-price { font-size: clamp(19px, 5.6vw, 26px); margin-top: 12px; } .climb-name { font-size: 13px; } .climb-tag { font-size: 10px; padding: 4px 9px; } /* 40px minimum so it is a real tap target, not a mouse target */ .ca-chip { padding: 12px 9px; gap: 6px; font-size: 11.5px; max-width: 100%; } .ca-chip-act { padding-left: 6px; } .climb-cta { margin-top: 4px; } .chg { font-size: 11.5px; padding: 2px 7px; min-height: 22px; } } /* very narrow phones: trim further rather than break the pairing */ @media (max-width: 380px) { .climb-coin { width: 52px; } .climb-arrow { max-width: 56px; } .climb-price { font-size: 17px; } .climb-tag { font-size: 9px; letter-spacing: .03em; padding: 4px 7px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } @media (prefers-reduced-motion: reduce) { .coin-float { animation: none; } } /* ---- the case: pitch blocks --------------------------------------------- Each pitch is one claim with the two assets underneath it, BTC2 always on the left. Reads top to bottom as an argument rather than a spec sheet. -------------------------------------------------------------------------- */ /* ---- BTC2 / DUSD pair block --------------------------------------------- The trading pair as the hero's closing statement: both marks, the ticker, and DUSD's own live market data — because DUSD is a traded token, not a dollar peg, so its price moves BTC2's dollar value. -------------------------------------------------------------------------- */ .pairblock { margin: clamp(28px, 4vw, 44px) auto 0; max-width: 760px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; border: 1px solid var(--brand-line); background: var(--brand-bg); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); } .pair-marks { display: flex; align-items: center; gap: clamp(10px, 2vw, 18px); } .pair-coin { width: clamp(52px, 7vw, 72px); height: auto; } /* The DUSD mark is a flame-over-disc composition that fills only 73% of its frame's height, against the BTC2 coin's 100%. Scaling by 1/0.73 makes the two marks the same visible height. It is sized by hand rather than through normaliseCoins() because that matches disc widths, which would blow the flames up out of proportion. */ .pair-dusd { width: clamp(71px, 9.6vw, 99px); } .pair-slash { font-size: clamp(30px, 4.5vw, 46px); font-weight: 200; color: var(--faint); line-height: 1; } .pair-ticker { font-family: var(--mono); font-weight: 600; font-size: clamp(17px, 2.4vw, 22px); letter-spacing: .02em; } .pair-slash-sm { color: var(--faint); } .pair-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--brand-line); width: 100%; } .ps { display: flex; align-items: center; gap: 8px; } .ps-k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .ps-v { font-family: var(--mono); font-size: 14px; font-weight: 500; } .pair-stats .chg { margin-top: 0; padding: 2px 7px; font-size: 11.5px; min-height: 0; } .pair-stats .chg:empty { padding: 0; } .pair-link { font-size: 13px; color: var(--brand); text-decoration: none; font-weight: 500; } .pair-link:hover { text-decoration: underline; } .pair-link[hidden] { display: none; } .pitches { list-style: none; display: grid; gap: 0; } /* The pitches read as one continuous argument rather than nine stacked cards: no panel, just a hairline rule between them. The comparison boxes inside keep their frames, because that is where the eye actually compares. */ .pitch { padding: clamp(26px, 3.6vw, 42px) 0; border-top: 1px solid var(--line); } .pitch:first-child { border-top: none; padding-top: clamp(6px, 1vw, 12px); } .pitch-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; } .pitch-n { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--brand); letter-spacing: .04em; } .pitch h3 { font-size: clamp(19px, 2.6vw, 26px); font-weight: 700; letter-spacing: -0.02em; } .pitch-claim { font-size: clamp(16px, 2.1vw, 21px); color: var(--text); line-height: 1.55; margin-bottom: 22px; max-width: 760px; } .pitch-claim strong { color: var(--brand); font-weight: 600; font-family: var(--mono); } .pvs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pv { border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; } .pv-b2 { border-color: var(--pos-line); background: var(--pos-bg); } .pv-b1 { border-color: var(--neg-line); background: var(--neg-bg); } /* used where the comparison is honestly a draw, so it is not scored red */ .pv-tie { border-color: var(--line-2); background: rgba(255,255,255,0.02); } .pv-k { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .pv-v { font-family: var(--mono); font-weight: 600; font-size: clamp(20px, 3vw, 30px); letter-spacing: -0.02em; line-height: 1.1; word-break: break-word; } .pv-s { font-size: 12.5px; color: var(--faint); line-height: 1.5; } /* ---- 24h change badge ---------------------------------------------------- */ .chg { /* block-level flex, not inline-flex: an inline box adds a baseline gap that differs between the filled and the empty badge, which knocked the two hero columns 7px out of line */ display: flex; width: fit-content; align-items: center; justify-content: center; gap: 4px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; padding: 3px 9px; border-radius: 6px; margin-top: 8px; /* the slot is reserved even when empty: BTC2 has no 24h change pre-launch, and collapsing its badge would push the two columns out of alignment */ min-height: 26px; } .climb-side .chg { margin-left: auto; margin-right: auto; } .chg.up { color: var(--pos); background: var(--pos-bg); } .chg.down { color: var(--neg); background: var(--neg-bg); } .chg.flat { color: var(--muted); background: rgba(255,255,255,0.03); } .chg:empty { background: transparent; } .tk .chg { display: inline-flex; margin: 0; padding: 2px 6px; font-size: 11.5px; min-height: 0; } .tk .chg:empty { padding: 0; } /* top-align both columns so the coins, prices and labels line up across the pair regardless of which side has a change badge */ .climb-side { align-self: start; } .pitch-note { margin-top: 20px; font-size: 13.5px; color: var(--muted); line-height: 1.75; max-width: 780px; } .pitch-note strong { color: var(--text-2); font-weight: 600; } @media (max-width: 620px) { .pvs { grid-template-columns: 1fr; } } /* ---- closing CTA --------------------------------------------------------- The Da Vinci block now sits high up, so the argument needs somewhere to land at the end rather than dead-ending into the FAQ. -------------------------------------------------------------------------- */ .closing { padding-top: 0; } .closeband { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); flex-wrap: wrap; justify-content: center; text-align: center; border: 1px solid var(--brand-line); background: linear-gradient(180deg, var(--brand-bg), rgba(247,147,26,0.03)); border-radius: var(--radius); padding: clamp(24px, 3.5vw, 38px); } .closeband-marks { display: flex; align-items: center; gap: 12px; } .closeband-coin { width: 46px; height: auto; } .closeband-dusd { width: 63px; } .closeband-copy { flex: 1 1 260px; text-align: left; } .closeband-copy h3 { font-size: clamp(20px, 2.8vw, 28px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; } .closeband-copy p { font-size: 15px; color: var(--text-2); } .closeband-copy strong { color: var(--brand); font-family: var(--mono); font-weight: 600; } .closeband-btn { margin-left: 0; flex-shrink: 0; } @media (max-width: 680px) { .closeband { flex-direction: column; } .closeband-copy { text-align: center; flex-basis: auto; } } /* ---- night sky ------------------------------------------------------------ Colour fields for depth, crisp stars over the top. Stars alone sat flat on black and read as dust; the wash alone had nothing to catch the eye. The stars are SVG tiles, not CSS gradients. A hundred-odd radial-gradients spread over four animated layers made the page slow enough to stall a screenshot; a tile is rasterised once and repeated. -------------------------------------------------------------------------- */ .sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse 120% 80% at 50% 0%, #0E1420 0%, #070A0F 55%, #05070A 100%); } /* --- soft colour, well behind the stars --- */ .aurora { position: absolute; border-radius: 50%; mix-blend-mode: screen; } .aurora-a { width: 78vw; height: 78vw; min-width: 620px; min-height: 620px; top: -34vw; left: -22vw; background: radial-gradient(circle at 50% 50%, rgba(247,147,26,0.07) 0%, rgba(247,147,26,0.025) 40%, transparent 70%); animation: float-a 42s ease-in-out infinite; } .aurora-b { width: 66vw; height: 66vw; min-width: 520px; min-height: 520px; top: -16vw; right: -24vw; background: radial-gradient(circle at 50% 50%, rgba(174,235,140,0.025) 0%, rgba(174,235,140,0.008) 42%, transparent 72%); animation: float-b 50s ease-in-out infinite; } .aurora-c { width: 92vw; height: 92vw; min-width: 700px; min-height: 700px; top: 36vh; left: 4vw; background: radial-gradient(circle at 50% 50%, rgba(72,101,255,0.055) 0%, rgba(72,101,255,0.018) 44%, transparent 72%); animation: float-c 58s ease-in-out infinite; } .aurora-d { width: 70vw; height: 70vw; min-width: 540px; min-height: 540px; bottom: -28vw; right: -12vw; background: radial-gradient(circle at 50% 50%, rgba(247,147,26,0.05) 0%, rgba(223,117,139,0.018) 48%, transparent 74%); animation: float-d 66s ease-in-out infinite; } @keyframes float-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6vw,4vh,0) scale(1.12); } } @keyframes float-b { 0%,100% { transform: translate3d(0,0,0) scale(1.06); } 50% { transform: translate3d(-7vw,6vh,0) scale(1); } } @keyframes float-c { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(5vw,-5vh,0) scale(1.15); } } @keyframes float-d { 0%,100% { transform: translate3d(0,0,0) scale(1.08); } 50% { transform: translate3d(-6vw,-4vh,0) scale(1); } } /* --- the stars --- Four-point glints rather than circles: a disc at this size just reads as a dot. Spread across five layers with different twinkle timings so they sparkle out of step with each other instead of pulsing as one sheet. */ .stars { position: absolute; inset: -12%; background-repeat: repeat; } .stars-a { background-image: url("data:image/svg+xml,"); background-size: 340px 340px; opacity: .95; animation: drift-a 150s linear infinite, twinkle 4.2s ease-in-out infinite 0s; } .stars-b { background-image: url("data:image/svg+xml,"); background-size: 300px 300px; opacity: .9; animation: drift-b 190s linear infinite, twinkle 5.6s ease-in-out infinite -1.3s; } .stars-c { background-image: url("data:image/svg+xml,"); background-size: 380px 380px; opacity: .85; animation: drift-c 230s linear infinite, twinkle 7.1s ease-in-out infinite -2.6s; } .stars-d { background-image: url("data:image/svg+xml,"); background-size: 260px 260px; opacity: .8; animation: drift-d 170s linear infinite, twinkle 9.4s ease-in-out infinite -4.1s; } .stars-e { background-image: url("data:image/svg+xml,"); background-size: 440px 440px; opacity: .7; animation: drift-e 260s linear infinite, twinkle 11.8s ease-in-out infinite -5.5s; } @keyframes drift-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(-7%, 5%, 0); } } @keyframes drift-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(6%, -4%, 0); } } @keyframes drift-c { from { transform: translate3d(0,0,0); } to { transform: translate3d(-5%, -6%, 0); } } @keyframes drift-d { from { transform: translate3d(0,0,0); } to { transform: translate3d(8%, 4%, 0); } } @keyframes drift-e { from { transform: translate3d(0,0,0); } to { transform: translate3d(-4%, 7%, 0); } } @keyframes twinkle { 0%, 100% { opacity: 1; } 45% { opacity: .25; } 55% { opacity: .35; } } /* ---- shooting stars ------------------------------------------------------ Rare on purpose. Each one is visible for roughly a tenth of its cycle and then waits, so they arrive one at a time and never together — a sky that streaks constantly reads as a screensaver. The head is the bright end, the tail fades to nothing, and the whole thing lives inside .sky, which clips, so none of it can widen the page. -------------------------------------------------------------------------- */ .shoot { position: absolute; width: clamp(90px, 12vw, 170px); height: 1px; border-radius: 1px; opacity: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,224,184,0.35) 55%, rgba(255,255,255,0.8) 100%); will-change: transform, opacity; } .shoot-a { top: 46%; left: -14%; animation: shoot 19s ease-in infinite 3s; } .shoot-b { top: 68%; left: -18%; animation: shoot 27s ease-in infinite 11s; } .shoot-c { top: 32%; left: -10%; animation: shoot 34s ease-in infinite 22s; } @keyframes shoot { 0% { transform: rotate(-18deg) translateX(0); opacity: 0; } 2% { opacity: .55; } 9% { opacity: .5; } 12% { opacity: 0; } 13%, 100% { transform: rotate(-18deg) translateX(78vw); opacity: 0; } } /* vignette last, so the edges settle and the middle stays brightest */ .sky::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 95% 75% at 50% 38%, transparent 42%, rgba(3,5,8,0.6) 100%); } @media (prefers-reduced-motion: reduce) { .aurora, .stars, .shoot { animation: none; } .shoot { opacity: 0; } } /* ---- scroll reveals ------------------------------------------------------- The hidden start state is applied by JS (html.reveal-on), never by default. If the script fails, never runs, or the browser lacks what it needs, the page renders fully visible instead of blank. -------------------------------------------------------------------------- */ .reveal-on [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--reveal-delay, 0ms); } .reveal-on [data-reveal].shown { opacity: 1; transform: none; } /* ---- cursor spotlight ----------------------------------------------------- Desktop pointers only: a soft light tracking the cursor across the hero. -------------------------------------------------------------------------- */ .spotlight { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease; background: radial-gradient( 420px circle at var(--mx, 50%) var(--my, 40%), rgba(247,147,26,0.10) 0%, rgba(247,147,26,0.05) 35%, transparent 68%); } .hero { position: relative; } .hero > .container { position: relative; z-index: 1; } .spotlight.lit { opacity: 1; } @media (hover: none), (max-width: 860px) { .spotlight { display: none; } } /* ---- burn pulse ----------------------------------------------------------- Fires when the burn tracker reports newly destroyed supply, so the mechanic is something you see rather than only read. -------------------------------------------------------------------------- */ @keyframes burnpulse { 0% { filter: drop-shadow(0 10px 22px rgba(247,147,26,0.22)); transform: scale(1); } 35% { filter: drop-shadow(0 0 34px rgba(174,235,140,0.85)); transform: scale(1.06); } 100% { filter: drop-shadow(0 10px 22px rgba(247,147,26,0.22)); transform: scale(1); } } .burned .climb-coin { animation: burnpulse 1.5s ease-out; } @media (prefers-reduced-motion: reduce) { .reveal-on [data-reveal] { opacity: 1; transform: none; transition: none; } .spotlight { display: none; } .burned .climb-coin { animation: none; } } /* ---- the beats ------------------------------------------------------------ The narrative bridge between the hero and the detail: three contrasts, each sliding in from alternating sides as you reach it. Deliberately typographic rather than panelled — these are statements, not data. -------------------------------------------------------------------------- */ .beats { padding: clamp(20px, 5vw, 56px) 0 clamp(40px, 6vw, 80px); } .beat { max-width: 700px; padding: clamp(30px, 5vw, 64px) 0; border-top: 1px solid var(--line); } .beat:first-child { border-top: none; } .beat-l { margin-right: auto; text-align: left; } .beat-r { margin-left: auto; text-align: right; } .beat-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 16px; } .beat-line { font-size: clamp(28px, 5.6vw, 54px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 20px; } /* inherits the heading's face — it was switching to mono mid-sentence */ .hl-brand { color: var(--brand); } .beat-body { font-size: clamp(15px, 1.9vw, 17.5px); color: var(--muted); line-height: 1.75; max-width: 560px; } .beat-r .beat-body { margin-left: auto; } .beat-body strong { color: var(--text-2); font-weight: 600; } .beat-pair { display: flex; gap: clamp(20px, 4vw, 48px); margin-top: 28px; flex-wrap: wrap; } .beat-r .beat-pair { justify-content: flex-end; } .beat-stat { display: flex; flex-direction: column; gap: 5px; } .beat-stat em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .beat-stat b { font-family: var(--mono); font-weight: 600; font-size: clamp(20px, 3vw, 28px); letter-spacing: -0.02em; } .beat-stat i { font-style: normal; font-size: 12.5px; color: var(--faint); } /* directional entrance: the side it comes from matches the side it sits on */ .reveal-on .beat-l[data-reveal] { transform: translateX(-58px); } .reveal-on .beat-r[data-reveal] { transform: translateX(58px); } .reveal-on .beat[data-reveal] { transition-duration: .85s; } .reveal-on .beat[data-reveal].shown { transform: none; } @media (max-width: 700px) { /* the anchoring holds on a phone; only the travel distance shrinks */ .reveal-on .beat-l[data-reveal] { transform: translateX(-30px); } .reveal-on .beat-r[data-reveal] { transform: translateX(30px); } } /* ---- the choice ----------------------------------------------------------- The concession before the ask: both are bought for the same reason, so pick the better one. Unattributed portrait — a generic figure delivering a line, with no name and nothing implying a real person endorses this. -------------------------------------------------------------------------- */ .choice { padding-bottom: 0; } .choicewrap { /* single column since the portrait went — the line is the whole point */ max-width: 720px; margin: 0 auto; text-align: center; } .choice-head { font-size: clamp(28px, 5.2vw, 50px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; } .choice-sub { font-size: clamp(15px, 2vw, 18px); color: var(--muted); margin-top: 14px; max-width: 460px; } .choice-line { font-size: clamp(20px, 3.2vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin-top: 26px; } .choice-strong { color: var(--brand); } .choice-figure { margin: 0; } .choice-portrait { width: 100%; display: block; filter: grayscale(1) contrast(1.05); /* the cut-out ends in a hard crop; fading it reads as intent, not a bug */ -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%); mask-image: linear-gradient(to bottom, #000 76%, transparent 99%); } @media (max-width: 760px) { .choicewrap { grid-template-columns: 1fr; } .choice-figure { max-width: 260px; margin: 0 auto; order: -1; } .choice-copy { text-align: center; } .choice-sub { margin-left: auto; margin-right: auto; } } /* ---- the two assets stay side by side on a phone ------------------------- Stacking them puts one card off screen, which defeats a comparison. Below 620px the cards compress instead: label above value, smaller marks, tighter padding — but always both in view at once. -------------------------------------------------------------------------- */ @media (max-width: 620px) { .duel { grid-template-columns: 1fr 1fr; gap: 8px; } .versus { display: none; } .side { padding: 15px 12px; } .side-head { gap: 7px; margin-bottom: 13px; } .duel .side-head .coin { width: 34px; height: 34px; } .side-name { font-size: 14px; } .side-ticker { font-size: 10px; line-height: 1.3; } .side-price { font-size: clamp(17px, 5.4vw, 22px); margin-bottom: 9px; } .side .chg { font-size: 10.5px; padding: 2px 6px; min-height: 20px; } .side-tag { font-size: 9px; padding: 4px 7px; margin-bottom: 14px; letter-spacing: .03em; } .side-facts > div { flex-direction: column; align-items: center; gap: 2px; padding: 9px 0; } .side-facts dt { font-size: 10.5px; line-height: 1.3; } .side-facts dd { font-size: 12px; text-align: center; } } /* The chart is the point of this section, so the pair sits under it as a compact footnote: one horizontal strip rather than the full block. */ .pair-lead { font-size: 13.5px; color: var(--muted); margin: 30px 0 10px; } #ratio .pairblock { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; gap: 12px 20px; padding: 14px 18px; margin: 0; } #ratio .pair-marks { gap: 7px; } #ratio .pair-coin { width: 30px; } #ratio .pair-dusd { width: 41px; } #ratio .pair-slash { font-size: 19px; } #ratio .pair-ticker { font-size: 13.5px; } #ratio .pair-stats { border-top: none; padding-top: 0; margin-top: 0; width: auto; flex: 1 1 auto; justify-content: flex-start; gap: 8px 18px; } #ratio .ps-k { font-size: 10px; } #ratio .ps-v { font-size: 12.5px; } #ratio .pair-stats .chg { font-size: 10.5px; padding: 1px 6px; } #ratio .pair-link { font-size: 12px; margin-left: auto; } /* ---- the pair board ------------------------------------------------------- BTC/USD against BTC2/DUSD under the pair strip. Two rows in one frame, the pair on the left and its base and quote beside it, each leg carrying the duel's own inflationary/deflationary tag. The shrinking row gets the faintest wash of the positive green so the eye lands on it, and nothing louder. */ .pairboard { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; } /* The first beat carries it: the headline is the beat's own, outside the frame, and only the data is boxed. Left-aligned inside even though the beat is right-aligned — a table reads from the left whichever side it sits on. */ .beat .pairboard { margin-top: 28px; text-align: left; } .pb-row { display: grid; grid-template-columns: minmax(140px, 1fr) 1fr 1fr; gap: 14px 22px; align-items: start; padding: 16px 20px; border-top: 1px solid var(--line); } .pb-row:first-child { border-top: none; } .pb-good { background: rgba(174,235,140,0.045); } .pb-pair { font-family: var(--mono); font-size: clamp(20px, 2.6vw, 28px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; padding-top: 2px; } .pb-two { color: var(--brand); } .pb-leg { display: flex; flex-direction: column; align-items: flex-start; } .pb-role { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .pb-name { font-size: 15px; font-weight: 600; margin: 2px 0 8px; } .pb-leg .side-tag { margin: 0 0 8px; } .pb-fig { font-family: var(--mono); font-size: 15px; font-weight: 600; } .pb-fig.pos { color: var(--pos); } .pb-fig.neg { color: var(--neg); } .pb-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; } @media (max-width: 640px) { .pb-row { grid-template-columns: 1fr 1fr; } .pb-pair { grid-column: 1 / -1; } } @media (max-width: 620px) { #ratio .pair-link { margin-left: 0; } } /* ---- scroll progress ------------------------------------------------------ Sits above the sticky header so it reads as a page-level indicator rather than part of the nav. -------------------------------------------------------------------------- */ .scrollprog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; background: rgba(255,255,255,0.04); } .scrollprog-fill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #C86F00 0%, var(--brand) 55%, #FFC061 100%); box-shadow: 0 0 10px rgba(247,147,26,0.45); transform: scaleX(0); transform-origin: left center; will-change: transform; } /* ---- the hero arrow moves ------------------------------------------------- A short bright segment runs the length of the line toward Bitcoin1, with the head nudging forward on the same beat. Only stroke-dashoffset and a transform animate, so it is cheap and never triggers layout. -------------------------------------------------------------------------- */ /* The pulse eases out of Bitcoin2 and decelerates into Bitcoin1 rather than sliding at a constant rate, and it rests between passes instead of looping straight back — a travelling highlight on a permanent conveyor belt reads as a loading bar. The dash is longer than before and its own gradient fades both ends, so it arrives and departs rather than switching on and off. */ .climb-arrow .arrow-base { opacity: .9; } .climb-arrow .arrow-flow { stroke-dasharray: 34 172; animation: arrow-flow 3.6s cubic-bezier(.65, 0, .2, 1) infinite; } @keyframes arrow-flow { 0% { stroke-dashoffset: 206; opacity: 0; } 12% { opacity: 1; } 62% { stroke-dashoffset: 0; opacity: 1; } 74%, 100% { stroke-dashoffset: 0; opacity: 0; } } /* the head answers when the pulse lands, then settles */ .climb-arrow .arrow-head { transform-origin: 182px 12px; animation: arrow-land 3.6s cubic-bezier(.65, 0, .2, 1) infinite; } @keyframes arrow-land { 0%, 52% { transform: translateX(0) scale(1); opacity: .72; } 66% { transform: translateX(3px) scale(1.1); opacity: 1; } 80%, 100% { transform: translateX(0) scale(1); opacity: .72; } } @media (prefers-reduced-motion: reduce) { .climb-arrow .arrow-flow { animation: none; opacity: 0; } .climb-arrow .arrow-head { animation: none; } } /* the pre-launch chart placeholder has no axis to keep legible, so it should fit the container rather than inherit the scrolling min-width */ #ratio-chart.is-empty svg { min-width: 0; } /* ---- ratio stats: context under the chart, not a wall before it ----------- */ /* five cards here, not the shared four — total liquidity is the number every wallet and aggregator gets wrong, so it belongs beside the market stats */ #ratio .rstats { margin: 22px 0 0; gap: 10px; grid-template-columns: repeat(5, 1fr); } #ratio .rstat { padding: 15px 16px; } #ratio .rstat-k { font-size: 10.5px; margin-bottom: 8px; } #ratio .rstat-v { font-size: clamp(17px, 2.4vw, 24px); } #ratio .rstat-s { font-size: 11.5px; margin-top: 7px; } @media (max-width: 620px) { /* two up, so four cards cost half a screen instead of a whole one */ #ratio .rstats { grid-template-columns: 1fr 1fr; } } /* ---- the two cards line up row for row ------------------------------------ Shortening the BTC2 ticker stops it wrapping to two lines, which was pushing that whole card 13px down against its neighbour. Subgrid then makes the alignment structural rather than a coincidence of text length: both cards share the same eight rows, so nothing can drift again if the copy changes. Scoped behind @supports, so a browser without it just falls back to the previous flow. -------------------------------------------------------------------------- */ @supports (grid-template-rows: subgrid) { .duel { /* --facts is the number of rows in .side-facts. It is declared once and read by both rules below, because they have to agree: the parent must define a track for every fact, and the child must span exactly that many. When they disagreed the surplus facts had no track of their own and stacked on top of each other in the last one, which is silent — nothing errors, the rows just render at the same y. Change this number when you add or remove a fact and both sides follow. */ --facts: 8; grid-template-rows: auto auto auto auto repeat(var(--facts), auto); } .duel .side { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; align-content: start; } .duel .side-facts { grid-row: span var(--facts); display: grid; grid-template-rows: subgrid; } } /* ---- the two assets sit centred ------------------------------------------- The beats anchor left, right, left; this one lands in the middle so the head-to-head reads as the point they converge on rather than another one-sided statement. -------------------------------------------------------------------------- */ #duel .sec-head { text-align: center; } #duel .sec-sub { margin-left: auto; margin-right: auto; } #duel .duel { max-width: 880px; margin-left: auto; margin-right: auto; } /* ---- head-to-head cards, centred ------------------------------------------ Everything runs down a centre axis: mark, name, price, tag, then each fact as label over value. Reads as two columns being weighed against each other rather than two left-aligned lists. -------------------------------------------------------------------------- */ .duel .side { text-align: center; } .duel .side-head { flex-direction: column; align-items: center; gap: 10px; } .duel .side-price { text-align: center; } .duel .chg, .duel .side-tag { margin-left: auto; margin-right: auto; } .duel .side-facts > div { flex-direction: column; align-items: center; gap: 3px; } .duel .side-facts dt, .duel .side-facts dd { text-align: center; } /* the figure weighing the two up, under the head-to-head */ .think-line { margin: clamp(30px, 5vw, 56px) 0 0; text-align: center; font-size: clamp(20px, 3vw, 30px); font-weight: 650; letter-spacing: -0.02em; color: var(--text); } /* the portrait that used to sit here was an unlicensed likeness of a real person; the line does the work on its own and reads better for it */ .duel-think img { width: clamp(160px, 27vw, 250px); display: block; /* mirrored so he is looking back at Bitcoin2, which sits to his left */ transform: scaleX(-1); filter: grayscale(1) contrast(1.06); -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%); mask-image: linear-gradient(to bottom, #000 76%, transparent 99%); } /* orange numerals in the ratio stat label, matching the marks elsewhere */ .rstat-k .num { color: var(--brand); } /* ---- compact the head-to-head cards --------------------------------------- They were running ~790px tall on desktop for eight short rows of data. Tighter padding, smaller marks and less air between rows, without touching the type sizes that carry the comparison. -------------------------------------------------------------------------- */ .duel .side { padding: clamp(16px, 2.2vw, 22px) clamp(14px, 2vw, 20px); } .duel .side-head { gap: 7px; margin-bottom: 12px; } .duel .side-head .coin { width: 40px; height: 40px; } .duel .side-name { font-size: clamp(15px, 2vw, 18px); } .duel .side-price { font-size: clamp(20px, 3.2vw, 30px); margin-bottom: 6px; } .duel .chg { margin-top: 4px; min-height: 21px; } .duel .side-tag { margin-top: 8px; margin-bottom: 12px; } .duel .side-facts > div { padding: 7px 0; gap: 2px; } .duel .side-facts dt { font-size: 12px; } .duel .side-facts dd { font-size: 13.5px; } @media (max-width: 620px) { .duel .side { padding: 13px 10px; } .duel .side-head .coin { width: 32px; height: 32px; } .duel .side-facts > div { padding: 6px 0; } } /* ---- compact the cards further ------------------------------------------- The 471px was mostly two things: a stacked header (70px) and four fact rows at ~58px each. The header becomes a centred row, and the rows lose the inherited 1.6 body line-height, which is generous for a label over a value. -------------------------------------------------------------------------- */ .duel .side-head { flex-direction: row; justify-content: center; align-items: center; gap: 10px; margin-bottom: 10px; } .duel .side-head > div { text-align: left; } .duel .side-facts > div { padding: 5px 0; gap: 1px; } .duel .side-facts dt { line-height: 1.25; } .duel .side-facts dd { line-height: 1.3; } .duel .side-price { line-height: 1.05; } @media (max-width: 620px) { .duel .side-head { gap: 8px; margin-bottom: 9px; } .duel .side-facts > div { padding: 4px 0; } } /* ---- facts evenly between their lines ------------------------------------- The facts share the cards' grid tracks, and with them the grid's gap, which fell after each fact's line: every label sat well below the line above it, every value just above the line below, and the first fact had none of that space. The facts take no gap; the same space is split above and below each one instead, so every fact sits centred between its lines, the rows keep their height, and the two cards still line up. -------------------------------------------------------------------------- */ @supports (grid-template-rows: subgrid) { .duel .side-facts { row-gap: 0; } .duel .side-facts > div { padding: calc(5px + clamp(12px, 2vw, 22px) / 2) 0; } @media (max-width: 620px) { .duel .side-facts > div { padding: calc(4px + clamp(12px, 2vw, 22px) / 2) 0; } } } /* Scroll snapping was tried here and removed. On a phone it fought the dynamic viewport — the URL bar showing and hiding re-runs snapping mid gesture — and it put the fixed buy bar in the wrong place. The chapter rhythm below gives the same effect without touching scroll behaviour. */ /* ---- chapters fill a screen ------------------------------------------------ Snapping is only worth having if each chapter roughly fills the viewport, otherwise a swipe lands on a half-empty one. The short sections get a minimum height with their content centred in it. Ratio and FAQ are left alone — they carry more than a screen of content and forcing them would just add dead space. -------------------------------------------------------------------------- */ @media (max-width: 860px) { .beat, #choice, #buy { min-height: 74vh; min-height: 74svh; display: flex; flex-direction: column; justify-content: center; } .hero { min-height: 76vh; min-height: 76svh; display: flex; flex-direction: column; justify-content: center; } #duel { min-height: 80vh; min-height: 80svh; display: flex; flex-direction: column; justify-content: center; } } /* ---- indicative markers --------------------------------------------------- Shown only while status is 'pre-launch'. The BTC2 price and market cap are a planned opening price, and rendering them in the same style as Bitcoin1's live figures presents an invention as a fact. -------------------------------------------------------------------------- */ .est { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); border: 1px solid var(--brand-line); background: var(--brand-bg); border-radius: 999px; padding: 2px 8px; width: fit-content; margin: 6px auto 0; } .est-inline { color: var(--brand); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; } .est[hidden], .est-inline[hidden] { display: none; } /* ---- the door ------------------------------------------------------------- A whitepaper cover that opens onto the site. Revealed by JS rather than shown by default, so if the script never runs nobody is trapped behind a blank overlay. Content stays in the DOM throughout, so crawlers and link previews are unaffected. -------------------------------------------------------------------------- */ .gate { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; cursor: pointer; background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(247,147,26,0.10), transparent 70%), #06080C; transition: opacity .5s ease, visibility .5s ease; } .gate[hidden] { display: none; } .gate.gate-out { opacity: 0; visibility: hidden; pointer-events: none; } .gate-inner { display: flex; flex-direction: column; align-items: center; } .gate-mark { width: clamp(74px, 13vw, 104px); height: auto; filter: drop-shadow(0 0 40px rgba(247,147,26,0.35)); animation: levitate 6.5s ease-in-out infinite; } /* ---- the currency switch in the bar ---------------------------------------- A segmented pair rather than two loose pills: in the bar it sits next to a solid Buy button, and two separate outlines there read as two more buttons competing with it rather than as one setting with two states. */ .denom { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px; } /* The switch takes the free space so it lands beside Buy rather than beside the nav. .btn-buy carries its own margin-left:auto for the pages that use it alone; here the switch has already claimed the gap, so it is dropped or the two of them split the space and drift apart. */ .topbar-inner .denom { margin-left: auto; } .topbar-inner .btn-buy { margin-left: 0; } .denom .dn { border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; padding: 5px 11px; cursor: pointer; transition: color .18s ease, background .18s ease; } .denom .dn:hover:not([disabled]) { color: var(--text); } .denom .dn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .denom .dn.is-on { color: var(--brand); background: var(--brand-bg); } .denom .dn[disabled] { opacity: 0.3; cursor: default; } /* Brand and Buy never give way: when the bar ran short, flexbox squeezed the button until "Buy $1" broke onto two lines and hung out of the bar. The switch is what gets smaller instead. */ .topbar-inner .brand, .topbar-inner .btn-buy, .topbar-inner .term-btn { flex-shrink: 0; white-space: nowrap; } /* The terminal, from the top bar on a phone: the same matrix green the nav gives it, as a mark rather than a word, and only where the nav is not there to carry it. */ .term-btn { display: none; } @media (max-width: 860px) { .denom .dn { padding: 5px 8px; font-size: 10px; letter-spacing: 0.03em; } /* smaller on a phone: at desktop size it was the loudest thing on the screen */ .topbar-inner .btn-buy { padding: 7px 13px; font-size: 13px; border-radius: 7px; } .term-btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; border: 1px solid rgba(0, 255, 65, 0.34); border-radius: 7px; background: rgba(0, 255, 65, 0.10); color: #00FF41; text-decoration: none; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; } .term-btn:hover { border-color: #00FF41; background: rgba(0, 255, 65, 0.16); } .term-btn:focus-visible { outline: 2px solid #00FF41; outline-offset: 2px; } } @media (max-width: 440px) { .topbar-inner { gap: 8px; } .topbar-inner .brand { gap: 7px; font-size: 16px; } .topbar-inner .brand-mark { width: 26px; height: 26px; } .denom .dn { padding: 5px 6px; letter-spacing: 0; } .topbar-inner .btn-buy { padding: 6px 11px; font-size: 12.5px; } .term-btn { padding: 6px 8px; font-size: 12.5px; } } /* the name only goes where the three genuinely cannot share the bar */ @media (max-width: 330px) { .topbar-inner .brand-name { display: none; } } /* ---- the pair mark under the supply beat ---------------------------------- Two marks and a slash, then the address of the other half. Kept quiet: it is an attribution and a way out, not a call to action. */ .pairmark { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 26px; text-decoration: none; opacity: 0.75; transition: opacity .2s ease; } .pairmark:hover { opacity: 1; } .pairmark-row { display: inline-flex; align-items: center; gap: 10px; } .pairmark-img { width: 26px; height: 26px; border-radius: 50%; display: block; } .pairmark-slash { color: var(--faint); font-size: 17px; font-weight: 300; } .pairmark-link { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); } .pairmark:hover .pairmark-link { color: var(--brand); } .pairmark:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 8px; } /* Volume, under the two boxes. Deliberately the quietest line on the door: price, liquidity and the lock are the claims, and this is corroboration. */ .gate-vol { margin-top: 15px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; color: var(--muted); text-align: center; } .gate-vol b { color: var(--text-2); font-weight: 600; } /* The currency switch either side of the mark. Both buttons are given the same min-width so the logo stays optically centred whichever label is longer — "DUSD" is a character wider than "USD", and without this the mark sits visibly off-centre on the one screen that has to look composed. The mark keeps its own levitate animation; the buttons do not move with it. */ .gate-denom { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 4vw, 28px); } .gate-denom .gd { flex: 0 0 auto; min-width: 62px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease; } .gate-denom .gd:hover:not([disabled]) { color: var(--text); border-color: var(--brand-line); } .gate-denom .gd:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .gate-denom .gd.is-on { color: var(--brand); border-color: var(--brand-line); background: var(--brand-bg); } /* Offered but not yet usable — DUSD cannot be shown until its own price is known. Dimmed rather than hidden, so the option does not appear and vanish. */ .gate-denom .gd[disabled] { opacity: 0.3; cursor: default; } @media (max-width: 480px) { .gate-denom { gap: 10px; } .gate-denom .gd { min-width: 54px; padding: 5px 9px; font-size: 10.5px; letter-spacing: 0.05em; } } .gate-title { font-size: clamp(34px, 7vw, 62px); font-weight: 800; letter-spacing: -0.035em; margin-top: 22px; } .gate-title .num { color: var(--brand); } .gate-sub { font-size: clamp(14px, 2vw, 17px); color: var(--muted); margin-top: 8px; } /* The squared mark is the whole point of the name, so it is set in the brand orange and sized against its own line rather than inheriting the browser's default superscript, which is too small to read at this size. */ .sq { color: var(--brand); font-weight: 700; font-size: 0.72em; top: -0.5em; position: relative; vertical-align: baseline; line-height: 0; padding-left: 1px; } /* ---- burns on the door ---------------------------------------------------- Three rows, no transaction column. The point is not to be a table — it is to show, before anyone has clicked anything, that the supply is moving and in which direction. -------------------------------------------------------------------------- */ .gate-burns { width: 100%; max-width: 340px; margin-top: 14px; border: 1px solid var(--pos-line); border-radius: var(--radius); background: rgba(174,235,140,0.04); overflow: hidden; } .gate-burns[hidden] { display: none; } .gb-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; border-bottom: 1px solid var(--pos-line); font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .gb-live { display: inline-flex; align-items: center; gap: 5px; color: var(--pos); } .gb-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--pos); animation: blip 2.2s ease-in-out infinite; } .gb-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: baseline; padding: 8px 13px; font-family: var(--mono); font-size: 12px; color: var(--faint); } .gb-row + .gb-row { border-top: 1px solid rgba(255,255,255,0.04); } .gb-amt { color: var(--pos); font-weight: 600; } .gb-rem { color: var(--text-2); font-size: 11px; } .gate-btn { margin-top: 34px; cursor: pointer; font-family: var(--sans); font-size: 15px; font-weight: 600; color: #1A0E00; background: var(--brand); border: none; border-radius: 8px; padding: 14px 28px; /* A white keyline hugging the orange. Drawn as a spread shadow rather than a border so it costs no layout - a real border would grow the button by 3px and shift everything under it on the door. */ box-shadow: 0 0 0 1.5px #FFFFFF; transition: background .15s, transform .15s, box-shadow .15s; } .gate-btn:hover { background: #FFA733; transform: translateY(-1px); box-shadow: 0 0 0 1.5px #FFFFFF; } /* Sits outside the keyline rather than replacing it, so keyboard focus is still visibly different from the resting state. */ .gate-btn:focus-visible { outline: 2px solid #fff; outline-offset: 5px; } /* ---- the room, on the door ------------------------------------------------- Quieter than .gate-btn on purpose. The whitepaper is still the primary action; this is the second thing you notice, not the first. Neutral border rather than brand orange keeps that hierarchy honest. --------------------------------------------------------------------------- */ .gate-chat { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 10px 22px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,0.025); color: var(--text); text-decoration: none; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; transition: border-color .15s, background .15s, transform .15s; } .gate-chat:hover { border-color: #4A5464; background: rgba(255,255,255,0.06); transform: translateY(-1px); } .gate-chat:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .gate-chat svg { width: 14px; height: 14px; fill: currentColor; display: block; } .gate-fine { margin-top: 16px; font-size: 12.5px; color: var(--faint); } /* ---- live figures on the door -------------------------------------------- Total liquidity is here because it is the number that gets misread everywhere else: routers and wallets show only the single pool they route through, so BTC2 looks like it has a few hundred dollars behind it. The honest figure is the sum, and it belongs before anything else is claimed. -------------------------------------------------------------------------- */ .gate-stats { display: flex; align-items: stretch; gap: 0; margin-top: 30px; border: 1px solid var(--brand-line); border-radius: var(--radius); background: rgba(247,147,26,0.05); overflow: hidden; } .gate-stats[hidden] { display: none; } .gate-stats .gs { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px clamp(18px, 4vw, 30px); } .gate-stats .gs + .gs { border-left: 1px solid var(--brand-line); } .gate-stats em { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .gate-stats b { font-family: var(--mono); font-size: clamp(17px, 3.2vw, 23px); font-weight: 600; color: var(--text); line-height: 1; } .gate-stats .gs-liq b { color: var(--brand); } /* In the label's slot, at the label's weight. At the full .chg treatment — 26px tall, solid fill, its own row — this read as a third headline rather than as a note on the first, and it made the price column taller than the liquidity column beside it. Sized to sit where the uppercase label sat, it is a modifier on the number below it, which is what it is. */ .gate-stats .chg { display: inline-flex; align-items: center; gap: 3px; margin-top: 0; min-height: 0; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: -0.01em; } .gate-stats .chg:empty { display: none; } .gate-stats i { font-style: normal; font-size: 10.5px; color: var(--faint); font-family: var(--mono); } /* the door is the first thing anyone sees, so both cells carry a headline figure and a smaller one under it rather than one being bare */ .gate-stats .gs { justify-content: flex-start; } /* ---- the two cells share their rows --------------------------------------- Both halves have the same three lines — a small one, the figure, a small one — but centring each cell independently only lines them up when the top lines happen to be the same height. They are not: the left carries a change badge with padding and a background, the right carries a line of uppercase label, and the couple of pixels between them pushed the price out of level with the liquidity figure beside it. Subgrid makes the alignment structural. The container owns three rows and both cells span them, so the figures sit on one line because they are in the same row, not because their boxes happened to measure the same. Behind @supports, so anything without it keeps the flex column it had. -------------------------------------------------------------------------- */ @supports (grid-template-rows: subgrid) { .gate-stats { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; align-items: stretch; } .gate-stats .gs { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; /* One column, filling the cell. Without this the cell has an implicit auto column sized to its widest child, and `justify-content: flex-start` — written above for the flex column, where it means "pack the items upward" — means something else entirely under grid: it aligns the TRACKS, so that content-width column got shoved against the left edge. The right cell looked fine only because its widest line happened to measure the same as its content box. The left cell's price is narrower than its half, so everything in it sat 20px left of centre. A 1fr column spans the cell and stretch puts it back where it belongs; justify-items then centres each line on the cell's own axis. */ grid-template-columns: 1fr; justify-content: stretch; justify-items: center; align-items: center; gap: 5px; } /* Equal halves, but never narrower than what is in them. A flat 1fr 1fr clips on a narrow screen, where the price is wider than half the box. */ .gate-stats { grid-template-columns: repeat(2, minmax(min-content, 1fr)); } } /* ---- contract address bar ------------------------------------------------- Top of the page, above the fold, one tap to copy. It is the first thing anyone asks for and the last thing they should have to hunt for. -------------------------------------------------------------------------- */ .cabar { display: flex; align-items: center; gap: 10px; padding: 9px clamp(16px, 4vw, 24px); background: var(--brand-bg); border-bottom: 1px solid var(--brand-line); } .cabar[hidden] { display: none; } .cabar-k { flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); } .cabar-addr { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cabar-copy { flex-shrink: 0; cursor: pointer; font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: var(--brand); background: transparent; border: 1px solid var(--brand-line); border-radius: 6px; padding: 5px 12px; transition: background .15s, color .15s, border-color .15s; } .cabar-copy:hover { background: var(--brand); color: #1A0E00; border-color: var(--brand); } .cabar-copy.is-copied { background: var(--brand); color: #1A0E00; border-color: var(--brand); } .cabar-copy:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } @media (max-width: 560px) { .gate-stats { width: 100%; } .gate-stats .gs { flex: 1; padding: 13px 10px; } .cabar-k { font-size: 10px; } .cabar-addr { font-size: 11px; } } /* No scrolling the page behind the door. overflow:hidden alone is ignored by iOS Safari for touch: a swipe on the door still scrolled the page, the toolbar collapsed with it, and the page showed through the strip it left at the bottom. Pinning the body in place stops the scroll itself — the door only ever rises at the top of the page, so there is no position to keep. */ html.gated, html.gated body { overflow: hidden; overscroll-behavior: none; } html.gated body { position: fixed; top: 0; left: 0; right: 0; width: 100%; } /* With the page pinned, a door taller than the screen could not be scrolled at all — centred, it spilled off both ends: the mark cut at the top, the last button under Safari's toolbar. It scrolls inside itself now, and its content centres with auto margins rather than align-items, which clips an overflow at the top where margins simply stop at zero. */ .gate { overscroll-behavior: contain; overflow-y: auto; -webkit-overflow-scrolling: touch; align-items: flex-start; justify-content: flex-start; padding-top: calc(24px + env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); } .gate-inner { margin: auto; } @media (prefers-reduced-motion: reduce) { .gate { transition: none; } .gate-mark { animation: none; } } /* ---- buyback & burn ------------------------------------------------------- Three steps and one address. The address is the point: it is the difference between claiming a mechanism and letting someone check it. -------------------------------------------------------------------------- */ .burnflow { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; } .burnflow li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; } .bf-n { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--brand); } .bf-t { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; } .bf-b { font-size: 13.5px; color: var(--muted); line-height: 1.6; } /* ---- live burn readout ---------------------------------------------------- The one section where the project either is what it says or is not, so the numbers are read from chain on load rather than typed into the markup. -------------------------------------------------------------------------- */ .burnlive { background: var(--panel); border: 1px solid var(--pos-line); border-radius: var(--radius); padding: clamp(22px, 3.4vw, 34px); margin-bottom: 16px; } .bl-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .bl-k { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .bl-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .05em; color: var(--pos); } .bl-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); animation: blip 2.2s ease-in-out infinite; } @keyframes blip { 0%,100% { opacity: .35; } 50% { opacity: 1; } } .bl-big { font-family: var(--mono); font-weight: 600; color: var(--pos); font-size: clamp(30px, 6vw, 58px); letter-spacing: -0.03em; line-height: 1.05; margin-top: 12px; } .bl-sub { font-size: 14px; color: var(--muted); margin-top: 8px; } .bl-bar { height: 6px; margin: 20px 0 4px; background: rgba(255,255,255,0.05); border-radius: 999px; overflow: hidden; } .bl-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pos), #D1F4BE); border-radius: 999px; transition: width 1.2s cubic-bezier(.2,.7,.2,1); } /* ---- the pair ------------------------------------------------------------- Two columns against the cap they share. Bitcoin2 left because it is the subject; Bitcoin1 right as the control. The bars are the same length on purpose — both are ~95% of 21,000,000, and the near-identical fills are the point: what separates them is direction, not size. -------------------------------------------------------------------------- */ .bl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 40px); margin-top: 16px; } .bl-pair .blp { display: flex; flex-direction: column; min-width: 0; } .bl-pair .blp-b1 { padding-left: clamp(18px, 3vw, 40px); border-left: 1px solid var(--line); } .blp-who { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--text-2); margin-bottom: 6px; } .blp-who .num { color: var(--brand); } .bl-pair .bl-big { font-size: clamp(22px, 3.6vw, 38px); margin-top: 0; } .bl-pair .bl-big.neg { color: var(--neg); } .blp-move { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--mono); font-size: clamp(12px, 1.5vw, 15px); font-weight: 600; } .blp-move i { font-style: normal; } .blp-move.down { color: var(--pos); } .blp-move.up { color: var(--neg); } .bl-pair .bl-bar { margin: 14px 0 6px; } .bl-bar span.up { background: linear-gradient(90deg, var(--neg), #FF8A90); } @media (max-width: 560px) { .bl-pair { grid-template-columns: 1fr; gap: 20px; } .bl-pair .blp-b1 { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--line); } } .bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); } .bl-grid > div { display: flex; flex-direction: column; gap: 4px; } .bl-grid em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); } .bl-grid b { font-family: var(--mono); font-size: clamp(15px, 2vw, 19px); font-weight: 600; } .bl-grid i { font-style: normal; font-size: 11.5px; color: var(--faint); } @media (max-width: 640px) { .bl-grid { grid-template-columns: 1fr; gap: 14px; } } /* ---- burn feed ------------------------------------------------------------ Built like a trades table because that is the shape people already read on a terminal — but every row is a burn, and the column they scan for size is the supply left behind rather than the price paid. -------------------------------------------------------------------------- */ .burnfeed { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; } .bf-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); } .bf-title { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .bf-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--pos); } .bf-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); animation: blip 2.2s ease-in-out infinite; } .bf-table { font-family: var(--mono); font-size: 13px; } .bf-row { display: grid; grid-template-columns: 62px 1fr 1fr 62px; gap: 10px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); } .bf-row:last-child { border-bottom: none; } a.bf-row { transition: background .15s; } a.bf-row:hover { background: rgba(174,235,140,0.05); } .bf-hd span { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .bf-hd { border-bottom: 1px solid var(--line-2); } .bf-age { color: var(--faint); font-size: 12px; } .bf-amt { color: var(--pos); font-weight: 600; } .bf-rem { color: var(--text-2); } .bf-tx { color: var(--faint); font-size: 12px; text-align: right; } .bf-empty { grid-template-columns: 1fr; color: var(--faint); font-family: var(--sans); font-size: 13px; line-height: 1.6; } @media (max-width: 560px) { .bf-row { grid-template-columns: 46px 1fr 1fr; padding: 10px 13px; font-size: 12px; } .bf-tx, .bf-hd span:last-child { display: none; } } .burnproof { border: 1px solid var(--pos-line); background: var(--pos-bg); border-radius: var(--radius); padding: clamp(20px, 3vw, 28px); } .bp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .bp-k { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .bp-verified { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pos); border: 1px solid var(--pos-line); background: rgba(174,235,140,0.08); border-radius: 999px; padding: 2px 9px; } .bp-addr { display: block; font-family: var(--mono); font-size: clamp(11px, 2.2vw, 14px); color: var(--text); word-break: break-all; line-height: 1.5; } .bp-link { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 500; color: var(--pos); text-decoration: none; } .bp-link:hover { text-decoration: underline; } .bp-link[hidden] { display: none; } .bp-note { margin-top: 16px; font-size: 13.5px; color: var(--muted); line-height: 1.7; max-width: 660px; } .bp-note code { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); background: rgba(255,255,255,0.05); padding: 1px 5px; border-radius: 4px; } @media (max-width: 760px) { .burnflow { grid-template-columns: 1fr; } } /* a closing line under a beat, after its numbers */ .beat-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: clamp(14px, 1.8vw, 16px); color: var(--text-2); line-height: 1.7; max-width: 560px; } .beat-r .beat-note { margin-left: auto; } .beat-note strong { color: var(--brand); font-weight: 600; } /* highlighted nouns inside a beat paragraph — so the colour classes are not overridden by .beat-body strong, which sets its own */ .beat-body b { font-weight: 600; } .beat-body { max-width: 620px; } /* ---- rolling prices -------------------------------------------------------- A brief tint while a figure travels, so a change is felt as well as read. Colour only — no movement of the element itself, because the digits are already doing the moving and a price that also slides is hard to read. The tint is on the direction of travel, matching the market convention the rest of the page uses. --------------------------------------------------------------------------- */ .climb-price.roll-up { animation: rollUp .9s ease-out; } .climb-price.roll-down { animation: rollDown .9s ease-out; } @keyframes rollUp { 0% { color: var(--pos); } 100% { color: var(--text); } } @keyframes rollDown { 0% { color: var(--neg); } 100% { color: var(--text); } } @media (prefers-reduced-motion: reduce) { .climb-price.roll-up, .climb-price.roll-down { animation: none; } } /* ---- the ways out, under the door ----------------------------------------- A row rather than a single pill now the gate offers three destinations. They wrap on a narrow phone rather than shrinking, because a tap target that shrinks to fit is a tap target that gets missed. --------------------------------------------------------------------------- */ .gate-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; } .gate-links .gate-chat { margin-top: 0; } /* a full row of the wrapping links to itself, with the button centred in it */ .gate-term-row { flex-basis: 100%; display: flex; justify-content: center; } /* the way into the terminal, in the terminal's own green */ /* the same pill as the rest of the row; only the words are green */ .gate-chat.gate-term { color: #00FF41; } .gate-term .term-mark { font-family: var(--mono); font-weight: 700; letter-spacing: -0.04em; } /* the mark on its own, so it reads as the account rather than a second chat */ .gate-chat.gate-icon { padding: 10px 16px; } /* Dexscreener's mark ships white-on-black with no alpha channel. `screen` drops the black out against the dark pill and keeps the white, including the black cut-outs inside the bird — those become holes that show the pill through, which is exactly how the logo is meant to read. Cheaper and sharper than keying an alpha channel into the file. */ .gate-dex-mark { width: 15px; height: auto; display: block; mix-blend-mode: screen; } /* the address on the door, between the whitepaper and the links */ .gate-ca { margin: 20px auto 0; /* never let the tail ellipsis away — it is the half that says DUSD */ flex: none; white-space: nowrap; } .gate-ca .ca-chip-addr { overflow: visible; text-overflow: clip; } /* Direction on the circulating-supply rows. Generated content rather than markup, because app.js rewrites those values with textContent on every tick — an element inside the
would be wiped each refresh. The colours are the ones used everywhere else: supply falling is the good one here, supply rising is not. */ /* Lifted out of the flow deliberately. The facts run down one centre axis, and an arrow inside the
is part of that box: it widened the circulating-supply row by half an arrow plus its margin and pushed the digits left, so 21,000,000 and 19,758,731 no longer lined up despite both being ten tabular characters. Absolute and hung off the right edge, the arrow costs the box no width and the numerals centre on the same axis as the row above. The
is a flex item under align-items:center, so it is already shrink-to-fit and left:100% lands exactly at the end of the figure. */ #duel-b2-supply, #duel-b1-supply { position: relative; } #duel-b2-supply::after, #duel-b1-supply::after { position: absolute; left: 100%; top: 0; margin-left: 6px; font-weight: 700; } #duel-b2-supply::after { content: '\2193'; color: var(--pos); } #duel-b1-supply::after { content: '\2191'; color: var(--neg); } /* The chart pill carries a mark like the others so the row reads as icons rather than one bare word. It is an emoji, not an SVG, so it keeps its own colour — sized down slightly to sit level with the 14px marks either side. */ .gate-chart-mark { font-size: 13px; line-height: 1; } /* The names sit above the figures now, set exactly as the mark in the top-left corner is. The gap that used to hang under the coin belongs to the name, and the price closes up under it so the two read as one block. */ .climb-side .climb-name { margin-top: clamp(14px, 2.2vw, 24px); font-size: clamp(15px, 2vw, 22px); color: var(--text); } .climb-name + .climb-price { margin-top: 4px; } /* ---- the supplies either side of the mark --------------------------------- Two figures 0.9% apart, which is to say they look the same. That is the honest picture and the arrows are what make it mean something: identical size, opposite directions. Kept quiet on purpose — the door already has a title, a subtitle, two stats and a button, and a fifth loud thing would flatten all of them. -------------------------------------------------------------------------- */ .gate-head { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3.5vw, 30px); } .gh-side { display: flex; flex-direction: column; align-items: center; gap: 3px; } .gh-n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(11px, 2.6vw, 14px); font-weight: 500; letter-spacing: -0.02em; color: var(--text-2); white-space: nowrap; } .gh-side em { font-style: normal; font-size: clamp(8.5px, 1.6vw, 9.5px); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); } /* generated content, so a textContent rewrite of the figure cannot drop it. Absolute for the same reason as the head-to-head rows: the ticker sits centred under the figure, and an arrow inside the box shifted the digits left of the label by half an arrow. */ #gate-b2-supply, #gate-b1-supply { position: relative; } #gate-b2-supply::after, #gate-b1-supply::after { position: absolute; left: 100%; top: 0; margin-left: 5px; } #gate-b2-supply::after { content: '\2193'; color: var(--pos); } #gate-b1-supply::after { content: '\2191'; color: var(--neg); } /* Under the subtitle now rather than either side of the mark: the claim is "deflationary", and the two supplies are the evidence for it, so they read better directly beneath the sentence they support than flanking a logo. */ .gate-head { margin-top: 18px; } .gh-div { width: 1px; align-self: stretch; background: var(--line-2); margin: 2px 0; } .gate-defl { color: var(--brand); font-weight: 600; } /* ---- the choice, rebuilt -------------------------------------------------- The section is one centred column now, so the CTA text that used to sit in a left-aligned two-column block has to stop hugging the left edge. These override the old .cta-* rules in place rather than forking a second set of them, because the elements themselves are unchanged — only their container. -------------------------------------------------------------------------- */ .choicewrap .cta-sub { margin: clamp(18px, 2.6vw, 26px) auto 24px; font-size: clamp(15px, 2vw, 17px); } .choicewrap .cta-btn { margin-left: auto; margin-right: auto; } .choicewrap .cta-fine { margin-left: auto; margin-right: auto; } /* Inside the small print under each figure, only the numbers are picked out — "$18.2K" but not "market cap", "85%" and "8" but not "locked" or "pools". The market cap takes the brand orange; the lock figures go white instead, because they sit directly beneath an orange total and three oranges stacked in one small cell stop any of them meaning anything. */ .gate-stats #gate-mc .v { color: var(--brand); } .gate-stats #gate-pools .v { color: var(--text); } /* The padlock renders in a colour font, so it ignores the surrounding grey and arrives a shade large for 10.5px text. Sized down to sit on the same line. */ .gate-stats .lockmark { font-size: 0.92em; line-height: 1; } /* Equal halves so the divider lands dead centre, under the one between the two supplies above it. Both cells were sizing to their own content — "TOTAL LIQUIDITY / 85% 🔒 across 8 pools" is simply more text than "PRICE" — which pushed the rule 13px left of the page centre and left the two dividers visibly out of line. */ .gate-stats { display: grid; grid-template-columns: repeat(2, 1fr); width: fit-content; margin-left: auto; margin-right: auto; } /* fit-content on a two-equal-column grid resolves each column to the WIDER cell's content, rather than splitting a fixed width between them. So the halves match, the divider sits dead centre, and the liquidity line still gets the room it needs — dividing a fixed width instead made it wrap. */ /* ---- the moon ------------------------------------------------------------- One. Top right, below the ticker — at a negative top offset it hid behind the header entirely. Kept out of the middle and kept dim, because the mark on it is the same one in the logo: bright or central, it stops being scenery and starts being a second brand competing with the header. The artwork carries its own alpha, so no blend mode. Sized in vmin so it scales with the smaller axis and cannot swallow a phone in portrait. -------------------------------------------------------------------------- */ /* Two layers, because a dim moon and a solid moon are different problems. The element itself is an opaque disc in the sky's own colour at this spot, which occludes the starfield behind it — a moon you can see stars through is not a moon. Its edge fades over the last few percent so the disc is never visible as a disc. The image rides on top at low opacity. Dimming has to happen on that layer alone: putting opacity on the element would take the backing disc down with it and the stars would come straight back through. */ .moon { position: absolute; right: 4vmin; top: 12vmin; width: clamp(120px, 22vmin, 290px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle closest-side, #070A0F 0 92%, rgba(7, 10, 15, 0) 100%); animation: moondrift 120s ease-in-out infinite alternate; } .moon::after { content: ''; position: absolute; inset: 0; background: url('assets/moon.png') center / contain no-repeat; opacity: 0.34; } /* Barely moves — a handful of pixels over two minutes. Enough that it is not pinned to the viewport while the stars drift past it, not enough to read as motion. */ @keyframes moondrift { from { transform: translate3d(0, 0, 0) } to { transform: translate3d(-14px, -10px, 0) } } @media (prefers-reduced-motion: reduce) { .moon { animation: none; } } /* ---- liquidity by pool ---------------------------------------------------- Donut on one side, the pools listed on the other. The donut answers "how much of it is locked" in one glance; the list answers "where is it", which a donut is bad at once slices get small. -------------------------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .liqwrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 56px); align-items: center; } .liq-figure { margin: 0; } #liq-donut { width: clamp(180px, 26vw, 260px); height: auto; display: block; } .liq-list { list-style: none; margin: 0; padding: 0; min-width: 0; } .liq-list li { display: grid; grid-template-columns: 10px 1fr auto 42px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; } .liq-list li:last-child { border-bottom: 0; } .liq-dot { width: 10px; height: 10px; border-radius: 50%; } .liq-pair { color: var(--text); font-weight: 600; } /* The pool name is the link, not the whole row. A row-wide anchor would put the dollar figure and the share inside it too, and neither of those is a destination — the pair is the thing you go and look at. Underlined only on hover, because sixteen underlined rows would read as a list of warnings. */ a.liq-pair { text-decoration: none; } a.liq-pair:hover, a.liq-pair:focus-visible { color: var(--brand); text-decoration: underline; } a.liq-pair:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; } /* Marks the row as somewhere to go without spending width on the word. Hidden from assistive tech, which already has the link. */ a.liq-pair::after { content: ' ↗'; color: var(--faint); font-size: 0.82em; } .liq-lock { font-size: 0.85em; } .liq-usd { font-family: var(--mono); color: var(--text-2); } .liq-share { font-family: var(--mono); color: var(--faint); text-align: right; font-size: 13px; } @media (max-width: 700px) { /* the donut goes above the list rather than shrinking both into nothing */ .liqwrap { grid-template-columns: 1fr; justify-items: center; } .liq-list { width: 100%; } } /* The liquidity half of the door's stat box is a button now, so it has to look like one. Reset the browser's button styling first — a