/* Invoice payment page — extends the palette in /style.css. --accent is set per-brand on from the invoice's Xero branding theme. */ .pay-body { display: flex; flex-direction: column; min-height: 100vh; } .pay-main { flex: 1; width: 100%; max-width: 640px; padding: 3rem 1.25rem; margin: 0 auto; } .pay-card { background: var(--card-bg); border: 2px solid #2a2a2a; border-radius: var(--radius); padding: 2rem; } .pay-card h1 { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.75rem; } .pay-note { color: var(--muted); font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.5rem; } .pay-hint { color: var(--muted); font-size: 0.8rem; margin: -0.75rem 0 1rem; } .pay-optional { color: var(--muted); font-weight: 400; } /* ── Amount summary ── */ .pay-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 1.25rem; margin-bottom: 1.75rem; background: #131313; border: 1px solid #2a2a2a; border-left: 4px solid var(--accent); border-radius: 10px; } .pay-summary-label { color: var(--muted); font-size: 0.9rem; } .pay-summary-amount { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; } /* ── Form fields ── */ label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; letter-spacing: 0.01em; } input[type="text"], input[type="email"], select { width: 100%; padding: 0.75rem 0.9rem; margin-bottom: 1.1rem; background: #101010; color: #f0ece8; border: 1px solid #333; border-radius: 8px; font-family: inherit; font-size: 1rem; transition: border-color var(--transition); } input:focus, select:focus { outline: none; border-color: var(--accent); } input::placeholder { color: #555; } .pay-fieldset { border: 1px solid #2a2a2a; border-radius: 10px; padding: 1.25rem 1rem 0.25rem; margin: 0 0 1.5rem; } .pay-fieldset legend { padding: 0 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); } .pay-row { display: flex; gap: 0.75rem; } .pay-row > div { flex: 1; min-width: 0; } /* ── Revolut card iframe ── The iframe sits inside this div; we style the container, Revolut styles the inputs (see the `styles` object in pay.js). */ .pay-card-field { padding: 0.75rem 0.9rem; margin-bottom: 1.25rem; background: #101010; border: 1px solid #333; border-radius: 8px; min-height: 3rem; transition: border-color var(--transition); } .rc-card-field--focused { border-color: var(--accent); } .rc-card-field--invalid { border-color: #d9534f; } /* ── Button ── */ .pay-button { width: 100%; padding: 0.95rem 1rem; background: var(--accent); color: #fff; border: none; border-radius: 10px; font-family: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer; transition: filter var(--transition), opacity var(--transition); } .pay-button:hover:not(:disabled) { filter: brightness(1.12); } .pay-button:disabled { opacity: 0.45; cursor: not-allowed; } .pay-button.is-busy { cursor: progress; } /* ── Messages ── */ .pay-error { padding: 0.75rem 0.9rem; margin-bottom: 1rem; background: rgba(217, 83, 79, 0.12); border: 1px solid rgba(217, 83, 79, 0.5); border-radius: 8px; color: #ffb3b0; font-size: 0.9rem; line-height: 1.45; } .pay-secure { margin-top: 1rem; color: var(--muted); font-size: 0.78rem; line-height: 1.5; text-align: center; } #step-done h1 { color: var(--accent); } @media (max-width: 520px) { .pay-main { padding: 1.5rem 1rem; } .pay-card { padding: 1.5rem 1.25rem; } .pay-row { flex-direction: column; gap: 0; } } /* The header background follows the brand: white behind the dark Enterprises artwork, dark behind the cream trading-name artwork. */ .pay-body .site-header { background: var(--header-bg, #ffffff); border-bottom-color: var(--accent); transition: background var(--transition), border-color var(--transition); } /* ── Bank transfer details ── */ .bank-details { margin: 0 0 1.5rem; border: 1px solid #2a2a2a; border-radius: 10px; overflow: hidden; } .bank-row { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid #222; } .bank-row:last-child { border-bottom: none; } /* The reference is the field people forget, so it gets the accent treatment. */ .bank-row.reference { background: #131313; border-left: 4px solid var(--accent); } .bank-row dt { flex: 0 0 8.5rem; color: var(--muted); font-size: 0.85rem; } .bank-row dd { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0; min-width: 0; } .bank-value { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; word-break: break-all; } .bank-copy { flex: 0 0 auto; padding: 0.35rem 0.7rem; background: transparent; color: var(--muted); border: 1px solid #333; border-radius: 6px; font-family: inherit; font-size: 0.78rem; cursor: pointer; transition: color var(--transition), border-color var(--transition); } .bank-copy:hover { color: #f0ece8; border-color: var(--accent); } .bank-copy.is-copied { color: var(--accent); border-color: var(--accent); } .pay-warning { padding: 0.85rem 1rem; margin-bottom: 1rem; background: rgba(212, 162, 76, 0.1); border: 1px solid rgba(212, 162, 76, 0.4); border-radius: 8px; font-size: 0.9rem; line-height: 1.5; } .pay-alt { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #222; text-align: center; font-size: 0.9rem; color: var(--muted); } .pay-alt a { color: var(--accent); } @media (max-width: 520px) { .bank-row { flex-direction: column; align-items: flex-start; gap: 0.35rem; } .bank-row dt { flex-basis: auto; } .bank-row dd { width: 100%; } } /* ── Payment method choice ── */ .method-choice { display: flex; flex-direction: column; gap: 0.75rem; } .method-option { display: block; width: 100%; padding: 1.1rem 1.25rem; background: #131313; color: #f0ece8; border: 1px solid #333; border-radius: 10px; font-family: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color var(--transition), background var(--transition), transform var(--transition); } .method-option:hover { background: #171717; border-color: var(--accent); transform: translateY(-2px); } .method-title { display: block; font-size: 1.05rem; font-weight: 600; margin-bottom: 0.2rem; } .method-sub { display: block; color: var(--muted); font-size: 0.85rem; line-height: 1.4; } /* ── Revtag ── A secondary option: only useful to customers who already have Revolut, so it sits apart from the bank details rather than among them. */ .revtag { padding: 1.1rem 1.25rem 0.5rem; margin: 0 0 1.25rem; background: #131313; border: 1px dashed #333; border-radius: 10px; } .revtag-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.35rem; } .revtag-note { color: var(--muted); font-size: 0.85rem; line-height: 1.5; margin-bottom: 0.85rem; } .revtag .bank-details { margin-bottom: 0.85rem; background: #0e0e0e; } .revtag .bank-value { font-size: 1.05rem; } /* Referral line — deliberately quiet. It sits on a page someone reached to pay an invoice, so it must not compete with the details they came for. */ .revtag-referral { padding-top: 0.85rem; margin-bottom: 0.85rem; border-top: 1px solid #262626; color: var(--muted); font-size: 0.8rem; line-height: 1.55; } .revtag-referral a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }