/* Tip page. Inherits the site palette from css/style.css. */ /* The shared stylesheet paints only , which stops at the end of the content. This page is short, so anything below it fell through to the white root. Paint the root as well and let both fill the viewport. */ html { background-color: #2d2d2d; min-height: 100%; } body { background-color: #2d2d2d; min-height: 100vh; } /* Pico drives

colour through its own variables and wins the specificity contest with selectors like `details[open] > summary:not([role]):not(:focus)`. Setting the variables is more robust than escalating selectors. */ .tip-page { --pico-accordion-close-summary-color: #f5f5f5; --pico-accordion-open-summary-color: #f5f5f5; --pico-accordion-active-summary-color: var(--tip-accent, #22d3ee); } .tip-page { max-width: 34rem; padding-top: 2rem; padding-bottom: 4rem; } .tip-warning { background: #7f1d1d; border: 1px solid #b91c1c; border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1.5rem; font-size: 0.9rem; } .tip-header { text-align: center; margin-bottom: 2.5rem; } .tip-header h1 { margin-bottom: 0.5rem; } .tip-context { color: #d0d0d0; font-size: 0.98rem; line-height: 1.7; margin: 0; } .tip-from { display: block; margin-top: 0.75rem; font-size: 0.9rem; color: #a0a0a0; } /* The publication carries the accent and the weight; the article slug is confirmation detail and stays quiet. */ .tip-from .tip-source-name { color: var(--tip-accent, #22d3ee); font-weight: 700; font-size: 1.02em; } .tip-from .tip-article { color: inherit; opacity: 0.75; } /* Method cards */ .tip-method { border: 1px solid #444; border-radius: 12px; margin-bottom: 0.75rem; overflow: hidden; background: #333; } .tip-method summary:not([role]) { padding: 1rem 1.25rem; cursor: pointer; display: flex; align-items: baseline; gap: 0.6rem; list-style: none; font-weight: 600; /* Pico's `details summary:not([role])` colours summaries as a muted accordion control, and outranks a plain `.tip-method summary`. Match its specificity so the label is readable on the dark card. */ color: #f5f5f5; opacity: 1; background: none; } .tip-method summary:not([role]):hover { color: var(--tip-accent, #22d3ee); } .tip-method summary::-webkit-details-marker { display: none; } /* A chevron drawn from two borders rather than a glyph, so it renders the same in every font. Points down when closed, up when open — the usual accordion cue. */ .tip-method summary::after { content: ''; margin-left: auto; width: 0.5rem; height: 0.5rem; border-right: 2px solid #888; border-bottom: 2px solid #888; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s ease, border-color 0.2s ease; flex: 0 0 auto; align-self: center; } .tip-method[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--tip-accent, #22d3ee); } .tip-method summary:hover::after { border-color: var(--tip-accent, #22d3ee); } .tip-method[open] { border-color: var(--tip-accent, #22d3ee); } .tip-method-symbol { font-size: 0.8rem; color: #999; font-weight: 400; } .tip-method-body { padding: 0 1.25rem 1.25rem; } .tip-note { font-size: 0.85rem; color: #a0a0a0; margin: 0 0 1rem; } /* Amount buttons */ .tip-amounts { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .tip-amount { flex: 1 1 0; min-width: 3.2rem; min-height: 44px; /* accessible tap target */ padding: 0.55rem 0.3rem; font-size: 1rem; font-weight: 600; border: 1px solid #555; border-radius: 8px; background: #3a3a3a; color: #f5f5f5; font-size: 0.9rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; margin: 0; width: auto; } .tip-amount:hover { border-color: var(--tip-accent, #22d3ee); background: #444; } /* One quoted rate, which a reader can check anywhere. Monospaced digits so it reads as a figure rather than prose. */ .tip-rate-note { font-size: 0.78rem; color: #9a9a9a; margin: -0.5rem 0 1rem; text-align: center; font-variant-numeric: tabular-nums; } .tip-method-body a.tip-rate-link { color: #9a9a9a; text-decoration: underline; text-underline-offset: 2px; } .tip-method-body a.tip-rate-link:hover { color: var(--tip-accent, #22d3ee); } .tip-amount[aria-pressed="true"] { border-color: var(--tip-accent, #22d3ee); background: var(--tip-accent, #22d3ee); color: #1a1a1a; font-weight: 600; } /* QR + address */ .tip-qr { display: flex; justify-content: center; margin-bottom: 1rem; } .tip-qr img { width: 180px; height: 180px; image-rendering: pixelated; background: #fff; padding: 10px; border-radius: 8px; } .tip-address-row { display: flex; gap: 0.5rem; align-items: stretch; } .tip-address { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; word-break: break-all; background: #2a2a2a; border: 1px solid #555; border-radius: 8px; padding: 0.6rem 0.7rem; color: #e0e0e0; line-height: 1.4; } .tip-copy { flex: 0 0 auto; min-height: 44px; padding: 0.5rem 0.9rem; border: 1px solid #555; border-radius: 8px; background: #3a3a3a; color: #f5f5f5; cursor: pointer; font-size: 0.85rem; margin: 0; width: auto; } .tip-copy:hover { border-color: var(--tip-accent, #22d3ee); background: #444; } .tip-copy.copied { background: var(--tip-accent, #22d3ee); color: #1a1a1a; border-color: transparent; } .tip-method-body a.tip-open-wallet { display: inline-block; margin-top: 0.75rem; font-size: 0.85rem; color: var(--tip-accent, #22d3ee); } /* Card */ .tip-primary { width: 100%; min-height: 48px; padding: 0.75rem; border: none; border-radius: 8px; background: var(--tip-accent, #22d3ee); color: #1a1a1a; font-weight: 600; cursor: pointer; margin: 0; } .tip-primary:disabled { opacity: 0.6; cursor: default; } .tip-card-error { font-size: 0.8rem; color: #fca5a5; margin: 0.75rem 0 0; text-align: center; } /* Acknowledgement after returning from checkout. The tip is recorded by webhook; this only tells the reader it worked. */ .tip-thanks { background: #14532d; border: 1px solid #16a34a; border-radius: 8px; padding: 0.75rem 1rem; margin: 1rem 0 0; text-align: center; font-size: 0.9rem; } /* Footer */ .tip-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #444; text-align: center; } .tip-footer p { font-size: 0.82rem; color: #909090; line-height: 1.6; margin-bottom: 0.5rem; } @media (max-width: 480px) { .tip-page { padding-top: 1.25rem; } .tip-amounts { gap: 0.4rem; } .tip-amount { min-width: 3rem; padding: 0.5rem 0.2rem; font-size: 0.95rem; } .tip-qr img { width: 160px; height: 160px; } .tip-method summary:not([role]) { padding: 0.9rem 1rem; } .tip-method-body { padding: 0 1rem 1rem; } .tip-address { font-size: 0.7rem; } } /* Narrow phones (iPhone SE and similar): five buttons across is too tight, so let them wrap onto a second row at a usable size. */ @media (max-width: 360px) { .tip-amount { flex: 1 1 28%; min-width: 0; } .tip-method-symbol { display: none; } } @media (prefers-reduced-motion: reduce) { .tip-amount, .tip-copy, .tip-method summary::after { transition: none; } }