/* * Shared styling for the three donation pages: support.jsp, thank-you.jsp and * donation-cancelled.jsp. * * The header is deliberately a copy of the #header2 rules in * /vocabulary/category-index3.css rather than a link to that stylesheet: these * pages want the same black bar, not the several hundred rules of the category * index that come with it. If the bar is restyled there, mirror the change here. * * Directional properties are logical (inline-start/end, text-align: start) so the * same file serves both LTR and RTL interfaces off the attribute -- * these pages are served in every interface language the site has. */ :root { --lg-ink: #0b0b0c; --lg-text: #26262b; --lg-text-muted: #6f6f79; --lg-line: rgba(0, 0, 0, .10); --lg-surface: #f6f6f8; --lg-blue: #4b7aa4; --lg-blue-hover: #3f6889; --lg-radius: 14px; } /* Without an explicit background the browser paints its own dark canvas under prefers-color-scheme: dark and the dark body text becomes unreadable. */ html, body { background-color: #fff; } body { margin: 0; text-align: start; } * { font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 150%; color: var(--lg-text); } /* ---- Header: matches the language landing page ---- */ #header2 { height: 67px; display: flex; align-items: center; gap: 10px; padding: 0 20px; background-color: var(--lg-ink); color: #fff; } .header2-logo { flex-shrink: 0; width: 34px; height: 34px; line-height: 0; } .header2-logo img { display: block; width: 34px; height: 34px; } .header2-brand { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 15px; } .header2-home { font-weight: 800; color: #fff; text-decoration: none; letter-spacing: .01em; white-space: nowrap; } .header2-lang { overflow: hidden; color: rgba(255, 255, 255, .68); text-overflow: ellipsis; white-space: nowrap; } .header2-lang::before { content: "ยท"; margin-inline-end: 8px; color: rgba(255, 255, 255, .45); } @media (max-width: 500px) { .header2-logo { display: none; } } /* ---- Content ---- */ .content { max-width: 640px; margin: 0 auto; padding: 32px 20px 48px; } h1 { font-size: 200%; font-weight: 500; margin: 0 0 12px; } h2 { font-size: 115%; font-weight: 500; margin: 34px 0 6px; } .lead { font-size: 115%; } ul { padding-inline-start: 22px; } li { margin-bottom: 4px; } .fine { font-size: 90%; color: var(--lg-text-muted); } /* ---- Donate area ---- */ .donate-area { background: var(--lg-surface); border: 1px solid var(--lg-line); border-radius: var(--lg-radius); padding: 20px 22px; margin-top: 8px; text-align: center; } .donate-area form { margin: 0; } /* Both an (the fallback link) and a