/* ========================================================================= NaughtyBot — BTCPay checkout theme override ------------------------------------------------------------------------- Hosted at https://dev.naughtybot.me/btcpay-theme.css (and the prd equivalent). Operator pastes this URL into BTCPay admin → Stores → NaughtyBot → Settings → General → "Custom CSS" so the standalone pay.arnhemlabs.com checkout page picks up NaughtyBot typography and colour tokens. ------------------------------------------------------------------------- This file is served from naughtybot.me to BTCPay (different origin from the rest of the site). It must therefore be self-contained — no @import of tokens.css, no shared CSS variables. Tokens are duplicated inline from web/src/styles/tokens.css. If those change, mirror here. Iteration note: BTCPay's checkout markup varies across versions and we don't have a fixed list of selectors. This file uses broad element-level selectors first (body, h1-h3, button) and a few common Bootstrap / BTCPay class names as best-effort. After the operator pastes this URL into BTCPay and inspects the result, we add more specific overrides for whatever still looks off. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* ------------------------------------------------------------------------- Brand tokens (duplicated from web/src/styles/tokens.css — keep in sync). ------------------------------------------------------------------------- */ :root { --nb-paper: oklch(0.16 0.014 280); --nb-paper-2: oklch(0.13 0.014 280); --nb-paper-3: oklch(0.20 0.018 280); --nb-ink: oklch(0.96 0.008 70); --nb-ink-2: oklch(0.78 0.008 70); --nb-ink-3: oklch(0.60 0.010 70); --nb-rule: oklch(0.28 0.018 280); /* Sofia hue (persona default) — BTCPay doesn't switch personas per payment, so we pin one accent. Match the persona the rest of the billing page uses (Sofia at 50). */ --nb-accent: oklch(0.62 0.10 50); --nb-accent-bg: oklch(0.22 0.05 50); --nb-accent-ink: oklch(0.92 0.08 50); --nb-display: 'Fraunces', Georgia, 'Times New Roman', serif; --nb-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --nb-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Bootstrap / BTCPay variable overrides — newer BTCPay versions read these to theme components without needing per-component CSS. */ --bs-body-bg: var(--nb-paper); --bs-body-color: var(--nb-ink); --bs-primary: var(--nb-accent); --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif; --bs-font-monospace: 'JetBrains Mono', ui-monospace, monospace; --btcpay-body-bg: var(--nb-paper); --btcpay-body-text: var(--nb-ink); --btcpay-primary: var(--nb-accent); } /* ------------------------------------------------------------------------- Base body + typography ------------------------------------------------------------------------- `overflow: hidden` + `min-height: 0` defeat the iframe scrollbar: BTCPay's applies Bootstrap min-height: 100vh, which inside our iframe resolves to the parent-page viewport height (~92vh ≈ 990px on a 1080p screen) — larger than the modal's 880px iframe height, so the body overflows and the iframe shows a scrollbar. Killing min-height + clipping any tiny leftover overflow gets us a scroll-free modal. Nothing useful gets clipped because the page is already sized to fit the canonical checkout content. */ body, html { background: var(--nb-paper) !important; color: var(--nb-ink) !important; font-family: var(--nb-body) !important; min-height: 0 !important; overflow: hidden !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Store name / page header → display font, italic Fraunces wordmark matching .auth-mark / .persona-wordmark in tokens.css. BTCPay uses a mix of class names across versions; cover the common ones. font-size bump: the wordmark is the only piece of branding identity on the BTCPay page (no logo) — let it carry the page. ~2.5rem matches the visual weight of the .auth-mark on our own pages. */ h1, h2, h3, .store-header, .text-store-name, .text-large, .checkout__header, .invoice-header { font-family: var(--nb-display) !important; font-style: italic !important; font-variation-settings: "opsz" 144; font-weight: 400 !important; font-size: 2.5rem !important; line-height: 1.1 !important; letter-spacing: -0.025em !important; color: var(--nb-ink) !important; } /* The big amount line (e.g. "0.00006509 BTC") — Fraunces numerals at this size were unreadable (operator feedback), so switch to body Inter. Inter has tabular figures and reads cleanly at small sizes; the slight weight bump (500) compensates for losing the Fraunces optical-size weight. Selector notes (from inspecting the live pay.arnhemlabs.com markup):

0.00006509 BTC

The amount is a plain

with NO class containing "amount" — every `.payment-box__amount__value` / `[class*="amount"]` selector below was missing it entirely. Only the broad `h1, h2, h3` wordmark rule above was reaching it (and styling it Fraunces 2.5rem italic). #AmountDue is the canonical fix: ID specificity (1,0,0) beats h2's (0,0,1) regardless of !important, so font-family/size/style all flip to the amount rule without any cascade-order gymnastics. The remaining selectors are kept as fallbacks for other BTCPay versions / themes that emit the V2-spec markup. */ #AmountDue, .payment-box__amount, .payment-box__amount__value, .payment-box__amount__currency, .amount-due, .invoice-amount, [class*="amount"] { font-family: var(--nb-body) !important; font-style: normal !important; font-weight: 500 !important; font-size: 1.75rem !important; font-variation-settings: normal !important; font-variant-numeric: tabular-nums !important; line-height: 1.25 !important; letter-spacing: 0 !important; color: var(--nb-ink) !important; } /* ------------------------------------------------------------------------- Surfaces — cards, panels, the payment-method picker ------------------------------------------------------------------------- */ .card, .payment-box, .checkout-card, .invoice-card, section, .payment-method-card { background: var(--nb-paper-2) !important; border-color: var(--nb-rule) !important; color: var(--nb-ink) !important; } /* "Pay with" labels — mono uppercase, same as .mono-meta */ .payment-method-label, .text-uppercase, [class*="label-"]:not(.btn) { font-family: var(--nb-mono) !important; font-size: 11px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--nb-ink-3) !important; } /* Pill toggles (Bitcoin / Lightning) — round, dark-on-light when active */ .btcpay-pills > *, .payment-method-pill, .nav-pills .nav-link, [role="tablist"] > [role="tab"] { font-family: var(--nb-body) !important; font-weight: 500 !important; letter-spacing: 0.01em !important; border-radius: 999px !important; } /* ------------------------------------------------------------------------- Buttons — match .btn-primary in tokens.css ------------------------------------------------------------------------- */ .btn, button[type="submit"], .button { font-family: var(--nb-body) !important; font-weight: 500 !important; font-size: 14px !important; letter-spacing: 0.01em !important; border-radius: 999px !important; padding: 12px 20px !important; } .btn-primary, .btn-success { background: var(--nb-ink) !important; border-color: var(--nb-ink) !important; color: var(--nb-paper) !important; } .btn-primary:hover, .btn-success:hover { background: var(--nb-accent-bg) !important; border-color: var(--nb-accent-bg) !important; color: var(--nb-ink) !important; } /* ------------------------------------------------------------------------- Address blocks — mono, tracked ------------------------------------------------------------------------- */ .address-text, .invoice-address, [class*="address"] code, code { font-family: var(--nb-mono) !important; font-size: 13px !important; letter-spacing: 0.04em !important; color: var(--nb-ink-2) !important; } /* ------------------------------------------------------------------------- Links ------------------------------------------------------------------------- */ a { color: var(--nb-ink) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--nb-accent-ink) !important; } /* ------------------------------------------------------------------------- Misc — borders, dividers, scrollbars ------------------------------------------------------------------------- */ hr, .divider { border-color: var(--nb-rule) !important; } ::selection { background: var(--nb-accent-bg); color: var(--nb-ink); } /* Dark scrollbars inside the BTCPay iframe so they don't look like a light-mode UI dropped onto our dark page. */ * { scrollbar-color: var(--nb-rule) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--nb-rule); border-radius: 4px; } *::-webkit-scrollbar-thumb:hover { background: var(--nb-ink-3); } /* ------------------------------------------------------------------------- Hide BTCPay branding footer -------------------------------------------------------------------------